【Android】TableLayoutでExcelっぽい表を作る
こんにちわ。pencoです。
今回はこんな感じの表を動的に作成していきたいと思います。
項目部分の作成
ではではさっそく。
まず、項目名の部分のレイアウトを作成します。
<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 にこの行を追加すれば完成です。
おしまい。
コメントをどうぞ