Symfoware

Symfowareについての考察blog

Android ListViewにリソースとして追加した画像を表示する

この続きです。
Android ListViewを使用してリストを表示する

ListViewに画像を表示してみます。
こちらを参考にしました。
Androidでリストビュー(ListView)をカスタムして表示する



レイアウトファイル



メインのレイアウトファイルはこうなりました。

・activity_main.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical">
  7.     <ListView
  8.         android:id="@+id/listView1"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"></ListView>
  11. </LinearLayout>




768_01.png



リスト1行分の定義です。

・list_layout.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="horizontal"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <ImageView
  7.         android:id="@+id/thumbnail"
  8.         android:layout_width="70dp"
  9.         android:layout_height="70dp"/>
  10.     <TextView
  11.         android:id="@+id/title"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="70dp"
  14.         android:padding="5dp"
  15.         android:gravity="center_vertical"
  16.         android:text="Title"
  17.         android:textSize="24sp"
  18.         />
  19. </LinearLayout>




768_02.png




1行分のデータ定義とアダプター



一行分のデータを保持するオブジェクトはListRow.javaとしました。

・ListRow.java


  1. import android.graphics.Bitmap;
  2. public class ListRow {
  3.     private Bitmap mThumbnail = null;
  4.     private String mTitle;
  5.     public ListRow(Bitmap thumbnail, String title) {
  6.         this.mThumbnail = thumbnail;
  7.         this.mTitle = title;
  8.     }
  9.     public String getTitle(){
  10.         return mTitle;
  11.     }
  12.     public void setTitle(String name){
  13.         this.mTitle = name;
  14.     }
  15.     public Bitmap getThumbnail(){
  16.         return mThumbnail;
  17.     }
  18.     public void setThumbnail(Bitmap thumbnail){
  19.         this.mThumbnail = thumbnail;
  20.     }
  21. }




リストと画面を関連付けるアダプター

・MyAdapter.java


  1. import android.content.Context;
  2. import android.view.LayoutInflater;
  3. import android.view.View;
  4. import android.view.ViewGroup;
  5. import android.widget.ArrayAdapter;
  6. import android.widget.ImageView;
  7. import android.widget.TextView;
  8. import java.util.List;
  9. public class MyAdapter extends ArrayAdapter<ListRow> {
  10.     private LayoutInflater mRayoutInflater = null;
  11.     private List<ListRow> mList;
  12.     public MyAdapter(Context context, int resource, List<ListRow> list) {
  13.         super(context, resource, list);
  14.         this.mRayoutInflater = LayoutInflater.from(context);
  15.         this.mList = list;
  16.     }
  17.     @Override
  18.     public View getView(int i, View convertView, ViewGroup viewGroup) {
  19.         View view;
  20.         if (convertView != null) {
  21.             view = convertView;
  22.         }
  23.         else {
  24.             view = mRayoutInflater.inflate(R.layout.list_layout, null);
  25.         }
  26.         ListRow item = mList.get(i);
  27.         // サムネイル画像
  28.         ImageView thumbnail = (ImageView)view.findViewById(R.id.thumbnail);
  29.         thumbnail.setImageBitmap(item.getThumbnail());
  30.         // タイトル
  31.         TextView title = (TextView)view.findViewById(R.id.title);
  32.         title.setText(item.getTitle());
  33.         return view;
  34.     }
  35. }







メイン処理



最初は、デフォルトで用意されている画像を表示してみます。
MainActivity.javaはこのようになりました。


・MainActivity.java


  1. import android.graphics.Bitmap;
  2. import android.graphics.BitmapFactory;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.widget.ListView;
  6. import java.util.ArrayList;
  7. public class MainActivity extends AppCompatActivity {
  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         // リストに表示するデータ
  13.         ArrayList<ListRow> listItems = new ArrayList<>();
  14.         for (int i = 0; i < 3; i++) {
  15.             // R.mipmap.ic_launcher_roundはデフォルトで用意されているアイコン
  16.             Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher_round);
  17.             ListRow item = new ListRow(bmp, "sample text No. " + String.valueOf(i));
  18.             listItems.add(item);
  19.         }
  20.         // MyAdapterを作成し、データを設定
  21.         MyAdapter adapter = new MyAdapter(this, R.layout.list_layout, listItems);
  22.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  23.         ListView listView = (ListView) findViewById(R.id.listView1);
  24.         listView.setAdapter(adapter);
  25.     }
  26. }




実行結果

768_03.png





画像リソースの追加



こちらを参考にしました。
Android 画像の追加 超基礎

端末のスクリーンサイズごとに画像を用意しなくてはならないので、
ウィザードで追加するようです。


[res]付近を選択して右クリック。
[New] - [Image Asset]を選択します。

768_04.png


こんな画面が表示されます。
「Asset Type」を「Image」に変更。

768_05.png


「Name」は適当な名称を設定します。
「Path」の右側のボタンをクリックするとファイル選択ダイアログが表示されます。
取り込みたい画像を選択してやります。

768_06.png


「Next」をクリックすると確認画面が表示されます。
「Finish」で確定。

768_07.png



BitmapFactory.decodeResourceで読み込むリソースを変更。


  1. import android.graphics.Bitmap;
  2. import android.graphics.BitmapFactory;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.widget.ListView;
  6. import java.util.ArrayList;
  7. public class MainActivity extends AppCompatActivity {
  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         // リストに表示するデータ
  13.         ArrayList<ListRow> listItems = new ArrayList<>();
  14.         for (int i = 0; i < 3; i++) {
  15.             
  16.             // -----
  17.             // 取り込んだアイコンに変更
  18.             Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_suiginto);
  19.             // -----
  20.             ListRow item = new ListRow(bmp, "sample text No. " + String.valueOf(i));
  21.             listItems.add(item);
  22.         }
  23.         // MyAdapterを作成し、データを設定
  24.         MyAdapter adapter = new MyAdapter(this, R.layout.list_layout, listItems);
  25.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  26.         ListView listView = (ListView) findViewById(R.id.listView1);
  27.         listView.setAdapter(adapter);
  28.     }
  29. }




狙い通りの表示になりました。

768_08.png

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/08/09(水) 22:58:08|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<(修正版)JavaScriptで選択されたjpgのサイズ(高さ、幅)をSOFマーカーから取得する | ホーム | Android Studio コードの折りたたみ機能を無効化>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/2017-83bb3d14
この記事にトラックバックする(FC2ブログユーザー)