1. 기능 구현

  1. 화면에 내가 만든 Custom 리스트뷰(ListView)를 만들기
  2. 각각의 리스트에 이벤트 발생 시, 토스트 메세지 띄우기

 
 

2. Android Studio에서 기본 프로젝트(with empty activity) 생성하자!

생성시 'Empty Activity'로 기본 생성

 
 

3. ViewBinding 사용을 위한 build.gradle 설정

  android {
          // 뷰 바인딩 옵션 활성화
          viewBinding {
              enabled = true
          }
      }

 
 

4. User.kt

여러 Component(profile, name, age, greet)로 구성된 리스트 모델 객체

// User.kt 파일을 프로젝트에 만들고 User class를 선언만 해놓자.
class User(val profile:Int, val name:String, val age:String, val greet:String)

 
 

5-1. Layout Resource File 생성 및 이미지 추가

  • res -> layout 우클릭
  • New -> Layout Resource File -> 이름을 "list_item_user"로 하고 -> OK

 
 

5-2. list_item_user.xml

미리 만들어 둔 리스트 모델 객체에 맞추어 다음과 같이 디자인이 되도록 화면을 구성해준다.
(ImageView 1개, TextView 3개)

<?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="wrap_content">

    <ImageView
        android:id="@+id/iv_profile"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/android_basic" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="15dp"
        android:text="겨울시인"
        android:textColor="#000000"
        app:layout_constraintStart_toEndOf="@+id/iv_profile"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_greet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="8dp"
        android:text="안녕하세요"
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="@+id/iv_profile"
        app:layout_constraintStart_toEndOf="@+id/iv_profile"
        app:layout_constraintTop_toBottomOf="@+id/tv_name" />

    <TextView
        android:id="@+id/tv_age"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="40"
        android:textColor="#000000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 
 

6. Custom Adaper Class 만들기

"UserAdapter" 이름을 가진 클래스 파일을 만든다

여기서 Adapter의 역할이란 ?

ListView에서는 여러 List를 쭉~ 보여줘야하는데 하나의 리스트에 있는 여러 Component 들을 Adapter를 통해 하나로 감싸고,
그 리스트를 어떤 View에 넣어 보여줘야 하는지를 정하는 가교 역할을 한다. 음.. 이걸로 이해가 되나??

클래스 첫번째 param으로 Context, 두번째 param으로 User 객체를 담은 ArrayList Type을 받는다.

상속 : BaseAdapter() 를 상속받고 이에 따라 기본적으로 4개의 함수를 implement 해야한다.

  1. getView(Int, View ViewGroup) : list_item_usr.xml의 view와 데이터 간의 연동이 이루어지는 가장 중요한 메소드
  2. getItem(Int) : 해당 위치의 Item을 반환하는 메소드
  3. getItemId(Int) : 해당 위치의 Item id를 반환하는 메소드
  4. getCount() : ListView의 전체 크기(리스트의 전체 갯수)를 반환하는 메소드
class UserAdapter (val context:Context, val UserList:ArrayList<User>):BaseAdapter()
{
    private var mBinding: ListItemUserBinding? = null
    private val binding get() = mBinding!!

    override fun getView(position: Int, covertView: View?, parent: ViewGroup?): View {      

        mBinding = ListItemUserBinding.inflate(LayoutInflater.from(context))

        val profile = binding.ivProfile
        val name = binding.tvName
        val age = binding.tvAge
        val greet = binding.tvGreet

        val user = UserList[position]

        profile.setImageResource(user.profile)
        name.text = user.name
        age.text = user.age
        greet.text = user.greet

        return mBinding!!.root
    }
    override fun getItem(position: Int): Any {
        return UserList[position]
    }
    override fun getCount(): Int {       
        return UserList.size
    }
    override fun getItemId(position: Int): Long {
        return 0
    }
}

 
 

7. MainActivity.kt

  • UserList 생성 : 만들어 둔 User class의 형태로 객체를 만들어 arrayListOf에 담아 기본 데이터로 설정.
  • Adapter 생성 : 상속받아 만들어 둔 Custom Adapter (UserAdapter) 생성 -> ListView의 Adapter로 설정.
  • ListView onItemClickListener : 각 List를 클릭 했을때의 이벤트 처리로 Toast 메세지 show()
class MainActivity : AppCompatActivity() {

    private var mBinding:ActivityMainBinding? = null
    private val binding get() = mBinding!!

    var UserList = arrayListOf<User>(
        User(R.drawable.android_basic, "겨울시인1", "40", "안녕하세요"),
        User(R.drawable.android_basic, "겨울시인2", "39", "안녕하세요"),
        User(R.drawable.android_basic, "겨울시인3", "38", "안녕하세요"),
        User(R.drawable.android_basic, "겨울시인4", "37", "안녕하세요"),
        User(R.drawable.android_basic, "겨울시인5", "36", "안녕하세요"),
        User(R.drawable.android_basic, "겨울시인6", "35", "안녕하세요"),
        User(R.drawable.android_basic, "겨울시인7", "34", "안녕하세요")
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val Adapter = UserAdapter(this, UserList)
        binding.listView.adapter = Adapter

        binding.listView.onItemClickListener = AdapterView.OnItemClickListener {
            parent,
            view,
            position,
            id -> val selectItem = parent.getItemAtPosition(position) as User
            Toast.makeText(this, selectItem.name, Toast.LENGTH_SHORT).show()
        }
    }
}

 
 

8. 실행결과

UserList의 데이터를 활용한 ListView 가 잘 보여지고 각 List를 클릭 했을때
User name 이 Toast 메세지로 보여진다.

ex) 4번째 User (겨울시인4) 클릭

 
 

Reference

유튜버 홍드로이드님의 안드로이드 코틀린 앱 만들기 #5

+ Recent posts