일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Android DataBinding
- Android Interceptor
- Android Jetpack
- 안드로이드
- Android ViewPager2
- Kotlin
- 안드로이드 갤러리 접근
- Android Navigation
- Kotlin FCM
- Android ProgressBar
- android recyclerview
- WebView
- 알고리즘 자바
- OkHttp Interceptor
- 영어공부
- 습관만들기
- 안드로이드 fcm
- 66챌린지
- 영어독립365
- 카카오 알고리즘
- MVP Architecture
- Android WebView
- 안드로이드 카카오 로그인
- Java
- Android
- DataBinding
- Android 12 대응
- 프로그래머스 알고리즘
- Android 12
- scope function
- Today
- Total
Developer Geek
Android(Kotlin) RecyclerView Example 본문
RecyclerView & RecyclerView Adapter Example
축구 선수의 이름, 포지션 그리고 번호를 입력 받아서 “저장하기” 버튼을 눌렀을 때, 선수의 정보를 RecyclerView를 통해 나타내는 예제입니다.
참고). ListAdapter를 통해 RecyclerView 구현을 참고하실 분은 "안드로이드 RecyclerView.ListAdapter 예제 in Kotlin" 에서 확인하실 수 있습니다.
실행화면
완전한 전체 코드는 github.com/JuhyeokLee97 에서 확인하실 수 있습니다.
MainActivity Layout: activity_main.xml 작성
축구 선수의 이름, 포지션 그리고 번호를 입력 받아서 “저장하기” 버튼을 눌렀을 때, RecyclerView에 정보가 보여지는 레이아웃입니다.
RecycerView 속성 중 “app:layoutManager”은 RecyclerView에서 아이템들을 어떤 형태로 보여줄 지 정보를 담는 중요한 속성입니다. 이번 예제에서는 “LinearLayoutManager”를 사용해 일렬로 나타내 보겠습니다.
<?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="match_parent"
tools:context=".MainActivity">
<LinearLayout android:id="@+id/ll_player_name"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="20dp"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Player\nName"
android:textSize="20dp" />
<EditText android:id="@+id/et_player_name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:hint="Messi" />
</LinearLayout>
<LinearLayout android:id="@+id/ll_player_position"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="20dp"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="@id/ll_player_name"
app:layout_constraintTop_toBottomOf="@id/ll_player_name">
<TextView android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Position"
android:textSize="20dp" />
<EditText android:id="@+id/et_player_position"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:hint="FW" />
</LinearLayout>
<LinearLayout android:id="@+id/ll_player_number"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="20dp"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="@id/ll_player_position"
app:layout_constraintTop_toBottomOf="@id/ll_player_position">
<TextView android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Player Number"
android:textSize="20dp" />
<EditText android:id="@+id/et_player_number"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:hint="10" />
</LinearLayout> <Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="20dp"
android:id="@+id/btn_add_player"
android:text="저장하기"
android:textStyle="bold"
android:textSize="20dp"
app:layout_constraintTop_toBottomOf="@id/ll_player_number"
/>
<androidx.recyclerview.widget.RecyclerView android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginHorizontal="20dp"
android:layout_marginBottom="60dp"
android:id="@+id/rv_player_info"
app:layout_constraintBottom_toBottomOf="parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toBottomOf="@id/btn_add_player"/>
</androidx.constraintlayout.widget.ConstraintLayout>
RecyclerView ItemLayout: item_view.xml 작성
“res/layout” 디렉토리에 “Layout Resource File”을 생성합니다. 파일 이름은 “item_view”로 했습니다.
하나의 줄에 선수의 이름, 포지션 그리고 번호를 보여주기 위해 LinearLayout 안에 3개의 TextView를 사용했습니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:id="@+id/tv_player_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="30dp" />
<TextView android:id="@+id/tv_player_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="30dp" />
<TextView android:id="@+id/tv_player_number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="30dp" />
</LinearLayout>
Init View: MainActivity 작성
“res/layout/activity_main.xml” 에서 만든 View들을 사용하기 위해 변수들을 초기화 합니다.
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
lateinit var etPlayerName: EditText
lateinit var etPlayerPosition: EditText
lateinit var etPlayerNumber: EditText
lateinit var btnAddPlayer: Button
lateinit var recyclerView: RecyclerView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Init View
etPlayerName = findViewById(R.id.et_player_name)
etPlayerPosition = findViewById(R.id.et_player_position)
etPlayerNumber = findViewById(R.id.et_player_number)
btnAddPlayer = findViewById(R.id.btn_add_player)
recyclerView = findViewById(R.id.rv_player_info)
}
}
SoccerPlayer.class
사용자에게 입력 받을 선수 이름, 포지션, 번호 데이터를 저장할 수 있는 SoccerPlayer.Class를 만듭니다.
MainActivity.kt와 같은 위치에 생성하면 됩니다.
class SoccerPlayer(_name: String, _position: String, _number: String) {
var name: String? = null
var position: String? = null
var number: String? = null
init{
name = _name
position = _position
number = _number
}
}
SoccerPlayer 저장
MainActivity.kt에 저장하기 버튼이 눌렸을 때, SoccerPlayer 객체를 playerList에 저장하도록 btnAddPlayer의 setOnClickListener를 정의해줍니다.
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
lateinit var etPlayerName: EditText
lateinit var etPlayerPosition: EditText
lateinit var etPlayerNumber: EditText
lateinit var btnAddPlayer: Button
lateinit var recyclerView: RecyclerView
// player List create
lateinit var playerList: ArrayList<SoccerPlayer>
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Init View
etPlayerName = findViewById(R.id.et_player_name)
etPlayerPosition = findViewById(R.id.et_player_position)
etPlayerNumber = findViewById(R.id.et_player_number)
btnAddPlayer = findViewById(R.id.btn_add_player)
recyclerView = findViewById(R.id.rv_player_info)
// Init PlayerList Item
playerList = ArrayList<SoccerPlayer>()
playerList.add(SoccerPlayer("Messi", "Forward", "10"))
// Button 클릭 시, 선수 정보 저장.
btnAddPlayer.setOnClickListener {
var name = etPlayerName.text.toString()
var position = etPlayerPosition.text.toString()
var number = etPlayerNumber.text.toString()
playerList.add(SoccerPlayer(name, position, number))
}
}
}
Adapter 생성
RecyclerView에 데이터를 연결해주기 위해서 Adapter를 생성(MainActivity.kt와 같은 위치)합니다. 연결해줄 데이터인 playerList를 인자로 받아서 ReclcyerView.Adpater 구현에 필요한 ViewHolder를 구현하고 override 함수인 onCreateViewHolder, onBindViewHolder, getItemCount를 구현합니다.
추가적으로 버튼이 눌렸을 때 입력 받을 선수데이터를 playerList에 삽입하고 RecyclerView에 데이터를 업데이트 해줄 addItem을 구현합니다.
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
class MyRecyclerViewAdapter(var playerList: ArrayList<SoccerPlayer>): RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder>() {
inner class MyViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){
var tvPlayerName: TextView = itemView.findViewById(R.id.tv_player_name)
var tvPlayerPosition: TextView = itemView.findViewById(R.id.tv_player_position)
var tvPlayerNumber: TextView = itemView.findViewById(R.id.tv_player_number)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
var itemView = LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false)
return MyViewHolder(itemView)
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
var player: SoccerPlayer = playerList.get(position)
holder.tvPlayerName.text = player.name
holder.tvPlayerPosition.text = player.position
holder.tvPlayerNumber.text = player.number
}
override fun getItemCount(): Int {
return playerList.size
}
fun addItem(player: SoccerPlayer){
playerList.add(player)
notifyDataSetChanged()
}
}
RecyclerView에 Adapter 연결하기
축구 선수 데이터를 갖는 playerList를 인자로 MyRecyclerViewAdapter()를 생성하여 recyclerView.adapter에 연결합니다.
그리고 저장하기 버튼의 setOnClickListener에서 playerList에 직접 데이터를 삽입하지 않고 adapter.addItem()을 이용해서 데이터를 삽입하고 recyclerView에 보여지도록 합니다.
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
lateinit var etPlayerName: EditText
lateinit var etPlayerPosition: EditText
lateinit var etPlayerNumber: EditText
lateinit var btnAddPlayer: Button
lateinit var recyclerView: RecyclerView
// player List create
lateinit var playerList: ArrayList<SoccerPlayer>
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Init View
etPlayerName = findViewById(R.id.et_player_name)
etPlayerPosition = findViewById(R.id.et_player_position)
etPlayerNumber = findViewById(R.id.et_player_number)
btnAddPlayer = findViewById(R.id.btn_add_player)
recyclerView = findViewById(R.id.rv_player_info)
// Init PlayerList Item
playerList = ArrayList<SoccerPlayer>()
playerList.add(SoccerPlayer("Messi", "Forward", "10"))
// Set RecyclerView Adapter
var adapter = MyRecyclerViewAdapter(playerList)
recyclerView.adapter = adapter
// Button 클릭 시, 선수 정보 저장.
btnAddPlayer.setOnClickListener {
var name = etPlayerName.text.toString()
var position = etPlayerPosition.text.toString()
var number = etPlayerNumber.text.toString()
adapter.addItem(SoccerPlayer(name, position, number))
}
}
}
RecyclerView Adaper 이해하기
추가적으로 ViewHolder와 각 함수들이 왜 필요한지를 제 생각을 담아 정리했습니다. 정답은 아니겠지만 이해하는데 참고하시면 도움이 될 것 같습니다.
'안드로이드' 카테고리의 다른 글
Android 키보드 생성 시, Bottom Navigation Hide (0) | 2021.10.28 |
---|---|
안드로이드 style.xml 사용 예제 (0) | 2021.10.19 |
안드로이드 문자열 리소스(strings.xml) 사용 예제 (0) | 2021.10.19 |
안드로이드 카카오 SDK V2 로그인 - part2(코드) (0) | 2021.09.27 |
안드로이드 카카오 SDK V2 로그인 - part1(프로젝트 셋업) (0) | 2021.09.27 |