メモ > 技術 > 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/