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

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

【Android】続・TableLayoutでExcelっぽい表を作る:長文のレイアウト崩れを解消!

こんにちわ、pencoです。
今回は前回の記事に問題を発見したので、その点を修正するための追記になります。

何が問題だったかというと、下図の左端のTexiView に改行するような長文が入ると、レイアウトが崩れてしまいます。
log_table
 

TableLayout修正

 
ということで、まず項目名のレイアウトのTableLayout を以下の様に修正します。

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

android:shrinkColumns=”0″ を追加しました。
android:shrinkColumns は縮小するカラムを指定します。
stretchColumns とshrinkColumns の両方を指定することで、左端のカラムは、空いているスペースいっぱいに拡張し、そこに入らなかった分は縮小(折り返して、つまり改行)して表示されます。
 
TableRow に追加するTextView の問題ではないという所がミソですね。
 

レイアウト修正

 
次に行のレイアウトを修正します。
table_row.xml

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

    <LinearLayout
        android:id="@+id/rowlayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white" >

        <TextView
            android:id="@+id/indextext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="2dp"
            android:paddingLeft="2dp"
            android:paddingTop="2dp"
            android:text="①"
            android:textColor="@color/summary" />

        <TextView
            android:id="@+id/rowtext1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="2dp"
            android:paddingRight="2dp"
            android:paddingTop="2dp"
            android:text="@string/field"
            android:textColor="@color/summary" />

    </LinearLayout>

    <TextView
        android:id="@+id/rowtext2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        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="match_parent"
        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="match_parent"
        android:layout_marginLeft="1dp"
        android:background="@color/white"
        android:gravity="center"
        android:text="0"
        android:textColor="@color/chart_pink" />
</TableRow>

ポイント

TableLayout を修正しただけでは、右3つのカラムが上詰めになったままで、背景にも下地の色(罫線色)が出てしまっていました。
そこで、id/rowtext2~4 は高さをmatch_parent にし、android:gravity=”center” で中央揃えにしました。
 
また、左端のカラムは長文が入ると改行されるので、①の所はインデントしたいと思い、①と改行される文章が入る部分のTextView は別に分けてみました。
別に分けた際に、LinearLayout で囲っていますが、これは2つのTextView を1つにまとめておかないと、先のTableLayout の設定がid/indextext に適用されてしまうからです。
 
id/rowtext1 の高さはmatch_parent になっていませんが、今回の場合、id/rowtext1 の高さによって、行自体の高さが可変する、という状態なので特にいれていません。
id/rowtext1 は左上詰めにしたかったので、android:gravity も設定していません。
この辺は条件によって適宜変更して下さい。
 
 
修正後はこんな感じになります。
device-2014-08-13-123130
 

今回はこの辺で。

コメントをどうぞ

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


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

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

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

03-3541-1230

info@nvtrlab.jp

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