[안드로이드 - 코틀린] Recyclerview를 이용해 itemView, adapter 이용하기 1

일단 원하는 액티비티에 리 사이클러 뷰를 생성한다

 

일단 설명에 들어가기전 전체 소스 코드이다 각 부분별 설명 예정

처음 리사이클러 뷰를 사용한다면 참고용 혹은 이해용으로 사용할만하다.

 

MainActivity

class MainActivity : AppCompatActivity() {

    val DataList = arrayListOf(
        Data(R.drawable.item_layout_shape, "0"),
        Data(R.drawable.ic_launcher_background, "1"),
        Data(R.drawable.ic_launcher_foreground, "2"),
        Data(R.drawable.item_layout_shape, "3"),
        Data(R.drawable.item_layout_shape, "4"),
        Data(R.drawable.item_layout_shape, "5"),
        Data(R.drawable.item_layout_shape, "6"),

    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val recyclerView: RecyclerView = findViewById(R.id.recyclerView)

        recyclerView.layoutManager = LinearLayoutManager(applicationContext, LinearLayoutManager.VERTICAL, false)
        recyclerView.adapter = CustomAdapter(DataList)

    }
}

첫 번째 MainActivity이다

여기 있는 코드는 dataList를 임의로 생성해 Recyclerview와 Adapter를 이용해 연결해 출력하는 형태이다 

 

현재는 MainActivity에 DataList가 있지만 Retrofit2 통신이나 API 호출을 통해 데이터를 리스트에 담아 출력하는 경우 MainAcrtivity가 아닌 Adapter 부분에 생성해 사용해줘야 한다.

 

지금은 Recyclerview에 데이터를 어떻게 넣고 출력하는지에 대한 틀 정도만 이해하면 충분하다

 

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView

        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

 

Adapter 클래스 

// 데이터 형식
class Data(
	val image: Int, 
    val name: String)

class CustomViewHolder(v : View) : RecyclerView.ViewHolder(v){
    var imageView : ImageView = v.findViewById(R.id.im_custom)
    var textView : TextView = v.findViewById(R.id.tv_custom)

    val image2 = imageView
    val name2 = textView

}

class CustomAdapter(val DataList:ArrayList<Data>) : RecyclerView.Adapter<CustomViewHolder>(){

    // 생성하는 부분
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder {
        val itemView = LayoutInflater.from(parent.context).inflate(R.layout.custom_list, parent, false)
        return CustomViewHolder(itemView)
    }

    // 수정 하는 부분
    override fun onBindViewHolder(holder: CustomViewHolder, position: Int) {
        holder.image2.setImageResource(DataList[position].image)
        holder.name2.text = DataList[position].name
    }

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

}

현재 Adapter에서 가장 중요한 3가지는 Data, CustomViewHolder, CustomAdapter이다

 

첫 번째 class data는 하단에 있는 ⬇️ 커스텀 리스트를 보면 imageView와 textView가 존재한다 때문에 두 개의 data class를 만들어 줘야 되는데 imageView = int 형태 textView = string 형태로 만들어준다 현재 만들어진 코드는 class data가 없어도 데이터를 넣어 RecyclerView를 만드는데 문제가 없다 하지만 나중에 위에서 언급한 Retrofit2과 API와 같은 외부 데이터를 넣을 때 꼭 필요하기 때문에 만들어서 넣어주는 연습을 해줘야 된다 

 

CustomViewHolder는 RecyclerView에 필요한 item들을 선언해준다 (xml에 있는 id)

 

CustomAdapter는 총 3가지 부분으로 나눠져 있는데 생성하는 부분, 수정하는 부분, 아이템을 세는 부분으로 나뉘는데  onCreateHolder는 말 그대로 뷰를 생성하는 부분인데 이쪽에서 연결시킬 custom_list를 inflate를 해준다

 

onBindViewHolder는 연결된 뷰에 넣어줄 item들을 정의하는 구간이다 이쪽에서는 단순히 image2와 name2에 position 데이터를 넣어준다 ( MainActivity -> DataList ) 하지만 앞으로는 복잡한 데이터를 넣고 각종 이벤트들을 넣을 자리이므로 잘 알아둬야 한다!!

 

getItemCount는 출력할 데이터 사이즈를 리턴해주는 자리인데 현재는 DataList 개수를 단순히 반환해주지만 추후에 어떻게 얼마나 데이터를 넣고 같은 조건을 거는 역할을 해준다 

 

어뎁터에 들어간 coustom_list

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
    android:padding="20dp">

    <ImageView
        android:id="@+id/im_custom"
        android:layout_width="100dp"
        android:layout_height="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_custom"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/tv_custom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="텍스트를 입력하세요"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/im_custom" />

</androidx.constraintlayout.widget.ConstraintLayout>