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/

Advertisement