TIL #71

loci·2024년 7월 10일

TIL

목록 보기

68/103

ImageView Adapter 만들기

class ImageAdapter : BaseAdapter() {  
    override fun getCount(): Int {  
        return mThumbIds.size  
    }  
  
    override fun getItem(position: Int): Any {  
        return mThumbIds[position]  
    }  
  
    override fun getItemId(position: Int): Long {  
        return position.toLong()  
    }  
  
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {  
        val imageView: ImageView  
        if (convertView == null) {  
            imageView = ImageView(parent!!.context)  
            imageView.layoutParams = AbsListView.LayoutParams(200, 200)  
            imageView.scaleType = ImageView.ScaleType.CENTER_CROP  
            imageView.setPadding(8, 8, 8, 8)  
        } else {  
            imageView = convertView as ImageView  
        }  
        imageView.setImageResource(mThumbIds.get(position))  
        return imageView  
    }  
  
    private val mThumbIds = arrayOf<Int>(  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground,  
        R.drawable.ic_launcher_background, R.drawable.ic_launcher_foreground  
    )  
  
}

val adapter = ImageAdapter()  
  
binding.listView.adapter = adapter  
  
binding.listView.setOnItemClickListener { parent, view, position, id ->  
    Toast.makeText(this@MainActivity, ""+(position+1)+"번째 선택", Toast.LENGTH_SHORT).show()  
}

RecyclerView (리싸이클러뷰)

리스트형태의 데이터를 표시하는데 사용되는 위젯, 만은 아이템을 관리하고 보여준다.

View를 재활용해서 사용한다.
한정된 화면에 많은 데이터를 넣을 수 있다.

ListView vs RecyclerView

LlistView는 스크롤이 될 때마다 위에있던 아이템이 삭제되고 아래있는 아이템은 생성되는 것이 반복된다. 아이템이 100개면 100이 삭제 생성되므로 성능에 좋지 않다
RecyclerView는 위에 있던 아이템을 재활용해 아래로 이동된다. 아이템이 100개면 10개정도의 View만 만들어지고 10개를 재활용하기 때문에 ListView의 단점이 성능이 보완된다.

RecyclerView의 요소

Adapter - 데이터 테이블을 목록 형태로 보여주기 위해 사용되는 것으로, 데이터를 다양한 형식의 리스트 형식을 보여주기 위해서 데이터와 RecyclerView 사이에 존재하는 객체
ViewHolder - 화면에 표시될 데이터나 아이템을 저장, RecyclerView는 View를 재활용해야하기 때문에 View를 기억하고 있어야하는데 ViewHolder가 그 역할을 한다.

RecyclerView 만들기

Recycler View layout정의

<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>

Item layout 정의

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:orientation="vertical">  
  
    <ImageView        android:id="@+id/iconItem"  
        android:layout_width="60dp"  
        android:layout_height="60dp"  
        android:layout_gravity="center_vertical"  
        android:layout_weight="1"  
        android:background="@color/black"  
        android:padding="8dp"  
        android:scaleType="centerCrop"  
        android:src="@drawable/ic_launcher_background" />  
  
    <LinearLayout        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_weight="2"  
        android:orientation="vertical">  
  
        <TextView            android:id="@+id/textItem1"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:hint="Name"  
            android:padding="4dp"  
            android:textColor="@color/black"  
            android:textSize="20dp" />  
  
        <TextView            android:id="@+id/textItem2"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:hint="Age"  
            android:padding="4dp"  
            android:textColor="#00FF00" />  
    </LinearLayout>  
</LinearLayout>

adapter 정의

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  
    }  
  
}

MyAdapter에 데이터가 전해지면 conCreateViewHolder가 실행되고 Holder를 선언해준다.
onBindViewHolder에서 만약 8개의 데이터가 들어오게 되면 8번을 돌면서 아이템을 만들어 표현해준다. 이떄 보이는 곳 까지만 만들게됨. 5개만 화면상에 보인다면 5개만 만든다.

MainActivity 설정

val dataList = mutableListOf<MyItem>()  
dataList.add(MyItem(R.drawable.ic_01, "Bella", "1"))  
dataList.add(MyItem(R.drawable.ic_02, "Charlie", "2"))  
dataList.add(MyItem(R.drawable.ic_03, "Daisy", "1.5"))  
dataList.add(MyItem(R.drawable.ic_04, "Duke", "1"))  
dataList.add(MyItem(R.drawable.ic_05, "Max", "2"))  
dataList.add(MyItem(R.drawable.ic_06, "Happy", "4"))  
dataList.add(MyItem(R.drawable.ic_07, "Luna", "3"))  
dataList.add(MyItem(R.drawable.ic_08, "Bab", "2"))  
dataList.add(MyItem(R.drawable.ic_09, "Bab", "2"))  
dataList.add(MyItem(R.drawable.ic_10, "Bab", "2"))  
dataList.add(MyItem(R.drawable.ic_11, "Bab", "2"))  
dataList.add(MyItem(R.drawable.ic_12, "Bab", "2"))  
  
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()  
    }  
}