[Android] ListView 사용

ListView

 

ListView는 사용자가 정의한 데이터 목록을 아이템 단위로 구성하여 화면에 출력하는 ViewGroup의 한 종류입니다.

 

ListView의 아이템은 세로 방향으로 나열되고 아이템에 개수가 많아져 ListView의 크기를 넘어가게 되면

스크롤을 사용해 위치를 이동할 수 있습니다.

 

ListView는 사용자가 정의한 대로 단순히 Text만 출력할 수도 있고 Image, Button 등 여러 View를 조합하여 Customizing 할 수 있습니다.

 

ListView의 대표적인 사용 예로는 연락처가 있습니다.

 

먼저 ListView를 사용 하려면 데이터와 레이아웃을 이어주는 Adapter를 사용해야 합니다.

 

순서로는 layoutmain에서 listview가 표시 될 위치를 만들고

데이터를 정의한 뒤

Adapter를 생성 후 ListView에 지정을 합니다.

 

데이터가 들어 갈 레이아웃은 아래와 같이 만들고

<?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:background="#272727"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:textColor="#fff"
        android:id="@+id/txt_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <TextView
        android:textColor="#fff"
        android:id="@+id/txt_songname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@+id/txt_name"
        app:layout_constraintTop_toTopOf="@+id/txt_name" />

    <CheckBox
        android:id="@+id/ch_box"
        android:focusable="false"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/txt_songname"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

어댑터는 아래와 같이 구성하였습니다.

class Data(val profile: Int, val name: String,
           val song: String, var checked_box: Boolean)

class CustomAdapter(val context: Context, val DataList: ArrayList<Data>)
    : BaseAdapter() {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view: View = LayoutInflater.from(context).inflate(R.layout.custom_listview, null)
        val profile = view.findViewById<ImageView>(R.id.imageView)
        val name = view.findViewById<TextView>(R.id.txt_name)
        val songname = view.findViewById<TextView>(R.id.txt_songname)
        val data = DataList[position]
        val checkebox = view.findViewById<CheckBox>(R.id.ch_box)

        profile.setImageResource(data.profile)
        view.setBackgroundColor(Color.DKGRAY)
        name.text = data.name
        songname.text = data.song
        checkebox.isChecked = DataList[position].checked_box

        return view
    }

    override fun getItem(position: Int) = DataList[position]
    override fun getItemId(position: Int) = 0L
    override fun getCount() = DataList.size

}

 

이제 MainActivity에서

 

var DataList = arrayListOf(
        Data(R.drawable.ic_launcher_background, "0", "a", false),
        Data(R.drawable.ic_launcher_background, "1", "b", false),
        Data(R.drawable.ic_launcher_background, "2", "c", false),
        Data(R.drawable.ic_launcher_background, "3", "d", false),
        Data(R.drawable.ic_launcher_background, "4", "e", false),
        Data(R.drawable.ic_launcher_background, "5", "f", false),
        Data(R.drawable.ic_launcher_background, "6", "f", false),
        Data(R.drawable.ic_launcher_background, "7", "f", false),
        Data(R.drawable.ic_launcher_background, "8", "f", false),
        Data(R.drawable.ic_launcher_background, "9", "f", false),
        Data(R.drawable.ic_launcher_background, "10", "f", false),
        Data(R.drawable.ic_launcher_background, "11", "f", false),
        Data(R.drawable.ic_launcher_background, "12", "f", false),
        Data(R.drawable.ic_launcher_background, "13", "f", false)
)

데이터가 들어 갈 배열을 만들어주고

 

 

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root

        setContentView(view)
        binding.listView.choiceMode = ListView.CHOICE_MODE_MULTIPLE
        binding.listView.adapter = CustomAdapter(this, DataList)
    }
}

리스트뷰와 Adapter를 연결해주고 실행을 해 보면

 

스크롤이 되는 listview를 만들 수 있습니다.