아래와같은 리스트형태의 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. 실행하면 아래와 같이 실행된다.