お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

【Android】TableLayoutでExcelっぽい表を作る

こんにちわ。pencoです。
 
今回はこんな感じの表を動的に作成していきたいと思います。
log_table
 

項目部分の作成

 
ではではさっそく。
まず、項目名の部分のレイアウトを作成します。

<TableLayout
    android:id="@+id/tableLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="0" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/text_bg_solid_gray"
                android:gravity="center"
                android:paddingBottom="2dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="2dp"
                android:text="@string/field"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_micro2" />
        </LinearLayout>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/text_bg_solid_gray"
            android:gravity="center"
            android:paddingBottom="2dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="2dp"
            android:text="@string/allotpoint"
            android:textColor="@color/white"
            android:textSize="@dimen/text_size_micro2" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:background="@drawable/text_bg_solid_blue"
            android:gravity="center"
            android:paddingBottom="2dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="2dp"
            android:text="@string/point"
            android:textColor="@color/white"
            android:textSize="@dimen/text_size_micro2" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:background="@drawable/text_bg_solid_pink"
            android:gravity="center"
            android:paddingBottom="2dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="2dp"
            android:text="@string/average"
            android:textColor="@color/white"
            android:textSize="@dimen/text_size_micro2" />
    </TableRow>
</TableLayout>

TableLayout 内に項目名用のTableRow を一つ追加し、その中に項目分(今回は4つ)のTextView を入れます。(1つめだけLinearLayout に入っていますが、理由については後述します。)TexiView にはそれぞれ項目名をセットしています。

背景設定

 
TexiView の背景は下記のようなxmlを配色分作って設定しています。
こういう小さいパーツには、shape を使うと画像に比べジャギが出なくて良いですよね。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/chart_pink"/>
            <corners android:radius="48dp"/>
        </shape>
    </item>
</layer-list>

また、TableLayout のandroid:stretchColumns=”0″ は引き伸ばすカラムを指定しています。値には0から始まる列のインデックスを指定するので、今回は左端の0を指定しています。
 
android:stretchColumns によって「分野」カラムが引き伸ばされる際、背景に設定した角丸四角も一緒に伸びてしまわないようにするため、1つ目のTexiView はLinearLayout に入れておいたのです。
 

行のレイアウト

 
次に、行のレイアウトを作成します。
この表では、先に作成した項目名の部分は固定で、その下にプログラム側で動的に行を追加していきます。プログラム側ではデータを流し込むだけにしたいので、共通部分はxmlで作成して読み込みます。
 
table_row.xml

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/chart_border" >

    <TextView
        android:id="@+id/rowtext1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:text="@string/field"
        android:textColor="@color/summary" />

    <TextView
        android:id="@+id/rowtext2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:background="@color/white"
        android:gravity="center"
        android:text="0"
        android:textColor="@color/base_text" />

    <TextView
        android:id="@+id/rowtext3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:background="@color/white"
        android:gravity="center"
        android:text="0"
        android:textColor="@color/base_blue" />

    <TextView
        android:id="@+id/rowtext4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:background="@color/white"
        android:gravity="center"
        android:text="0"
        android:textColor="@color/chart_pink" />
</TableRow>

項目名の時と同様に、4つTextView をセットしました。
レイアウトエディタで見ると、全部左に寄ってるけど!?と思うかもしれませんが、先程のTableLayout にセットすれば、ちゃんと1つ目のカラムが引き伸ばされるので大丈夫です。
 
ここでは罫線の設定も行っています。
TableLayout には罫線の設定項目がないので、TableRow を罫線色で塗りつぶし、各セルを行の色で塗りつぶして、マージンをあけることで、余白を罫線のように見せています。
 
今回は縦罫線しか引いていませんが、TableLayout を罫線色に塗って、TableRow に上または下のマージンを設定すれば、横罫線も引けます。
 

データのセット

 
最後に、行を追加する部分です。

TableLayout tableLayout = (TableLayout)findViewById(R.id.tableLayout);
for(int i=0; i<categoryNum; i++){
    TableRow tableRow = (TableRow)getLayoutInflater().inflate(R.layout.table_row, null);
    TextView name = (TextView)tableRow.findViewById(R.id.rowtext1);
    name.setText(cap[i]+caption[i]);
    TextView point = (TextView)tableRow.findViewById(R.id.rowtext2);
    point.setText(Integer.toString(haiten[i]));
    TextView score = (TextView)tableRow.findViewById(R.id.rowtext3);
    score.setText(Integer.toString(categoryPoint[i]));
    TextView ave = (TextView)tableRow.findViewById(R.id.rowtext4);
    ave.setText(Integer.toString(averagePoint[i]));

    if((i+1)%2 == 0){
        int color = getResources().getColor(R.color.chart_dg_gray);
        name.setBackgroundColor(color);
        point.setBackgroundColor(color);
        score.setBackgroundColor(color);
        ave.setBackgroundColor(color);
    }

    tableLayout.addView(tableRow, new TableLayout.LayoutParams(MP, WC));
}

先程作った行のレイアウトをLayoutInflater を使って読み込み、各セルにデータをセットします。
行の色を交互に変更したいので、偶数行の場合のみ、セルの色を変更します。
最後に、はじめに作ったTableLayout にこの行を追加すれば完成です。
 
おしまい。

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00