[TIL] Android 앱 개발 숙련 : 뷰 바인딩과 어댑터뷰, RecyclerView

✏240103 수요일 TIL(Today I learned) 오늘 배운 것

📖뷰 바인딩 (View Binding)

• 뷰 바인딩을 사용하여 XML레이아웃 파일과 쉽게 상호작용(연결)할 수 있다.
• XML 레이아웃 파일의 결합 클래스(바인딩클래스)를 자동으로 생성하여, 해당 레이아웃에 있는 모든 ID에 대해 직접 참조가 가능하다.
  =>이를 통해 코드에서 직접 뷰에 접근(연결)할 수 있게 되며, 바인딩 객체의 이름은 레이아웃이름을 파스칼케이스로바꾼후 Binding을 붙여서 만든다.
  • ex1)레이아웃 파일 이름이 activity_main.xml인 경우, 생성되는 바인딩 클래스의 이름은 ActivityMainBinding이 된다.
  • ex2)레이아웃 파일 이름이 fragment_home.xml인 경우, 생성되는 바인딩 클래스의 이름은 FragmentHomeBinding이 된다.
• 무엇보다도 findViewById보다 Null과 Type에서 안정성이 높기 때문에 주로 뷰바인딩을 사용한다.

[코틀린에서 뷰바인딩 설정 방법]

1. gradle설정

• 모듈 bulid.gradle 파일에 의존성(dependecies{ }) 위의 부분에 있는 android{ }안에 뷰 바인딩 사용을 추가해준다.

android{
	...
    
   //AndroidStudio 3.6 ~ 4.0
//    viewBinding{
//    	enabled = true
//    }
    
    // AndroidStudio 4.0(동물 이름으로 된 코드네임 버전) ~
    buildFeatures{
    	viewBinding true
    }
}

2. Activitiy에서 설정

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.lab_view.databinding.ActivityMainBinding

  class MainActivity : AppCompatActivity() {
    
    // activity_main.xml 바인딩
    private lateinit var binding: ActivityMainBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        //inflate를 통해 xml에 있는 뷰를 객체화 시켜준다.
        binding = ActivityMainBinding.inflate(layoutInflater)
        
//        val view = binding.root
//        setContentView(view)
        setContentView(binding.root)
    }
}

📖어댑터 뷰 (Adapter View)

• 어댑터뷰는 어댑터에 정의된 인터페이스를 바탕으로 필요한 정보를 요청하여 항목뷰를 화면에 표시하거나 선택된 항목뷰를 처리한다.
  => 여러개의 항목을 다양한 형식으로 나열하고 선택 할 수 있는 기능을 제공하는 뷰
• 표시할 항목 데이터를 직접 관리하지 않고, 어댑터(객체)를 통해 공급받는다.
• 리스트뷰, 그리드뷰, 리사이클러뷰가 있다. (요즘에는 리사이클러뷰를 사용하기 때문에 나머지의 활용도가 높지는 않다.)
  • 리스트뷰(ListView) : 항목을 수직으로 나열시키는 방식을 통해 표시
  • 그리드뷰(GridView) : 항목을 2차원 스크롤 가능한 그리드로 표시
    • android:columnWidth=“100dp” : 그리드 항목 하나의 폭을 100dp로 설정
    • android:numColumns=“auto_fit”: 열의 폭과 화면 폭을 바탕으로 열의 개수를 자동 계산
    • android:verticalSpacing: 항목 간의 간격 설정
    • android:stretchMode=“columnWidth”: 열 내부의 여백을 폭에 맞게 채움
  • 리사이클러뷰(RecyclerView) : 이하의 📖RecyclerView(리사이클러뷰) 참조

[어댑터 (Adapter)]

• 데이터 원본과 어댑터뷰(ListView, GridView) 사이의 중계 역할을 한다.

• 어댑터의 종류

  • BaseAdapter : 어댑터 클래스의 공통 구현, 사용자 정의 어댑터 구현 시 따로 클래스를 만들어서 Base Adapter를 상속받아 사용
    • getCount(), getItem(), getItemId(), getView()을 override해야한다.
  • ArrayAdapter : 객체 배열이나 리소스에 정의된 배열로부터 데이터를 공급받음
    • ArrayAdapter(현재컨텍스트(this), 리소스[항목으로 표시될 리소스 ID], objets[공급될 데이터 원본 배열])
  • CursorAdapter : 데이터베이스로부터 데이터를 공급받음
  • SimpleAdapter : 데이터를 Map(키,값)의 리스트로 관리, 데이터를 XML파일에 정의된 뷰에 대응시키는 어댑터

• 어댑터가 데이터 항목을 표시하는 방법

  1. 데이터 원본은 어댑터에 설정, 어댑터뷰에는 어댑터를 설정한다.
  2. 어댑터 뷰에서 어댑터의 getCount()란 메소드를 통해 현재 어뎁터가 관리하는 데이터 항목의 총 개수를 반환한다. (표시할 항목의 총 개수를 알기 위해서)
  3. 어댑터뷰는 선택된 항목, 항목ID, 항목뷰를 어댑터의 getItem(), getItemId(), getView() 메소드를 통해 얻어와서 이를 항목선택 이벤트 처리기에 넘겨준다.

• AdaptereView.OnItemClickListener : 어댑터뷰들은 온클릭리스너를 다 가지고 있다. (parent, view, position ,id 중에 필요한 것만 쓰면 된다.)

  • parent : 클릭 이벤트가 발생된 AdapterView
  • view : 실제 클릭된 AdapterView안의 View
  • position : 어댑터 내에서 클릭된 항목/뷰의 위치
  • id : 클릭된 항목의 id

📖RecyclerView(리사이클러뷰)

• 한정적인 화면에 스크롤 가능한 리스트로 표현하여 많은 데이터를 넣을 수 있는 View
• 많은 아이템을 효울적으로 관리하고 보여주는 역할을 하며, 이름에서 알 수 있듯이 View를 재활용해서 사용한다.
• 리스트뷰가 계속 아이템을 생성하고 삭제하는 것을 반복하여 메모리를 크게 차지하는 것에 반해, 리사이클러뷰는 아이템 개수와 상관 없이 일정 개수의 View만 만들어서 재활용하여 사용하기 때문에 효율적이고 안정적이다.
• RecyclerView를 사용하기 위한 준비물
  • LayoutManager : RecyclerView 내부의 아이템들이 어떻게 배치될지를 결정.

    //수직 리스트
    recyclerView.layoutManager = LinearLayoutManager(this)
    //2열 그리드
    recyclerView.layoutManager = GridLayoutManager(this, 2)
    // 이외에도, StaggeredGridLayoutManager가 있다.

  • RecyclerView.Adapter : 데이터(ViewHolder)와 RecyclerView 사이에서 데이터를 다양한 형식의 리스트 형식으로 보여주기 위한 연결체.
    => RecyclerView에 표시될 데이터와 해당 데이터를 보여줄 ViewHolder를 연결.
    
  • ViewHolder : 리사이클러뷰의 개별 아이템 뷰를 저장하는 객체, 재활용하기 위해서 View를 기억하는 역할을 한다. 보통 Adapter클래스 안에서 inner Class로 선언하여 사용.

---

✏새롭게 알게된 것과 내일 할 일

• 오늘 드디어 뷰바인딩과, 리사이클러뷰를 배웠다. 입문 팀 프로젝트 떄, 뷰바인딩에 대한 글을 많이 봤는데, findViewById보다 간편해 보여서 눈길이 갔었다. 오늘 제대로 이론을 통해 배우니까 확실히 더 좋다는 것이 느껴진다.
  어댑터 뷰도 오며가며 많이 들었었는데, 일단 어댑터뷰 보다는 리사이클러뷰의 활용이 압도적으로 높다고 해서 그냥 이론적으로 보는 것으로 만족하기로 했다. 그리고 리스트뷰랑 그리드뷰는 맘만 먹으면 그렇게 어렵지 않게 적용할 수 있을 것 같다.
  일단은 선택과 집중을 위해 내일 리사이클러뷰에 대한 실습을 먼저 진행해야겠다.

• 마침 수준별 학습 과제로 리사이클러뷰로 기존의 클론코딩을 개선하는 과제가 주어졌는데, 실습과 과제를 먼저 한 다음 프레그먼트와 다이얼로그,알림 수업을 듣는 것이 좋을 것 같다. 그래도 벌써 오늘이 수요일이라서 목요일 금요일 이틀 남았는데.. 오전 중에 실습을 끝내고 오후에 프레그먼트 수업을 들을 수 있었으면 좋겠다. 그럼 금요일에 정리하고, 금요일 오후에 다이얼로그, 알림을 듣고 금요일 저녁에 3가지 이론 정리를 하고. 다음주 월요일부터는 개인과제를 수행할 수 있도록 파이팅!