소개

DreamHanks의 MOON입니다.

전회는 화면을 천이시키는 방법과 천이시키는 경우, 값도 보내는 방법에 대해 설명했습니다.
3. 【Android/Kotlin】 화면 천이

이번에는 「리스트 뷰」라고 하는 View에 대해 설명해 갑니다.

ListView란?

ListView는 스크롤 가능한 항목을 나타낼 때 사용되는 뷰 그룹입니다.

목록보기를 사용하려면 다음 항목이 필요합니다.
· 데이터 클래스
・xml에 리스트 뷰
・아이템 작성
· 어댑터 작성
· 어댑터 설정

ListView 추가

xml 생성 및 ListView 추가

xml을 생성하고 목록 뷰를 추가합니다.


activity_listview.xml

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout 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"    
    android:orientation="vertical"  
    tools:context=".ListViewActivity"   
    android:gravity="center">   

    <ListView   
        android:id="@+id/list_view" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"    
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintLeft_toLeftOf="parent" 
        app:layout_constraintRight_toRightOf="parent"   
        app:layout_constraintTop_toTopOf="parent">  
    </ListView> 

</LinearLayout> 

데이터 클래스 추가

데이터 클래스 추가 (테스트하기 위해 사용자 (이름, 메일) 클래스)


User.kt

package com.example.practiceapplication 

class User (val name: String, val email: String)    

항목 xml 추가

리스트 뷰에 표시되는 아이템의 xml 추가


item_user.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/firstLin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="#ffffff"
            android:padding="10dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/imageIcon"
                    android:layout_width="52dp"
                    android:layout_height="52dp"
                    android:layout_margin="10dp"
                    android:src="@mipmap/ic_launcher" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:layout_toRightOf="@+id/imageIcon"
                    android:orientation="vertical">


                    <TextView
                        android:id="@+id/name_tv"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="14sp"
                        android:text="佐藤" />

                    <TextView
                        android:id="@+id/email_tv"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="12sp"
                        android:text="[email protected]"/>
                </LinearLayout>

            </RelativeLayout>



        </RelativeLayout>

</LinearLayout>

어댑터 추가

리스트 뷰와 데이터 아이템 간의 연결을 위해 어댑터 추가

ListAdapter.kt

package com.example.practiceapplication

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.TextView

class ListAdapter (val context: Context, val UserList: ArrayList<User>) : BaseAdapter() {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val view: View = LayoutInflater.from(context).inflate(R.layout.item_user, null)
        val Name = view.findViewById<TextView>(R.id.name_tv)
        val Email = view.findViewById<TextView>(R.id.email_tv)

        val user = UserList[position]

        Name.text = user.name
        Email.text = user.email

        return view
    }

    override fun getItem(position: Int): Any {
        return UserList[position]
    }

    override fun getItemId(position: Int): Long {
        return 0
    }

    override fun getCount(): Int {
        return UserList.size
    }
}

활동 설정

Activity에 리스트 뷰와 어댑터를 작성 및 설정

ListViewActivity.kt

package com.example.practiceapplication

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.*
import kotlinx.android.synthetic.main.activity_listview.*
import javax.xml.validation.Validator

class ListViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_listview)

        //ユーザーリストでデーターを追加
        var UserList = arrayListOf<User>(
            User("佐藤","[email protected]"),
            User("鈴木","[email protected]"),
            User("高橋","[email protected]"),
            User("伊藤","[email protected]"),
            User("渡辺","[email protected]"),
            User("山本","[email protected]"),
            User("中村","[email protected]"),
            User("小林","[email protected]"),
            User("加藤","[email protected]")
        )

        var list_view = findViewById<ListView>(R.id.list_view)
        //アダプターにユーザーリストを導入
        val Adapter = ListAdapter(this, UserList)
        //リストビューにアダプターを設定
        list_view.adapter = Adapter
    }
}

· 사용자 목록을 만들고 데이터를 목록에 추가합니다.
・어댑터에 그 리스트를 설정합니다.
・리스트 뷰에 설정되어 있는 어댑터를 설정합니다.

앱 시작

끝에

이번에는 「리스트 뷰」라는 View에 대해 설명했습니다.

다음번에는 「다이얼로그」에 대해 설명하겠습니다.
5. 【Android/Kotlin】 다이얼로그(Dialog)

최신 내용은 아래 링크(DreamHanks의 블로그)에서 확인할 수 있습니다.
DreamHanks 블로그(Android/Kotlin 앱 개발)