TIL #71

loci·2024년 7월 10일
0

TIL

목록 보기
68/111

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의 요소

  1. Adapter - 데이터 테이블을 목록 형태로 보여주기 위해 사용되는 것으로, 데이터를 다양한 형식의 리스트 형식을 보여주기 위해서 데이터와 RecyclerView 사이에 존재하는 객체
  2. 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()  
    }  
}
profile
편리한 개발자

0개의 댓글