32966


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

[![画像の説明をここに入力](https://i.stack.imgur.com/fd02N.png)](https://i.stack.imgur.com/fd02N.png)

[code]

    <?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>
    
[/code]


CC BY-SA 3.0
2017-02-26T07:30:12.923
32955
2017-03-09T09:43:42.763
2017-02-26T14:27:47.440
question
android java xml
TableLayoutのTableRowの要素が右にはみ出る？


以下の点を修正することではみ出さないようなレイアウトにできました。  
・`TableLayout`の`layout_width`を`match_parent`に修正  
・`TableLayout`の`shrinkColumns`と`stretchColumns`を削除  
・`EditText`に`layout_weight`の指定を追加

[code]

    <?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>
    
[/code]

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

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

* * *

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

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2017-02-27T03:35:36.057
32966
2017-02-27T04:12:12.793
2017-02-27T04:12:12.793
20272
20272
32955
answer


android4.0ではGridlayoutがサポートされましたので、そちらを使う方がレイアウトの自由度  
が上がり、問題も起きにくいですよ。


CC BY-SA 3.0
2017-03-09T09:43:42.763
33214
2017-03-09T09:43:42.763
20928
32955
answer