[Android Studio] 네비게이션 내 확장 리스트 2

앞선 네이게이션 내 확장 리스트 1에서 말했듯 우리는 확장 리스트뷰를 구현하기 위하여 많은 시도들을 하였다.

오늘은 최종적으로 우리 스토리보드 대로 구현 성공한 내용에 대하여 담겠다.

 

위 화면과 같이 코스 창을 구현 하였고, 이에 필요한 java파일은 2개, xml파일은 4개이다.

보통 expandable listview를 구현하는데는 총 5개의 파일이 필요하나, 우리는 내비게이션 내 구현하였기 때문에 총 6개의 파일을 사용하였다.

(course.java, ExpandableListAdapter.java, course.xml, course_nevi.xml, list_course_group.xml, list_course_item.xml)

 

일단 기본 화면은 course.java와 course.xml 그리고 course_nevi.xml이다.

네비게이션 xml에서 조작하는 내용은 모두 course와 연결시켜 course.java에서 코딩을 하였다.

 

-----------------------------------------------------------------------------------------------------------------------------------

 

우리는 expandable listview를 네비게이션에 넣었기 때문에 확장 리스트뷰를 띄우고자 하는 부분에 다음 내용을 추가하였다. expandable listview의 아이디는 lvExp로 하였다.

-> course_nevi.xml

 

 

일반 리스트뷰와 달리 확장을 하기 때문에 하나의 xml을 이용하기 보다는 부모 자식레이아웃을 따로 디자인 해주기로 하였다. 부모 레이아웃은 list_course_group.xml을, 자식 레이아웃은 list_course_item.xml을 추가로 생성하였다.

-> list_course_group.xml

이미지 변경 테스트를 진행하기 위하여 이미지 뷰를 추가하였다. 해당 아이디는 iv_image이다.

메인인 텍스트뷰(부모 레이아웃)의 아이디는 lblListHeader이다.

 

-> list_course_item.xml

자식 레이아웃은 textview하나만 존재하며 이것의 아이디는 lblListItem으로 설정하였다.

 

-----------------------------------------------------------------------------------------------------------------------------------

기본적인 디자인을 하였으면 course.java로 넘어가 선언을 해준다.

 

일단 course_nevi에서 만들어준 확장 리스트뷰(lvExp)를 가져온다.

그리고 리스트뷰에 데이터 넣을 곳을 만들어준다 (부모 레이아웃의 listDataHeader, 자식 레이아웃의 listDataChild 이용)

마지막으로 가져온 확장리스트뷰를 세팅해준다.

 

그 아래는 클릭 이벤트를 설정하였는데, 부모 뷰를 클릭했을 경우, 그룹이 열릴경우, 닫힐경우, 자식 뷰를 클릭했을 경우 내용을 설정할 수 있다. 각각 Toast Message로 확장, 닫힘, 어떤 뷰 클릭을 하였는지 알 수 있다.(주석처리된 부분 참고)

우리는 주석처리 하였듯, 열림과 닫힘 토스트 메시지를 삭제하고 추후 사용할 내용에 대한 switch-case문을 작성하였다.

여기서 가장 중요한 내용은 어떤 뷰를 클릭하였는지 분별을 하는 것인데,

이것은 listDataChild.get(listDataHeader.get(groupPosition)).get(childPosition)을 통해 알 수 있다.

또한 뷰를 클릭시에 기본 course화면이 바뀐 내용을 보여주기 위하여 return 바로 윗부분에

drawerLayout.closeDrawers(); 라는 것을 추가하여 클릭시 자동으로 drawerlayout을 닫아주도록 하였다.

 

마지막으로 course.java의 onClick 메소드 바깥쪽에 다음 코드를 이용하여

부모 뷰 타이틀 및 차일드 뷰 데이터를 추가하였다.

-----------------------------------------------------------------------------------------------------------------------------------

 

이 외 필요한 내용은 ExpandableListAdapter.java 파일에 넣어주었다.

 

위 java 파일에서는 차일드 뷰 반환, 차일드 뷰 ID 반환, 차일드 뷰 생성, 차일드 뷰 사이즈 반환, 그룹 포지션 반환, 그룹 사이즈 반환, 그룹 ID 반환, 그룹 뷰 생성, 그룹 열고 닫을 시 아이콘 변경 등의 내용이 담겨있다.

 

우리는 리스트뷰가 열고 닫힐때의 아이콘을 직접 제작하여 사용하였기 때문에,

기존에 기본으로 제공하는 그룹뷰 아이콘을 제거해주었다.

 

이 내용은 course_nevi.xml 중 expandableListView 에 android:groupIndicator="@null"를 추가하여 제거하였다.

 

------------------------------------------------------------------------------------------------------------------------------------

기본적으로 내용을 실행하면 다음과 같다.

기본 추천코스 화면에 다음 아이콘이 있다.

오른쪽 버튼을 클릭하여 네비게이션 화면을 띄울 수 있고, 여기서 예를들어 어린이 체험코스를 누른다면

네비게이션 창이 자동으로 닫히면서 어떤 뷰를 눌렀는지 Toast 메시지를 띄운다.