2013年1月14日月曜日

[Android TIPS] 色々な情報をリストに表示する

色々な情報をリストに表示するというのをやってみました。
表示対象は画像と文字列ですが、予め res/drawable とコード内に用意しました
国旗の画像は ここ から取得し、flag01.png ~ flag08.png とし、res/drawable 配下に配置しています。

サンプル野良apkはこちらからどうぞ。

レイアウトはこんな感じ。

activity_country.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <HorizontalScrollView
        android:id="@+id/scrollView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF" >

        <LinearLayout
            android:id="@+id/listCountry"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:paddingLeft="4dip"
            android:paddingRight="4dip" />
    </HorizontalScrollView>

</FrameLayout>

info_country.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TableRow>
        <ImageView
            android:id="@+id/imgFlag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:scaleType="center" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="38dip"
            android:layout_height="wrap_content"
            android:text="国名:" />

        <TextView
            android:id="@+id/txtTitle"
            android:layout_width="142dip"
            android:layout_height="wrap_content" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首都:" />

        <TextView
            android:id="@+id/txtCapital"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通貨:" />

        <TextView
            android:id="@+id/txtCurrency"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>

</TableLayout>

コードはこんな感じ。

package com.sample.sampleapp;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.app.Activity;

public class CountryActivity extends Activity {

 /** WRAP_CONTENT */
 private static final int WC = LinearLayout.LayoutParams.WRAP_CONTENT;

 /**
  * 国情報保持クラス
  */
 private static class Country {
  /** 国旗画像のリソース ID */
  public int flag;
  /** 国名 */
  public String title;
  /** 首都 */
  public String capital;
  /** 通貨 */
  public String currency;

  public Country(int flag, String title, String capital, String currency) {
   this.flag = flag;
   this.title = title;
   this.capital = capital;
   this.currency = currency;
  }
 }

 /** 国情報リスト */
 private static final Country[] mCountries = {
   new Country(R.drawable.flag01, "バハマ", "ナッソー", "バハマ・ドル"),
   new Country(R.drawable.flag02, "バングラディシュ", "ダッカ", "タカ"),
   new Country(R.drawable.flag03, "ベナン", "ポルトノボ", "CFAフラン"),
   new Country(R.drawable.flag04, "カメルーン", "ヤウンデ", "CFAフラン"),
   new Country(R.drawable.flag05, "コロンビア", "ボゴタ", "コロンビア・ペソ"),
   new Country(R.drawable.flag06, "デンマーク", "コペンハーゲン", "デンマーク・クローネ"),
   new Country(R.drawable.flag07, "エクアドル", "キト", "アメリカ合衆国ドル"),
   new Country(R.drawable.flag08, "エルサルバドル", "サンサルバドル", "アメリカ合衆国ドル"),
 };

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_country);

  // ウィジェットの初期化
  initWidget();
 }

 /**
  * ウィジェットの初期化
  */
 private void initWidget() {
  int len = mCountries.length;
  for (int i = 0; i < len; i++) {
   addCountry(i);
  }
 }

 /**
  * 国情報の追加
  * 
  * @param index
  */
 private void addCountry(int index) {
  // レイアウトをインフレート
  View v = this.getLayoutInflater().inflate(R.layout.info_country, null);

  // 国旗
  ImageView imgFlag = (ImageView) v.findViewById(R.id.imgFlag);
  imgFlag.setImageResource(mCountries[index].flag);

  // 国名
  TextView txtTitle = (TextView) v.findViewById(R.id.txtTitle);
  txtTitle.setText(mCountries[index].title);

  // 首都
  TextView txtCapital = (TextView) v.findViewById(R.id.txtCapital);
  txtCapital.setText(mCountries[index].capital);

  // 通貨
  TextView txtCurrency = (TextView) v.findViewById(R.id.txtCurrency);
  txtCurrency.setText(mCountries[index].currency);

  // レイアウトパラメータの調整
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(WC, WC);
  params.setMargins(4, 8, 4, 8);
  v.setLayoutParams(params);

  // リストに追加
  LinearLayout listCountry = (LinearLayout) findViewById(R.id.listCountry);
  listCountry.addView(v);
 }
}

TableLayout で幅を設定するのに、任意業の要素1つ1つに幅を設定しなければいけないものなのかしらん。

0 件のコメント:

コメントを投稿