行のレイアウトをカスタマイズ
最終更新：
t_yokky2002 2011年10月17日(月) 14:35:16履歴
事前準備 
次のプロジェクトをEclipseにインポートしてください。
| プロジェクト名 | PhotoViewerPart2.zip |
概要
リストの一行のなかに、画像とテキストが含まれたレイアウトを実現するなど
複雑なレイアウトに対応する場合は、ArrayAdapterを継承した独自のAdapterを実装する必要があります。
複雑なレイアウトに対応する場合は、ArrayAdapterを継承した独自のAdapterを実装する必要があります。
カスタマイズ手順
一行のレイアウトを作成
res/layout/custom_list_item.xmlを次の内容に書き換えてください。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingTop="8dip"
android:paddingBottom="8dip"
android:paddingLeft="14dip"
android:paddingRight="14dip"
>
<ImageView
android:id="@+id/imageview"
android:layout_width="85dip"
android:layout_height="85dip"
android:scaleType="centerCrop"
android:padding="8dip"
/>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:textColor="@color/dark_blue"
android:background="#ffffff"
android:layout_marginLeft="16dip"
android:layout_marginTop="8dip"
/>
</LinearLayout>
</FrameLayout>
一行のデータを表すクラス生成
src/jp.co.example.listview/BindData.javaを、次の内容に書き換えてください。
public class BindData {
// ------------ ↓ここから ------------------
private String text;
private int imageResourceId;
public BindData(String text, int id) {
this.text = text;
this.imageResourceId = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public int getImageResourceId() {
return imageResourceId;
}
public void setImageResourceId(int imageResourceId) {
this.imageResourceId = imageResourceId;
}
// ------------ ↑ここまで ------------------
}
独自Adapterを作成
src/jp.co.example.listview/ImageAdapter.javaを、次の内容に書き換えてください。
public class ImageAdapter extends ArrayAdapter<BindData> {
// ------------ ↓ここから ------------------
private LayoutInflater inflater;
public ImageAdapter(Context context, List<BindData> objects) {
super(context, 0, objects);
this.inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
// 行を表すビューオブジェクトを取得
convertView = inflater.inflate(R.layout.custom_list_item, parent,
false);
}
// 画像名と日付の表示エリア
TextView textView = (TextView) convertView.findViewById(R.id.textview);
// 画像の表示エリア
ImageView imageView = (ImageView) convertView
.findViewById(R.id.imageview);
// 該当ポジションのデータを取得
BindData data = getItem(position);
// テキストビューとイメージビューにセット
textView.setText(data.getText());
imageView.setImageResource(data.getImageResourceId());
return convertView;
}
// ------------ ↑ここまで ------------------
}
Activityを生成
src/jp.co.example.listview/PhotoViewerActivity.javaを、次の内容に書き換えてください。
public class PhotoViewerActivity extends ListActivity {
// ------------ ↓ここから ------------------
private Integer[] mThumbIds = {
R.drawable.image1,
R.drawable.image2,
R.drawable.image3,
R.drawable.image4,
R.drawable.image5,
R.drawable.image6 };
private String[] mTitles = {
"image1\n\n2010/11/20",
"image2\n\n2010/11/21",
"image3\n\n2010/11/22",
"image4\n\n2010/11/23",
"image5\n\n2010/11/24",
"image6\n\n2010/11/25" };
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.custom_list);
// BindDataのリストを生成し、アダプターにセット
List<BindData> objects = new ArrayList<BindData>();
for(int i = 0; i < mTitles.length; i++) {
BindData data =
new BindData(mTitles[i], mThumbIds[i]);
objects.add(data);
}
setListAdapter(new ImageAdapter(this, objects));
}
// ------------ ↑ここまで ------------------
}
実行
次のように表示されましたか？
このページへのコメント
vqAxQ6 <a href="http://fowsnumrdhop.com/">fowsnumrdhop</a>, [url=http://mwllmkxnswez.com/]mwllmkxnswez[/url], [link=http://jbuzvfzvlogf.com/]jbuzvfzvlogf[/link], http://ybqhoejhkvdp.com/