세상을 바꾸는 개발자

[Android, Room, Coroutinnes, DataBinding, LiveData, ViewModel ] 안드로이드 JetPack과 MVVM 패턴 사용해보기(5 - 4 : 리사이클러뷰를 이용해 리스트 보여주기) 본문

안드로이드/Kotlin

[Android, Room, Coroutinnes, DataBinding, LiveData, ViewModel ] 안드로이드 JetPack과 MVVM 패턴 사용해보기(5 - 4 : 리사이클러뷰를 이용해 리스트 보여주기)

헬창코딩 2021. 6. 18. 22:25

안녕하세요 헬창코딩입니다.

 

이번에는 4번째 시간으로 이전 시간에 더해서 추가한 데이터를 리사이클 러뷰를 통해 사용자에게 보여주도록 하겠습니다.

 

 

1.  가장먼저 리사이클러뷰 XML 레이아웃을 만들어보겠습니다.

    1.1  item_user_list.xml 파일을 생성합니다. 

    1.2  item_user_list 안에  저장된 이름과 이메일을 보여줄 텍스트뷰를 생성합니다.

 

Item_user_list.xml

 

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?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="vertical">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginHorizontal="20dp"
        android:layout_marginVertical="10dp"
        android:background="#2196F3"
        android:elevation="10dp"
        android:orientation="vertical"
        android:padding="10dp"
 
        >
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:orientation="horizontal">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:text="이름 : "
                android:textColor="#FFFFFF"
                android:textSize="13dp"
                android:textStyle="bold" />
 
            <TextView
                android:id="@+id/name_text_view"
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_marginLeft="10dp"
                android:text=""
                android:textColor="#FFFFFF"
                android:textSize="15dp"
                android:textStyle="bold" />
 
        </LinearLayout>
 
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:text="이메일 : "
                android:textColor="#ffffff"
                android:textSize="13dp"
                android:textStyle="bold" />
 
            <TextView
                android:id="@+id/email_text_view"
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_marginLeft="10dp"
                android:text=""
                android:textColor="#FFFFFF"
                android:textSize="15dp"
                android:textStyle="bold" />
 
        </LinearLayout>
 
 
    </LinearLayout>
 
 
</LinearLayout>
 
 cs

 

2.  item_user_list.xml 을 데이터바인딩 할 수 있도록 수정합니다.

Item_user_list.xml

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
 
    <LinearLayout
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_width="match_parent">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_marginHorizontal="20dp"
            android:layout_marginVertical="10dp"
            android:background="#2196F3"
            android:elevation="10dp"
            android:orientation="vertical"
            android:padding="10dp"
 
            >
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:orientation="horizontal">
 
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="20dp"
                    android:text="이름 : "
                    android:textColor="#FFFFFF"
                    android:textSize="13dp"
                    android:textStyle="bold" />
 
                <TextView
                    android:id="@+id/name_text_view"
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:layout_marginLeft="10dp"
                    android:text=""
                    android:textColor="#FFFFFF"
                    android:textSize="15dp"
                    android:textStyle="bold" />
 
            </LinearLayout>
 
 
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_marginTop="10dp"
                android:orientation="horizontal">
 
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="20dp"
                    android:text="이메일 : "
                    android:textColor="#ffffff"
                    android:textSize="13dp"
                    android:textStyle="bold" />
 
                <TextView
                    android:id="@+id/email_text_view"
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:layout_marginLeft="10dp"
                    android:text=""
                    android:textColor="#FFFFFF"
                    android:textSize="15dp"
                    android:textStyle="bold" />
 
            </LinearLayout>
 
 
        </LinearLayout>
 
 
    </LinearLayout>
</layout>
 cs

 

 

3. 다음으로 리사이클러뷰 어뎁터( UserListRecyclerViewAdapter. kt )를 생성합니다.

     3.1  어뎁터 안에 뷰홀더(UserListViewHolder) 만들고 item_user_list.xml 과 바인딩 합니다. 

     3.2  어뎁터 메소드안에 3개의 메소드를 implement 합니다.  (onCreateViewHolder, onBindViewHolder, getItemCount)

   

UserListRecyclerViewAdapter.kr

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
class UserListRecyclerViewAdapter(private val usersList: List<User>) :
    RecyclerView.Adapter<UserListViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserListViewHolder {
        val layoutInflater = LayoutInflater.from(parent.context)
        val binding: ItemUserListBinding =
            DataBindingUtil.inflate(layoutInflater, R.layout.item_user_list, parent, false)
        return UserListViewHolder(binding)
    }
 
    override fun onBindViewHolder(holder: UserListViewHolder, position: Int) {
        holder.bind(usersList[position])
    }
 
    override fun getItemCount(): Int {
        return usersList.size
    }
}
 
 
class UserListViewHolder(val binding: ItemUserListBinding) : RecyclerView.ViewHolder(binding.root) {
 
    fun bind(user: User) {
        binding.nameTextView.text = user.name
        binding.emailTextView.text = user.email
    }
 
}
 cs

 

4. MainActivity 에서 리사이클러뷰를 생성합니다. 

MainActivity.kr

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
class MainActivity : AppCompatActivity() {
 
    private lateinit var binding: ActivityMainBinding
    private lateinit var userViewModel: UserViewModel
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
 
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        val dao: UserDAO = UserDatabase.getInstance(application).userDAO
        val repository = UserRepository(dao)
        val factory = UserViewModelFactory(repository)
        userViewModel = ViewModelProvider(this, factory).get(UserViewModel::class.java)
        binding.myViewModel = userViewModel
        binding.lifecycleOwner = this
 
        initRecyclerview()
 
    }
 
    private fun initRecyclerview(){
        binding.userRecyclerView.layoutManager = LinearLayoutManager(this)
        displayUserList()
 
    }
 
 
    private fun displayUserList() {
        userViewModel.users.observe(this, Observer {
            Log.d("healcang_Tag", it.toString())
            binding.userRecyclerView.adapter = UserListRecyclerViewAdapter(it)
        })
    }
}
 
 cs

 

 

결과화면

 

추가 및 전체삭제가 잘 되는 것을 확인할 수 있습니다. ~

다음 시간에는 하나씩 삭제 및 데이터 업데이트를 해보겠습니다. 

수고하셨습니다~

'안드로이드 > Kotlin' 카테고리의 다른 글

[Android Kotlin] 코틀린 날짜 구하기  (1) 2021.09.15
[Android Kotlin] 둥둥떠다니는 최상위 뷰(FloatingView) 만들기  (4) 2021.06.18
[Android, Room, Coroutinnes, DataBinding, LiveData, ViewModel ] 안드로이드 JetPack과 MVVM 패턴 사용해보기(5 - 3 : ViewModel을 만들어서 CRUD 해보기)  (1) 2021.06.18
[Android, Room, Coroutinnes, DataBinding, LiveData, ViewModel ] 안드로이드 JetPack과 MVVM 패턴 사용해보기(5 - 2 : 룸 라이브러리로 데이터베이스 만들기)  (2) 2021.06.18
[Android, Room, Coroutinnes, DataBinding, LiveData, ViewModel ] 안드로이드 JetPack과 MVVM 패턴 사용해보기(5 - 1 : 라이브러리 세팅하기)  (2) 2021.06.18
'안드로이드/Kotlin' Related Articles more
Comments