아래와같은 리스트형태의 RecyclerView를 만들어보는 것이다.



1. 라이브러리를 추가한다.


2. activity_main.xml 에 recyclerview를 전체크기로 디자인한다.


3. item_layout.xml을 생성하여 디자인해준다.


4. item_layout.xml 디자인을 완성해준다.


5. MainActivity.kt 작성해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        recyclerView.adapter = MainRecyclerviewAdapter()
        recyclerView.layoutManager = LinearLayoutManager(this)
    }
 
    class MainRecyclerviewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>(){
 
        // 데이터 디자인을 가져오는 메서드
        override fun onCreateViewHolder(p0: ViewGroup, p1: Int): RecyclerView.ViewHolder {
            var view = LayoutInflater.from(p0.context).inflate(R.layout.item_layout,p0,false)
 
            return CustomViewHolder(view)
        }
 
        class CustomViewHolder(view: View?) : RecyclerView.ViewHolder(view!!) {
 
            var imageView : ImageView? = null
            var textView : TextView? = null
            var textView2 : TextView? = null
 
        }
 
        // 데이터를 바인딩하는 메서드
        override fun onBindViewHolder(p0: RecyclerView.ViewHolder, p1: Int) {
 
        }
 
        // 데이터의 갯수를 가져오는 메서드
        override fun getItemCount(): Int {
            return 5
        }
 
    }
}
cs


6. 실행한 결과 아래처럼 실행된다.


7. 이미지를 넣기 위해서 Drawable폴더에 이미지를 넣어준다.


8. MainActivity.kt 에서 소스를 작성해준다.(노란색부분)

1
2
3
4
5
6
7
8
9
10
11
    class MainRecyclerviewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>(){
 
        // 이미지 배열
        var images = arrayOf(R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5,
            R.drawable.img6,R.drawable.img7,R.drawable.img8,R.drawable.img9,R.drawable.img10,R.drawable.img11)
 
        // 타이틀 배열
        var titles = arrayOf("이미지1","이미지2","이미지3","이미지4","이미지5","이미지6","이미지7","이미지8","이미지9","이미지10","이미지11")
 
        // 보조타이틀 배열
        var countries = arrayOf("그림1","그림2","그림3","그림4","그림5","그림6","그림7","그림8","그림9","그림10","그림11")
cs


9. MainActivity.kt 에서 소스를 작성해준다.(노란색부분)

1
2
3
4
5
6
7
8
9
10
11
12
13
        class CustomViewHolder(view: View?) : RecyclerView.ViewHolder(view!!) {
 
            var imageView : ImageView? = null
            var textView : TextView? = null
            var textView2 : TextView? = null
 
            init {
                imageView = view!!.findViewById(R.id.profile_imageview)
                textView = view.findViewById(R.id.title_textview)
                textView2 = view.findViewById(R.id.countries_textview)
            }
 
        }
cs


10. MainActivity.kr 에서소스를 작성해준다.(노란색부분)

1
2
3
4
5
6
7
8
9
10
11
12
        // 데이터를 바인딩하는 메서드
        override fun onBindViewHolder(p0: RecyclerView.ViewHolder, p1: Int) {
            var view = p0 as CustomViewHolder
            view.imageView!!.setImageResource(images[p1])
            view.textView!!.text = titles[p1]
            view.textView2!!.text = countries[p1]
        }
 
        // 데이터의 갯수를 가져오는 메서드
        override fun getItemCount(): Int {
            return images.size
        }
cs


11. 실행하면 아래와 같이 실행된다.


+ Recent posts