[Android] ListView, Navigation Drawer

ListView

• ( https://developer.android.com/reference/android/widget/ListView )

ListView란?

• 수직적으로 스크롤 할 수 있도록 뷰들을 보여주는 기능

• 최근 생성된 뷰는 이전에 생성된 뷰의 아래 에 위치한다.

• 좀 더 개선된 ListView를 구현하고 싶다면 RecyclerView 를 사용한다.

• ListView의 layout XML

  <ListView
    android:id="@+id/list_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

• AdapterView 에서 상속 받은 객체이다.

• 스크롤 했을 때 새로운 뷰를 보여주는 것과 같은 기능이 필요할 때 ListAdapter 에 요청을 한다.

• list 안에 item 을 보여주기 위해서 setAdapter 메소드를 호출 한다.

GridView

RecyclerView

• ListView에 Flexibility 와 Performance 를 더한 리스트뷰의 확장판 이다.

Recycle ?

• 기존 ListView의 문제점 : 리스트 항목이 갱신될 때마다, 매번 아이템 뷰를 새로 구성해야 한다.
• RecyclerView : 기본적으로 뷰홀더(ViewHolder) 패턴을 사용한다.

Flexibility?

• 리사이클러뷰의 구현 요소 또는 구현에 따른 결과물이 쉽게 변경되거나 확장 될 수 있다.
• 수직(Vertical) 뿐만 아니라 수평(Horizontal) 으로 아이템을 나열 할 수 있다.

RecyclerView를 위한 구성 요소

• Adapter : 데이터 목록을 아이템 단위의 뷰로 구성하여 화면에 표시한다.
• Layout Manager : 리사이클러뷰는 수직 뿐만 아니라 수평으로 레이아웃을 나타낼 수 있다.
• ViewHolder : 레이아웃매니저가 제공하는 레이아웃 형태로, 어댑터를 통해 만들어진 각 아이템뷰는 뷰홀더 객체에 저장되어 화면에 표시되고 필요에 따라 재활용 된다.

RecyclerView 생성

0. 리사이클러뷰 라이브러리 추가하기

• 'build.gradle(Module:app)' 파일 열기

• 'dependencies' 부분에 recyclerview 추가하기

• 프로젝트 빌드 하기

  1. 메인 액티비티에 리사이클러뷰 추가

• 리사이클러뷰가 나타날 xml 파일 내에 코드 추가

  <android.support.v7.widget.RecyclerView
  android:id="@+id/recycler1"
  android:scrollbars="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

  2. 리사이클러뷰 아이템 뷰 레이아웃 추가

• 새로운 xml 파일 생성

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  
  <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/text1"
     android:textSize="32sp"/>
     </android.support.constraint.ConstraintLayout>
  

  3. 리사이클러뷰 어댑터 구현

• 개발자가 반드시 어댑터를 직접 구현 해야한다.

• 어댑터는 'RecyclerView.Adapter'를 상속하여 구현해야 한다.

• 어댑터를 만들 때, 오버라이드가 필요한 메서드
  onCreateViewHolder (ViewGroup parent, int viewType) : viewType 형태의 아이템 뷰를 위한 뷰홀더 객체 생성
  onBindViewHolder (ViewHolder holder, int position) : position 에 해당하는 데이터를 뷰홀더의 아이템뷰에 표시
  getItemCount () : 전체 아이템 갯수 리턴

Navigation Drawer (https://recipes4dev.tistory.com/140)

• Navigation Drawer를 만들 때는 루트 레이아웃을 'DrawerLayout'으로 만들어 주어야 한다.
• DrawerLayout의 Drawer에 항목을 나열 할때, 'ListView' 혹은 'RecyclerView' 를 사용한다.
• DrawerLayout의 주 화면을 사용 할때, 'FrameLayout' 을 사용한다.

Create a Layout XML file

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:showIn="@layout/activity_main">

    <android.support.v4.widget.DrawerLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:id="@+id/drawer">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="48sp"
            android:background="#FFFFFF"
            android:textColor="#000000"
            android:id="@+id/drawer_content"/>

        <ListView
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="#FFC107"
            android:id="@+id/drawer_menulist" />
    </android.support.v4.widget.DrawerLayout>

</android.support.constraint.ConstraintLayout>

• DrawerLayout의 ChildrenView 순서 : 주화면 -> Drawer로 사용될 뷰
• Drawer의 방향 : 'layout_gravity' - 'left(start)' or 'right(end)'
• Drawer의 크기
  'layout_width' - DrawerLayout 보다 작은 값
  'layout_height' - DrawerLayout 과 같은 값('match_parent')

Drawer's ListView Initialization

public class MainActivity extends AppCompatActivity {

    ListView listview = null ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        // ... 코드 계속

        final String[] items = {"WHITE", "RED", "GREEN", "BLUE", "BLACK"} ;
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, items) ;

        listview = (ListView) findViewById(R.id.drawer_menulist) ;
        listview.setAdapter(adapter) ;

        // 코드 계속 ...
    }
}

Drawer ListView Item Click Event

• Drawer에 표시된 ListView의 Item을 클릭하면 주 화면의 컨텐츠를 변경한다.

  public class MainActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
  
     // ... 코드 계속
  
     listview.setOnItemClickListener(new ListView.OnItemClickListener() {
         @Override
         public void onItemClick(AdapterView parent, View v, int position, long id) {
  
             TextView contentTextview = (TextView) findViewById(R.id.drawer_content) ;
  
             switch (position) {
                 case 0 : // WHITE
                     contentTextview.setBackgroundColor(Color.rgb(0xFF, 0xFF, 0xFF)) ;
                     contentTextview.setTextColor(Color.rgb(0x00, 0x00, 0x00)) ;
                     contentTextview.setText("WHITE") ;
                     break ;
                 case 1 : // RED
                     contentTextview.setBackgroundColor(Color.rgb(0xFF, 0x00, 0x00)) ;
                     contentTextview.setTextColor(Color.rgb(0xFF, 0xFF, 0xFF)) ;
                     contentTextview.setText("RED") ;
                     break ;
                 case 2 : // GREEN
                     contentTextview.setBackgroundColor(Color.rgb(0x00, 0xFF, 0x00)) ;
                     contentTextview.setTextColor(Color.rgb(0x00, 0x00, 0x00)) ;
                     contentTextview.setText("GREEN") ;
                     break ;
                 case 3 : // BLUE
                     contentTextview.setBackgroundColor(Color.rgb(0x00, 0x00, 0xFF)) ;
                     contentTextview.setTextColor(Color.rgb(0xFF, 0xFF, 0xFF)) ;
                     contentTextview.setText("BLUE") ;
                     break ;
                 case 4 : // BLACK
                     contentTextview.setBackgroundColor(Color.rgb(0x00, 0x00, 0x00)) ;
                     contentTextview.setTextColor(Color.rgb(0xFF, 0xFF, 0xFF)) ;
                     contentTextview.setText("BLACK") ;
                     break ;
             }
  
             // 코드 계속 ...
         }
     });
  }
  }

• 위 코드에서 볼 점은 'position' 이라는 인자는 Drawer의 ListView에서 위에서부터 0,1,2,3... 값을 의미한다.

Drawer Close

listview.setOnItemClickListener(new ListView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View v, int position, long id) {

                // ... 코드 계속

                // close drawer.
                DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer) ;
                drawer.closeDrawer(Gravity.LEFT) ;
            }
        });

• 리스트뷰에서 아이템을 선택하면 Drawer가 닫히도록 만든다.
• 'closeDrawer' 함수를 호출한다.