[내일배움캠프][TIL] 24.01.04 (목) - Android 앱개발 숙련 - RecyclerView

1. Android 앱개발 숙련 - RecyclerView

 

저번 시간에는 findViewById를 좀 더 간편하게 사용할 수 있게 대체한 ViewBinding에 대해서 알아봤다.

이번 시간에는 드디어 RecyclerView를 알아볼 차례다.

 

이 RecyclerView는 앱개발에서 굉장히 중요한 요소임과 동시에, 굉장히 어려운 개념이기 때문에 무조건 제대로 숙지해야 한다.

 

 

어댑터뷰 (AdapterView)

 

RecyclerView에 대해서 알기 위해서는 우선 어댑터뷰부터 알고 넘어가야 한다.

 

1. 어댑터뷰(AdapterVIew)

• 여러개의 항목을 다양한 형식으로 나열하고 선택 할 수 있는 기능을 제공하는 뷰.
  • 리스트뷰(ListView) : 항목을 수직으로 나열시킨 뷰
  • 그리드뷰(GridView) : 항목을 격자 식으로 나열시킨 뷰
• 어댑터 뷰는 표시할 항목 데이터를 직접 관리하지 않고,어댑터라는 객체로부터 공급받음.

 

 

2. 어댑터(Adapter)

• 데이터를 관리하며 데이터 원본과 어댑터뷰(ListView, GridView) 사이의 중계 역할
  1. 어댑터뷰가 어댑터를 사용하기 위해서는 먼저 데이터 원본이 어댑터에 설정되어야 하고, 어댑터뷰에는 어댑터가 설정되어야 함
  2. 어댑터뷰는 항목을 표시하기 위해서 먼저 표시할 항목의 총 개수를 알 필요가 있을 것입니다. 이 때, 어댑터 뷰는 어댑터의 getCount()란 메소드를 통해 현재 어뎁터가 관리하는 데이터 항목의 총 개수를 반환.
  3. 어댑터 뷰는 어댑터의 getView()란 메소드를 통해서 화면에 실제로 표시할 항목뷰를 얻고, 이를 화면에 표시.
• 사용자가 어댑터뷰의 특정 위치의 항목을 선택하였을 때, 어댑터뷰는 선택된 항목, 항목ID, 항목뷰를 어댑터의 getItem(), getItemId(), getView() 메소드를 통해 얻어와서 이를 항목선택 이벤트 처리기에 넘김

 

• 어댑터 종류
  • BaseAdapter
  • ArrayAdapter
  • CursorAdapter
  • SimpleAdapter

 

 

3. ListView

복수 개의 항목을 수직으로 나타낸 뷰

리스트뷰 (ListView)

• 리스트뷰 만드는 법
  • 간단 요악
    1. SimpleListViewTest 프로젝트 생성
    2. 메인화면 레이아웃에 ListView 위젯 정의 (XML)
    3. 어댑터 객체 생성 (Kotlin 코드)
    4. ListView 객체에 어댑터 연결 (Kotlin 코드)
  • 메인화면 레이아웃에 ListView 위젯 정의

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
           />
    </LinearLayout>​

  • 어댑터 객체 생성

    class MainActivity : AppCompatActivity() {
    
        private lateinit var binding: ActivityMainBinding
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            binding = ActivityMainBinding.inflate(layoutInflater)
            setContentView(binding.root)
    
            // 데이터 원본 준비
            val items = arrayOf<String?>("item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6",  "item7", "item8")
    
            //어댑터 준비 (배열 객체 이용, simple_list_item_1 리소스 사용
            val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)
    
       }
    }​

  • ListView 객체에 어댑터 연결

    class MainActivity : AppCompatActivity() {
    
        private lateinit var binding: ActivityMainBinding
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            binding = ActivityMainBinding.inflate(layoutInflater)
            setContentView(binding.root)
    
            // 데이터 원본 준비
            val items = arrayOf<String?>("item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6",  "item7", "item8")
    
            //어댑터 준비 (배열 객체 이용, simple_list_item_1 리소스 사용
            val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)
    
            // 어댑터를 ListView 객체에 연결
            binding.listView.adapter = adapter
    
        }
    }​

 

 

 

4. GridView

복수 개의 항목을 격자 모양으로 나타낸 뷰

 

 

 

RecyclerView

 

1. RecyclerView

• 안드로이드 앱에서 리스트 형태의 데이터를 표시하는데 사용되는 위젯
• 여러 아이템을 스크롤 가능한 리스트로 표현하며, 많은 아이템을 효율적으로 관리하고 보여줌

  

  RecyclerView

• ListView와 RecyclerView의 차이점

ListView는 아이템이 100개면 100이 삭제 생성되는 반면, RecyclerView는 100개여도 10개정도의 View만 만들고 10개를 재활용해서 사용.

 

즉, RecyclerView는 ListView보다 자원 활용 측면에서 훨씬 우위를 지님.

 

 

2. RecyclerView을 사용하기 위해 필요한 요소

1. 어댑터 (Adapter)
   • 데이터 테이블을 목록 형태로 보여주기 위해 사용되는 것으로, 데이터를 다양한 형식의 리스트 형식을 보여주기 위해서 데이터와 RecyclerView 사이에 존재하는 객체
   • 데이터와 RecyclerView 사이의 통신을 위한 연결체
2. 뷰홀더 (ViewHolder)
   • 화면에 표시될 데이터나 아이템들을 저장하는 역할을 하는 객체

 

 

3. RecyclerView 사용 예

 

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />
</LinearLayout>

 

MyAdapter.kt

class MyAdapter(val mItems: MutableList<MyItem>) : RecyclerView.Adapter<MyAdapter.Holder>() {

    interface ItemClick {
        fun onClick(view : View, position : Int)
    }

    var itemClick : ItemClick? = null

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding = ItemRecyclerviewBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return Holder(binding)
    }

    override fun onBindViewHolder(holder: Holder, position: Int) {
        holder.itemView.setOnClickListener {  //클릭이벤트추가부분
            itemClick?.onClick(it, position)
        }
        holder.iconImageView.setImageResource(mItems[position].aIcon)
        holder.name.text = mItems[position].aName
        holder.age.text = mItems[position].aAge
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getItemCount(): Int {
        return mItems.size
    }

    inner class Holder(val binding: ItemRecyclerviewBinding) : RecyclerView.ViewHolder(binding.root) {
        val iconImageView = binding.iconItem
        val name = binding.textItem1
        val age = binding.textItem2
    }
}

 

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 데이터 원본 준비
        val dataList = mutableListOf<MyItem>()
        dataList.add(MyItem(R.drawable.sample_0, "Bella", "1"))
        dataList.add(MyItem(R.drawable.sample_1, "Charlie", "2"))
        dataList.add(MyItem(R.drawable.sample_2, "Daisy", "1.5"))
        dataList.add(MyItem(R.drawable.sample_3, "Duke", "1"))
        dataList.add(MyItem(R.drawable.sample_4, "Max", "2"))
        dataList.add(MyItem(R.drawable.sample_5, "Happy", "4"))
        dataList.add(MyItem(R.drawable.sample_6, "Luna", "3"))
        dataList.add(MyItem(R.drawable.sample_7, "Bob", "2"))

        binding.recyclerView.adapter = MyAdapter(dataList)

        val adapter = MyAdapter(dataList)
        binding.recyclerView.adapter = adapter
        binding.recyclerView.layoutManager = LinearLayoutManager(this)

        adapter.itemClick = object : MyAdapter.ItemClick {
            override fun onClick(view: View, position: Int) {
                val name: String = dataList[position].aName
                Toast.makeText(this@MainActivity," $name 선택!", Toast.LENGTH_SHORT).show()
            }
        }
    }
}