TableLayoutのTableRowの要素が右にはみ出る?

投稿者: Anonymous

TableLayoutを使ったレイアウトを作成中です。
TableRowにandroid:paddingStartを設定すると、一番右側に配置した要素(ImageButton)がはみ出してしまい、期待したレイアウトになりません。
はみ出さないようにするにはどのようにしたらよいでしょうか?コード側でも何か記述が必要でしょうか?

画像の説明をここに入力

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="wrap_content" android:layout_height="wrap_content"
             android:shrinkColumns="0,2"
             android:stretchColumns="1"
             android:background="#cccccc">

    <TableRow android:layout_width="match_parent" android:layout_height="wrap_content"
              android:minHeight="?attr/listPreferredItemHeight"
              android:gravity="center_vertical"
              android:paddingStart="?android:attr/listPreferredItemPaddingStart"
              android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
              android:layout_marginBottom="0.2dp"
              android:background="#ffffff">

        <TextView android:id="@+id/lbl"
                  android:labelFor="@+id/txtTel"
                  android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:text="@string/LBL_950_TEL"/>

        <EditText android:id="@+id/txtTel"
                  android:layout_width="wrap_content" android:layout_height="wrap_content"
                  android:layout_marginStart="10dp"
                  android:layout_marginEnd="10dp"
                  android:maxLines="1"
                  android:inputType="phone"/>

        <ImageButton android:id="@+id/btnTel"
                     android:layout_width="wrap_content" android:layout_height="wrap_content"
                     android:src="@mipmap/ic_call_black"
                     android:contentDescription="@string/tel"/>
    </TableRow>
</TableLayout>

解決

以下の点を修正することではみ出さないようなレイアウトにできました。
TableLayoutlayout_widthmatch_parentに修正
TableLayoutshrinkColumnsstretchColumnsを削除
EditTextlayout_weightの指定を追加

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#cccccc">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/listPreferredItemHeight"
        android:gravity="center_vertical"
        android:paddingStart="?android:attr/listPreferredItemPaddingStart"
        android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
        android:layout_marginBottom="0.2dp"
        android:background="#ffffff">

        <TextView
            android:id="@+id/lbl"
            android:labelFor="@+id/txtTel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/LBL_950_TEL"/>

        <EditText
            android:id="@+id/txtTel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:maxLines="1"
            android:inputType="phone"
            android:layout_weight="1"/>

        <ImageButton
            android:id="@+id/btnTel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_call_black"
            android:contentDescription="@string/tel"/>
    </TableRow>
</TableLayout>

推測ですが、はみ出していた原因は横幅の伸縮がTableLayoutshrinkColumnsstretchColumnsによって計算されていたためではないでしょうか。
paddingによるTableRowの左右の領域が計算されずにTextViewEditTextImageButtonをぞれぞれ伸縮するため、左右paddingの分がはみ出していたのかと思います。

試してはいませんが、TableRowにpaddingを指定するのではなく、padding用のviewをTextViewの前とImageButtonの後ろに配置することで、shrinkColumnsstretchColumnsによる伸縮ではみ出さないようにレイアウトできるかもしれません。


追記
layout_weightを使用せずに、padding用のviewとshrinkColumnsstretchColumnsを使ってレイアウトしました。

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:shrinkColumns="0,1,3,4"
    android:stretchColumns="2"
    android:background="#cccccc">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/listPreferredItemHeight"
        android:gravity="center_vertical"
        android:layout_marginBottom="0.2dp"
        android:background="#ffffff">

        <View
            android:id="@+id/row_padding_start"
            android:layout_width="?android:attr/listPreferredItemPaddingStart"
            android:layout_height="match_parent"/>

        <TextView
            android:id="@+id/lbl"
            android:labelFor="@+id/txtTel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/LBL_950_TEL"/>

        <EditText
            android:id="@+id/txtTel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:maxLines="1"
            android:inputType="phone"/>

        <ImageButton
            android:id="@+id/btnTel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_call_black"
            android:contentDescription="@string/tel"/>

        <View
            android:id="@+id/row_padding_end"
            android:layout_width="?android:attr/listPreferredItemPaddingEnd"
            android:layout_height="match_parent"/>

    </TableRow>
</TableLayout>
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *