안녕하세요, 반갑습니다!
모바일 앱 개발을 시작하고 가장 신경써야할 기능이 있다면 바로 이 기능이지 않을까 싶습니다.
많은 데이터를 각 항목으로 만들어 직관적으로 사용자에게 보여줍니다.
항목들 별로 이벤트를 줄 수도 있구요.
기존에는 ListView 를 사용했지만 조금 더 향상된 기능의 View가 나왔습니다.
어떻게 만들고 이벤트를 어떻게 처리할 수 있는지 그 방법을 소개합니다!
리싸이클러뷰(RecyclerView)
한방에 끝내기
>1. RecyclerView 와 CardView 라이브러리 설치
먼저 아래와 같이 RecyclerView 라이브러리를 설치해줍니다.
설치가 안되어 있다면 오른 쪽에 보시면 다운로드 버튼이 있는데요.
순서대로 눌러 주셔서 다운로드 및 설치해주시면 됩니다.
(CardView도 설치해서 입체감 있는 리스트를 만들 수 있습니다.)
2. 액티비티.xml 파일에 RecyclerView 만들기
먼저 리스트를 보여줄.xml 파일에 아래와 같이 RecyclerView 를 추가해줍니다.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="@layout/list_item" />
tools:listitem="@layout/recycler_view_item_layout.xml" 을 설정해주면,
Design 뷰에서 리스트를 미리 볼 수 있습니다.
하지만 아직 이 모양은 안나올거에요.
RecyclerView 에 사용될 각 항목, 즉 아이템 레이아웃을 만들어야 하기 때문입니다.
이제 그 아이템 레이아웃을 만들어 봅시다.
3. RecyclerView 에 사용될 아이템 레이아웃 만들기
RecyclerView 에 사용될 아이템 레이아웃입니다.
실제 내용은 <LinearLayout></LinearLayout> 사이에 있지만, 저는 CardView로 감쌌습니다.
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="120dp"
app:cardUseCompatPadding="true"
app:cardCornerRadius="10dp"
app:cardElevation="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
.
.
.
</LinearLayout>
</androidx.cardview.widget.CardView>
CardView를 쓰면 요렇게 입체감을 줄 수 있습니다.
아, 그리고 CardView 는 단 하나의 레이아웃만을 가질 수 있습니다.
그러니까 아이템 전체를 CardView 로 만들려면 위 소스처럼 <LinearLayout>...</LinearLayout> 으로 모든 내용을 감싸야 합니다.
4. RecyclerView 의 Adpater 클래스 만들기
기존 ListView와 마찬가지로 RecyclerView 역시 이 Adapter class가 List에 대한 모든 것을 관리합니다.
일단 클래스를 아래와 같이 만들어 주세요.
class RecyclerVewAdpater : RecyclerView.Adapter<RecyclerVewAdpater.ViewHolder>() {
.
.
.
}
위 처럼 코딩을 해주시면 RecyclerView.Adpater<RecyclerView.ViewHolder> 를 상속했을 때 빨간줄이 나타납니다.
ViewHolder는 빨간색 글씨가 되구요.
걱정하지마세요. 아직 필요한 Method 를 구현하지 않았기 때문이니까요.
RecyclerView 의 implement Method를 추가해줍니다.
그리고 빨간색 글씨가 된 ViewHolder 는 아래와 같이 내부클래스를 만들어 주세요.
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun setItems(item: RecyclerViewData) {
//item 으로 데이터를 가져와 View에 Setting 할 수 있습니다.
}
}
이제 RecyclerView 의 implement Method 를 작성해보겠습니다.
첫 번째로 작성할 onCreateViewHolder() 는 list_item.xml 을 View객체로 만드는 역할을 합니다.
이제 아이템 레이아웃.xml 이 View로써 사용됩니다.
이 Method는 ViewHolder 객체가 생성되거나 재사용될 때 자동으로 호출됩니다.
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int)
: RecyclerVewAdpater.ViewHolder {
//아이템 레이아웃을 객체화
var v:View
v = LayoutInflater.from(parent.context).inflate(R.layout.list_item, parent, false)
return ViewHolder(v)
}
두 번째로 작성할 getItemCount() 에는 데이터의 총 크기를 알려줘야합니다.
Adpater 가 관리할 Item의 개수이기 때문이죠.
이 Method 가 그 개수를 반환합니다.
override fun getItemCount(): Int = list.size
세 번째 Method인 onBindViewHolder()는 어쩌면 제일 중요한 부분이 될 수도 있겠네요.
사용자에게 보여지는 부분을 책임지는 Method 이기 때문입니다.
각 아이템 뷰에 데이터를 Setting 하는 부분인데요.
아래와 같이 작성해주세요.
override fun onBindViewHolder(holder: RecyclerVewAdpater.ViewHolder, position: Int) {
var item = list[position]
holder.apply {
setItems(item)
}
}
코틀린의 apply() 는 객체의 상태 등을 변경할때 사용할 수 있는 함수인데요.
이를 이용해서 ViewHolder 의 setItems() 에 데이터를 전달, View들에 Setting 해 줍니다.
5. RecyclerView 의 데이터 클래스 만들기
Adapter는 이 Class에서 선언한 변수들로 Data를 가져와 쓸 수 있습니다.
자바에서는 getter/setter 를 만들고 이용했습니다만, 코틀린은 굳이 만들 필요가 없습니다.
아래와 같이 선언해주는 것만으로도 getter/setter 기능을 하기 때문이죠.
그냥 변수만 가져다 쓰면 됩니다.
open class RecyclerViewData (
var movieOpenDate:String,
var movieCover:Int,
var movieTitle:String
)
6. 액티비티에서 RecyclerView 호출하기
RecyclerView를 보여줄 액티비티입니다.
① 위에서 만든 데이터 클래스를 담을 List를 만들어 줍니다.
저는 단순히 이미지들만 있는 list 로만 만들었지만, 이미지가 아닌 데이터 클래스를 담을 수도 있겠죠?
② RecyclerAdapter 클래스를 객체로 만들고 with() 함수를 이용해서 데이터를 adpater에 반영해줍니다.
③ 기존 ListView 와 RecyclerView의 가장 큰 차이점이라고 한다면 각 항목들을 어떻게 배치해서 보여줄 것인지를 결정할 수 있다는 것입니다.
세로로만 나열할 수 있던 ListView에 반해 가로 뿐만아니라 격자모양으로도 배치할 수 있습니다.
LayoutManager() 를 통해 RecyclerView에 적용해 줄 수 있습니다.
④ 데이터가 변경되면 자동으로 RecyclerView 를 새로고침 합니다.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
① val img:List<Int>
= listOf(R.drawable.bando, R.drawable.johnwick, R.drawable.alive, R.drawable.steel_rain)
② val adapter = RecyclerVewAdpater()
with(adapter) {
addItem(RecyclerViewData("2020-07-15", img[0], "반도"))
addItem(RecyclerViewData("2020-07-29", img[1],"존윅"))
addItem(RecyclerViewData("2020-06-24", img[2],"살아있다"))
addItem(RecyclerViewData("2020-07-29", img[3],"강철비2"))
}
③ var layout = LinearLayoutManager(this)
recyclerView.layoutManager = layout
recyclerView.adapter = adapter
④ adapter.notifyDataSetChanged()
}
잘 나오나요?
축하합니다!
코틀린으로 RecyclerView 를 만들었습니다!
이제 더욱 멋진 앱을 만들 수 있게 됐습니다.
감사합니다.