refirio.org

Memo

メモ > 技術 > IDE: AndroidStudio > アプリの作成（XMLレイアウト / リスト表示）
■アプリの作成（XMLレイアウト / リスト表示）
■ListViewで一覧を表示

以下で新規にプロジェクトを作成

プロジェクトの選択: Empty Activity
プロジェクトの名前: listview

ビューバインディングを使えるようにする
build.gradle を変更したら「Sync Now」をクリック

ビューにListViewを配置する
activity_main.xml を開き、最初から表示されているTextViewを削除し、
「Legacy」内の「ListView」をドラッグ＆ドロップで中央に配置する
上下左右を画面の端に接続し、マージンは0にする
また、以下の設定を行う

id: timezonesView
layout_width: match_parent
layout_height: match_parent

リスト用のレイアウトを作成する
プロジェクトウインドウのツリーで「app → res → layout」を右クリックし、
「New → Layout resource file」を選択する
「New Resource File」ダイアログが開くので、「File name」に「list_timezone_cell」と入力して「OK」をクリックする
作成された list_timezone_cell.xml を開き、
「Text」内の「TextView」をドラッグ＆ドロップで中央に配置する
上下左右を画面の端に接続し、マージンは8にする
また、以下の設定を行う

id: timezoneView
layout_width: wrap_content
layout_height: wrap_content

さらに、アクティビティを以下のように変更

MainActivity.kt
package org.refirio.listview

import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import org.refirio.listview.databinding.ActivityMainBinding
import java.util.*

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)

        // リストに表示するタイムゾーン
        val timeZones = TimeZone.getAvailableIDs()
        //val timeZones = listOf("タイムゾーン1", "タイムゾーン2", "タイムゾーン3")

        // アダプタを作成
        val adapter = ArrayAdapter<String>(
            this,
            R.layout.list_timezone_cell,
            R.id.timezonesView,
            timeZones
        )

        // リストにアダプタをセット
        binding.timezonesView.adapter = adapter

        // リストのアイテムタップ時の動作
        binding.timezonesView.setOnItemClickListener { parent, view, position, id ->
            // アダプタから、タップされた位置のタイムゾーンを得る
            val timeZone = adapter.getItem(position)

            // Toastで表示
            Toast.makeText(applicationContext, timeZone, Toast.LENGTH_SHORT).show();
        }

    }
}
■RecyclerViewで一覧を表示

以下で新規にプロジェクトを作成

プロジェクトの選択: Empty Activity
プロジェクトの名前: recyclerview

ビューバインディングを使えるようにする
build.gradle を変更したら「Sync Now」をクリック

ビューにRecyclerViewを配置する
activity_main.xml を開き、最初から表示されているTextViewを削除し、
「Containers」内の「RecyclerView」をドラッグ＆ドロップで中央に配置する
上下左右を画面の端に接続し、マージンは0にする
また、以下の設定を行う

id: timezonesView
layout_width: match_parent
layout_height: match_parent

リスト用のレイアウトを作成する
プロジェクトウインドウのツリーで「app → res → layout」を右クリックし、
「New → Layout resource file」を選択する
「New Resource File」ダイアログが開くので、「File name」に「list_timezone_cell」と入力して「OK」をクリックする
作成された list_timezone_cell.xml を開き、
「Text」内の「TextView」をドラッグ＆ドロップで中央に配置する
上下左右を画面の端に接続し、マージンは8にする
また、以下の設定を行う

id: timezoneView
layout_width: match_constraint
layout_height: wrap_content

親のConstraintLayoutに以下の設定を行う

layout_width: match_parent
layout_height: wrap_content

リスト用のアダプタを作成する
プロジェクトウインドウのツリーで「app → java → org.refirio.recyclerview」を右クリックし、
「New → Kotlin Class/File」を選択する
「New Kotlin Class/File」ダイアログが開くので、「File name」に「TimezoneAcapter」と入力してEnterを入力する
作成された TimezoneAcapter を開き、以下を入力する

package org.refirio.recyclerview

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class TimezoneAdapter(
    context: Context,
    private val timeZones: Array<String>,
    private val onItemClicked: (String) -> Unit
) : RecyclerView.Adapter<TimezoneAdapter.TimezoneViewHolder>() {
    // レイアウトからViewを生成するInflater
    private val inflater = LayoutInflater.from(context)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TimezoneViewHolder {

        // Viewを生成する
        val view = inflater.inflate(R.layout.list_timezone_cell, parent, false)

        // ViewHolderを作る
        val viewHolder = TimezoneViewHolder(view)

        // Viewをタップしたときの処理
        view.setOnClickListener {
            // アダプター上の家を得る
            val position = viewHolder.adapterPosition

            // 位置に応じたデータを得る
            val timeZone = timeZones[position]

            // コールバックを呼び出す
            onItemClicked(timeZone)
        }

        return viewHolder
    }

    override fun getItemCount() = timeZones.size

    override fun onBindViewHolder(holder: TimezoneViewHolder, position: Int) {
        // 位置に応じたデータを得る
        val timeZone = timeZones[position]

        // 表示内容を更新する
        holder.timezone.text = timeZone
    }

    // Viewへの参照を持っておくViewHolder
    class TimezoneViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val timezone = view.findViewById<TextView>(R.id.timezoneView)
    }

}


さらに、MainActivity を以下のように変更

package org.refirio.recyclerview

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import org.refirio.recyclerview.databinding.ActivityMainBinding
import java.util.*

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)

        // リストに表示するタイムゾーン
        val timeZones = TimeZone.getAvailableIDs()
        //val timeZones = arrayOf("タイムゾーン1", "タイムゾーン2", "タイムゾーン3")

        // アダプタを作成
        val adapter = TimezoneAdapter(this, timeZones) {
            timeZone ->
            // Toastで表示
            Toast.makeText(this, timeZone, Toast.LENGTH_SHORT).show();
        }

        // リストにアダプタをセット
        binding.timezonesView.adapter = adapter

        // 縦に直線的に表示するレイアウトマネージャをセット
        binding.timezonesView.layoutManager = LinearLayoutManager(
            this,
            LinearLayoutManager.VERTICAL,
            false
        )

    }
}
■RecyclerViewを並び替え

【Android】簡潔に RecyclerView を使う。 - 山崎屋の技術メモ
https://www.shookuro.com/entry/android-recycler-view

【Android】イメージを含んだリッチな行を持つ RecyclerView - 山崎屋の技術メモ
https://www.shookuro.com/entry/2021/02/11/145746

【Android】RecyclerView、行をドラッグして並び替え - 山崎屋の技術メモ
https://www.shookuro.com/entry/recycler-view3

【Android】RecyclerView つまみ（ハンドル）をドラッグして並び替え - 山崎屋の技術メモ
https://www.shookuro.com/entry/recycler-view4

Kotlin beginner: kotlin リストをドラッグして並べ替え（ItemTouchHelper）
https://cony-kotlin.blogspot.com/2020/10/kotlin-recyclerviewitemtouchhelper.html

RecyclerView の使い方。ドラッグ&ドロップで並び替え、スワイプで削除する。【Android】
https://negichou.com/recyclerview-and-itemtouchhelper-sample/
Memo

Advertisement
