android - テーブル要素間の幅を均等に分割します

Question

次のようなものを表示するテーブルを作成しようとしています。

 ________
|__|__|__|
|__|__|__|

すべてのボックスを均等に分割する必要があり、一番下の行の中央のボックスには非常に大きな画像が表示され、強制的に小さいサイズになります。これが私の現在の XML レイアウトですが、次のようなレイアウトになります。

 ________
|_|____|_|
|_|____|_|

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
        <TextView
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Top Center"
            android:padding="3dip" />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="----&gt;" />
        <ImageView
            android:id="@+id/mainImg"
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
        />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="&lt;----" />
    </TableRow>
</TableLayout>

私は何を間違っていますか？

score 5 · Accepted Answer

重みのある線形レイアウトを使用する必要があります。

これを試してみてください。さらに何かを追加する必要があるかもしれませんが、それで始められるはずです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
</LinearLayout>

score 1 · Accepted Answer

何が間違っているのかわかりません。過去にあなたのようなテーブルレイアウトを試しましたが、適切に動作させることができませんでした。相対レイアウトを使用すると、あなたのようなレイアウトを簡単に実現できることがわかりました。

左のボックスを left_align に、右のボックスを right_align に設定します。次に、現在使用しているサイズの画面に対応するディップ値をすべてのボックスに指定すると、他の画面サイズでも正しく更新されます。

残念ながら、連続して 3 つを超えると (たとえば 4 つまたは 5 つのボックス)、この修正は機能しなくなります。

編集: Mal のコメントによると、別の方法として、彼の XML コードで相対レイアウトを使用することが考えられます。

参照用に元の修正を投稿します。また、これが実際にはフレームレイアウト内の相対的なレイアウトであることも忘れていました。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >  

    <Button
            android:id="@+id/start"
            android:layout_width="110dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
        android:text="@string/title_start" />

    <Button
        android:id="@+id/options"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_options" />   

    <Button
        android:id="@+id/scores"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_scores" />  

</RelativeLayout>

score 0 · Accepted Answer

更新: Android Percent Support Library は、パーセンテージ属性を使用して Android ウィジェットを均等に分割するのに役立ちます。

コードとコンセプト

Github デモ

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/fifty_huntv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff7acfff"
        android:text="20% - 50%"
        android:textColor="@android:color/white"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@id/fifty_huntv"
        android:background="#ffff5566"
        android:text="80%-50%"
        app:layout_heightPercent="80%"
        app:layout_widthPercent="50%"
        />

</android.support.percent.PercentRelativeLayout>

本当にすごい。

score 0 · Accepted Answer

RowLayout のボタン/子要素で android:layout_weight="1" を試してください

ここに画像の説明を入力

     <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str1"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str2"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str3"  
            android:layout_weight="1"/>

        <Button
            android:id="@+id/button12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/strMinus"  
            android:layout_weight="1"/>

    </TableRow>

android - テーブル要素間の幅を均等に分割します

4 に答える 4

Related

Reference