안드로이드 프로그래밍[Kotiln Code]/리싸이클러뷰

[Kotlin] 리싸이클러뷰 : recyclerView 적용

훈츠 2020. 1. 30. 15:17
반응형

자바에서 리싸이클러뷰를 구현하는 방법에 대해 포스팅 해놓은것이 있으나, 코틀린이라는 언어적 장점으로 비교적 간단한 방법으로 리싸이클러뷰를 구현 할수 있습니다. 코틀린 언어적 설명보다 지금 당장 구현 할수 있는 방법에 대해 설명해 보도록 하겠습니다. 

1. 리싸이클러뷰 다운로드 : Gradle 이용 해서, 다운로드 하거나, XML 구성하는곳에서 RecyclerView를 drag and drop 으로 구성

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    // recyclerview, cardview
    implementation 'com.android.support:recyclerview-v7:29.0.0'//시점에 맞게 최신버젼 사용
    implementation 'com.android.support:cardview-v7:29.0.0'
}

2. 부분 화면 구성 : 리싸이클러뷰에 저장 하고 띄우기 위한 부분화면 구성 

카드뷰를 구현하고 싶을때는 이곳에 최상단 Tag를 cardview로 해주면 됨. 
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:cardCornerRadius="5dp"
    android:background="@android:color/holo_blue_bright"
    android:layout_margin="5dp"
    >
    
    <LinerLayout ~
    
   </androidx.cardview.widget.CardView>

3. 액티비티 혹은 프래그먼트 : 리싸이클러뷰를 XML 에 구성 후 ID 부여 

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/container_main"	//ID 부여 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"
        android:padding="4dp"
        android:scrollbars="vertical"

4. 모델 클래스 구성 : ex) mainModel.class 

class MainViewModel (val imageId : Int, val subject:String, val subject2:String )

5. 뷰 홀더 구성 : ex) mainViewHolder.class

class MainViewHolder (override val containerView: View) : RecyclerView.ViewHolder(containerView),LayoutContainer

6. 어댑터 구성 : ex) mainViewAdpter , itemClickListener 인터페이스 구성하였음. 필요하지 않으면 삭제 하고 사용해도됨

class MainViewAdapter (val context: Context, val intId:Int, val list:List<MainViewModel>): RecyclerView.Adapter<MainViewHolder>(){
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MainViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(intId,parent,false)
        return MainViewHolder(view)
    }

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

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

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

    private lateinit var itemClickListener : ItemClickListener

    fun setItemClickListener(itemClickListener : ItemClickListener){
        this.itemClickListener=itemClickListener
    }


    override fun onBindViewHolder(holder: MainViewHolder, position: Int) {
        holder.containerView.imageView.setImageResource(list[position].imageId)
        holder.containerView.textView.text=list[position].subject
        holder.containerView.textView2.text=list[position].subject2

        holder.containerView.setOnClickListener({
            itemClickListener.onClick(it,position)
        })


    }

7. 액티비티에서 어댑터 및 리싸이클러 뷰 프로그램 구성 

//어댑터에 넣을 데이터를 미리 구성, 추후 구성하고 싶으면 list.add()룰 이용
val list = listOf<MainViewModel>(
        MainViewModel(R.drawable.network, "전송 리스트","자동 문자 전송 정보를 저장하는 화면입니다."),
        MainViewModel(R.drawable.log, "전송 내역","자동 전송된 문자 내역을 확인하는 화면입니다."),
        MainViewModel(R.drawable.sms, "문자 보내기","문자를 전송 할수 있는 화면입니다."),
        MainViewModel(R.drawable.info, "정보","버전을 확인 할수 있습니다.")
    )

//어댑터 생성 
val adapter = MainViewAdapter(this, R.layout.sub_main_view, list)

//액티비티에 onCreate 
override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	//리싸이클러뷰 ID에 adpter에 구현한 adapter를 할당 해 줌.
	container_main.adapter = adapter
    
    //리싸이클러뷰 클릭 리스너 구현 
	adapter.setItemClickListener(object  : MainViewAdapter.ItemClickListener{
	val contexts = applicationContext

	override fun onClick(view: View, position: Int) {
	Log.d("SSS", "${position}번 리스트 선택")
	screenChagne(position)
		}
	})
	
    //리싸이클러뷰 구현, 이곳에서 레이아웃만 변경해주면 다양한 레이아웃 구현가능.
	container_main.setHasFixedSize(true)
	container_main.layoutManager = GridLayoutManager(this,1, RecyclerView.VERTICAL,false)
}