ListViewのアイテム個々の背景や要素の高さなど、同じ共通設定から個別の設定に変更したい場合があります。itemの表示は動的に変わるのでそれに合わせて変更させます。
Android Studio
2021.2.1
2021.2.1
ListView convertView
例えば、特定の要素の背景だけ変えたい場合、adpterのViewHolderを使ったリサイクルを実行している箇所で、convertviewを使うと可能です。
![1x1.trans - [Android] ListView アイテム個々の背景、高さなどを変える](https://akira-watson.com/wp-content/themes/simplicity2/images/1x1.trans.gif "[Android] ListView アイテム個々の背景、高さなどを変える")
![as413 m6 - [Android] ListView アイテム個々の背景、高さなどを変える](https://akira-watson.com/wp-content/uploads/2017/01/as413_m6.jpg "[Android] ListView アイテム個々の背景、高さなどを変える")
特定のセル背景色を変更
getView()の中で要素セルの順番はpositionで何行目かわかります。
但しあまり重くならないようにしないと遅くなったりout of memoryになる可能性が増します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; // 最初だけ View を inflate して、それを再利用する if (convertView == null) { // activity_main.xml に list.xml を inflate して convertView とする convertView = inflater.inflate(itemLayoutId, parent, false); // ViewHolder を生成 holder = new ViewHolder(); holder.textView = convertView.findViewById(R.id.textView); holder.imageView = convertView.findViewById(R.id.imageView); convertView.setTag(holder); if(position==2){ // 背景色を変える convertView.setBackgroundColor(Color.rgb(127, 127, 255)); } } // holder を使って再利用 else { holder = (ViewHolder) convertView.getTag(); } // holder の imageView にセット holder.imageView.setImageResource(ids.get(position)); // 現在の position にあるファイル名リストを holder の textView にセット holder.textView.setText(titles.get(position)); return convertView; } |
これでpositionが２のところだけ背景色を変更できます。
セルの高さ・文字色の変更
更に、高さ、文字色等を変えたり、他のitemの背景色も変えていく設定はこのようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
if (convertView == null) { // activity_main.xml に list.xml を inflate して convertView とする convertView = inflater.inflate(itemLayoutId, parent, false); // ViewHolder を生成 holder = new ViewHolder(); holder.textView = convertView.findViewById(R.id.textView); holder.imageView = convertView.findViewById(R.id.imageView); convertView.setTag(holder); if(position==0){ // 背景色を変える convertView.setBackgroundColor(Color.rgb(255, 127, 255)); } else if(position==1){ // 背景色を変える convertView.setBackgroundColor(Color.rgb(255, 220, 127)); } else if(position==2){ // list.xml LinearLayoutでのレイアウト設定なので params = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, 500); // 高さを変える convertView.setLayoutParams(params); // 背景色を変える convertView.setBackgroundColor(Color.rgb(127, 127, 255)); // 文字色を変更 holder.textView.setTextColor(Color.rgb(0, 0, 255)); // 文字サイズを変える holder.textView.setTextSize(50.0f); // 画像サイズを変更 params = new LinearLayout.LayoutParams(500, 400); // marginの設定 (left, top, right, bottom params.setMargins(50,0,0,0); holder.imageView.setLayoutParams(params); } else if(position==3){ // 背景色を変える convertView.setBackgroundColor(Color.rgb(127, 255, 127)); } else { // 背景色を変える convertView.setBackgroundColor(Color.rgb(255, 255, 127)); } |
![as413 m7 - [Android] ListView アイテム個々の背景、高さなどを変える](https://akira-watson.com/wp-content/uploads/2017/01/as413_m7.jpg "[Android] ListView アイテム個々の背景、高さなどを変える")
サンプルコード
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
//package com.example.testlistviewlayout; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.BaseAdapter; import android.widget.ListView; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class MainActivity extends AppCompatActivity { private static final String[] names = { "Yuka", "Kurumi", "Tomoya", "Mai", "Miki", "Saya", "Toko", "Nagi", "Yuyu", "Yumiko", "Katakuriko" }; // ArrayListにコピーするためintからInteger型にしました // ArrayListのInteger型 private static final Integer[] photos = { R.drawable.yuka, R.drawable.kurumi, R.drawable.tomoya, R.drawable.mai, R.drawable.miki, R.drawable.saya, R.drawable.toko, R.drawable.nagi, R.drawable.yuyu, R.drawable.yumiko, R.drawable.katakuriko }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 配列をArrayListにコピー List<String> itemNames = new ArrayList<>(Arrays.asList(names)); List<Integer> itemImages = new ArrayList<>(Arrays.asList(photos)); // ListViewのインスタンスを生成 ListView listView = findViewById(R.id.list_view); // BaseAdapter を継承したadapterのインスタンスを生成 // レイアウトファイル list.xml を activity_main.xml に // inflate するためにadapterに引数として渡す BaseAdapter adapter = new ListViewAdapter(this.getApplicationContext(), R.layout.list, itemNames, itemImages); // ListViewにadapterをセット listView.setAdapter(adapter); } } |
ListViewAdapter.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
//package com.example.testlistviewlayout; import android.content.Context; import android.graphics.Color; import android.graphics.Typeface; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import java.util.List; public class ListViewAdapter extends BaseAdapter { static class ViewHolder { TextView textView; ImageView imageView; } private final LayoutInflater inflater; private final int itemLayoutId; private final List<String> titles; private final List<Integer> ids; ListViewAdapter(Context context, int itemLayoutId, List<String> itemNames, List<Integer> itemImages) { super(); this.inflater = (LayoutInflater) context.getSystemService( Context.LAYOUT_INFLATER_SERVICE); this.itemLayoutId = itemLayoutId; this.titles = itemNames; this.ids = itemImages; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; // 最初だけ View を inflate して、それを再利用する if (convertView == null) { // activity_main.xml に list.xml を inflate して convertView とする convertView = inflater.inflate(itemLayoutId, parent, false); // ViewHolder を生成 holder = new ViewHolder(); holder.textView = convertView.findViewById(R.id.textView); holder.imageView = convertView.findViewById(R.id.imageView); convertView.setTag(holder); // if(position==2){ // // 背景色を変える // convertView.setBackgroundColor(Color.rgb(127, 127, 255)); // } if(position==0){ // 背景色を変える convertView.setBackgroundColor(Color.rgb(255, 127, 255)); } else if(position==1){ // 背景色を変える convertView.setBackgroundColor(Color.rgb(255, 220, 127)); } else if(position==2){ // list.xml LinearLayoutでのレイアウト設定なので LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, 500); // 高さを変える convertView.setLayoutParams(params); // 背景色を変える convertView.setBackgroundColor(Color.rgb(127, 127, 255)); // 文字色を変更 holder.textView.setTextColor(Color.rgb(0, 0, 255)); // 文字サイズを変える holder.textView.setTextSize(50.0f); holder.textView.setTypeface(Typeface.SANS_SERIF, Typeface.BOLD_ITALIC); // 画像サイズを変更 params = new LinearLayout.LayoutParams(500, 400); // marginの設定 (left, top, right, bottom params.setMargins(50,0,0,0); holder.imageView.setLayoutParams(params); } else if(position==3){ // 背景色を変える convertView.setBackgroundColor(Color.rgb(127, 255, 127)); } else { // 背景色を変える convertView.setBackgroundColor(Color.rgb(255, 255, 127)); } } // holder を使って再利用 else { holder = (ViewHolder) convertView.getTag(); } // holder の imageView にセット holder.imageView.setImageResource(ids.get(position)); // 現在の position にあるファイル名リストを holder の textView にセット holder.textView.setText(titles.get(position)); return convertView; } @Override public int getCount() { // texts 配列の要素数 return titles.size(); } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } } |
レイアウト
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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:layout_height="match_parent" tools:context=".MainActivity"> <ListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
list.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imageView" android:scaleType="centerCrop" android:layout_margin="10dp" android:contentDescription="@string/description" android:layout_width="80dp" android:layout_height="80dp" /> <TextView android:id="@+id/textView" android:layout_margin="20dp" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:textColor="#000" /> </LinearLayout> |
strings.xml
|
1 2 3 4 |
<resources> <string name="app_name">Your App Name</string> <string name="description">picture</string> </resources> |
- ArrayAdapter
- ListView と ArrayAdapter 簡単なテキストリストの表示
- ArrayAdapterを使ってレイアウトをアレンジ
- ListActivity と ArrayAdapterで画像とテキストをリスト表示
- Basedapter
- BaseAdapterで画像とテキストをリスト表示
- ListViewリストをタップして画面遷移
- ListViewアイテムの移動、削除
- ListView アイテム個々の背景、高さなどを変える
