android - LinearLayoutの幅全体にボタンを均等に分散させることは可能ですか？

Question

私LinearLayoutは3つのボタンを含む（水平方向）を持っています。3つのボタンの幅を固定し、の幅全体に均等に分散させたいLinearLayout。

これは、重力LinearLayoutを中央に設定してからボタンのパディングを調整することで管理できますが、これは固定幅では機能し、さまざまなデバイスや向きでは機能しません。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btnOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="120dp" />

    <Button
        android:id="@+id/btnTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="120dp" />


    <Button
        android:id="@+id/btnThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="120dp" />
</LinearLayout>

score 397 · Accepted Answer

fedjの答えを拡張して、各ボタンのを1に設定layout_widthし0dp、設定するとlayout_weight、使用可能な幅がボタン間で均等に共有されます。

score 252 · Accepted Answer

ボタンを拡大縮小したくないが、ボタン間の間隔（すべてのボタン間の等間隔）を調整する場合は、ボタン間のスペースを埋めるweight="1"のビューを使用できます。

    <Space
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1" >
    </Space>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@null"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/tars_active" />

    <Space
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1" >
    </Space>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@null"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/videos_active" />

    <Space
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="1" >
    </Space>

score 28 · Accepted Answer

これを行うには、Viewsalayout_widthと0dpalayout_weightの両方を指定し1ます。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="0dp"
        android:text="example text"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

</LinearLayout>

android layout_weightが機能する方法は、次のとおりです。

まず、ビューが通常取るサイズに見え、このスペースを予約します。
次に、レイアウトがその場合、残りのスペースをsの比率でmatch_parent分割します。したがって、ビューとを指定した場合、結果の比率は2対1になります。つまり、最初のビューは残りのスペースの2/3を取得し、他のビューは1/3を取得します。layout_weightlayout_weight="2"layout_weight="1"

そのため、最初のステップlayout_widthのサイズを0dp指定しても、両方のビューにスペースが割り当てられていないため、意味が追加されません。次に、2番目のポイントだけがそれぞれが取得するスペースを決定します。したがって、比率に従って指定したスペースがsにView与えられます。View

0dp反対の例を示して、スペースが均等に分割される理由を説明します。以下のコードは、代わりに空きスペースを100％未満に分割するために残されたexample text幅よりも広い幅を持っているため、結果が異なります。テキストにスペースがかかるためです。その結果、空き領域の50％が残りますが、テキストはすでにある程度の領域を占めているため、合計領域の50％をはるかに超えます。0dpwrap_contentTextView

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:text="example text"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

</LinearLayout>

score 23 · Accepted Answer

以下のように使用できます。

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Save"/>
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reset"/>
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="cancel"/>
    <Space
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
</LinearLayout>

score 22 · Accepted Answer

このための最新のソリューションはFlexboxです。

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:justifyContent="space_around"> <!-- or "space_between", "space_evenly" -->

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />
</com.google.android.flexbox.FlexboxLayout>

必ずインポートしてくださいimplementation 'com.google.android:flexbox:2.0.0'

Flexboxはるかに強力です。を補完するのに適していConstraintLayoutます。これは、詳細を学ぶための優れたリソースです。

score 13 · Accepted Answer

ちょうど3つのボタンがあり、外側のボタンが左側と右側に配置されていても問題がない（または計画されている）場合は、オーバーヘッドの少ないRelativeLayoutを試してみてください（多くの状況で）。

を使用layout_alignParentBottomして、すべてのボタンをレイアウトの下部に揃えることができます。layout_alignParentLeft and Right外側のボタンと中央のボタンに使用しlayout_centerHorizontalます。

これは、さまざまな向きや画面サイズでうまく機能します。

score 11 · Accepted Answer

11

android：layout_weight属性を確認する必要があります

于 2010-08-12T18:18:46.463 に答える

score 4 · Accepted Answer

水平線形レイアウトで2つのボタンの間隔を均等にするために、3つのLinearLayoutオブジェクトを使用して、自動的にサイズ変更されるスペースとして機能しました。これらのLinearLayoutオブジェクトを次のように配置しました。

[] Button1 [] Button2 []

（[]はスペーシングに使用されるLinearLayoutオブジェクトを表します）

次に、これらの[] LinearLayoutオブジェクトの重みをそれぞれ1に設定すると、ボタンが等間隔に配置されます。

お役に立てれば。

score 4 · Accepted Answer

4

これを行うために、カスタムのViewDistributeLayoutを作成しました。

于 2014-07-10T22:12:08.287 に答える

score 4 · Accepted Answer

LinearLayoutのweightSum属性を使用することをお勧めします。

このタグ android:weightSum="3"をLinearLayoutのxml宣言に追加してandroid:layout_weight="1"から、ボタンに追加すると、3つのボタンが均等に分散されます。

score 4 · Accepted Answer

これは、コンテナ内に追加されたすべてのボタンに割り当てることで実現できます。これはweight、水平方向を定義するために非常に重要です。

    int buttons = 5;

    RadioGroup rgp = (RadioGroup) findViewById(R.id.radio_group);

    rgp.setOrientation(LinearLayout.HORIZONTAL);

    for (int i = 1; i <= buttons; i++) {
        RadioButton rbn = new RadioButton(this);         
        rbn.setId(1 + 1000);
        rbn.setText("RadioButton" + i);
        //Adding weight
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1f);
        rbn.setLayoutParams(params);
        rgp.addView(rbn);
    }

その結果、デバイスでこれを取得できます。

デバイスを回転させてもweight、各ボタンで定義されている要素をコンテナに沿って均一に分散させることができます。

score 4 · Accepted Answer

android:weightSum属性線形レイアウトを使用する必要があります。線形レイアウトに、レイアウト内のボタンの数に等しいweightSumを指定し、ボタンのandroid:layout_weight="1"幅をandroid:layout_width="0dp" さらに設定および設定します。パディングとレイアウトマージンを使用してレイアウトのスタイルを設定できます。

<LinearLayout android:id="@+id/LinearLayout01"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:gravity="center"
    android:weightSum="3">
    
    <Button
        android:id="@+id/btnOne"
        android:layout_width="0dp"
        android:text="1"
        android:layout_height="wrap_content"
        android:width="120dip"
        android:layout_weight="1"
        android:layout_margin="15dp" 
        />
    
    <Button
        android:id="@+id/btnTwo"
        android:text="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:width="120dip"
        android:layout_weight="1"
        android:layout_margin="15dp" />

    <Button
        android:id="@+id/btnThree"
        android:text="3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:width="120dip"
        android:layout_weight="1"
        android:layout_margin="15dp" />

</LinearLayout>

それを動的に行うために

void initiate(Context context){
    LinearLayout parent = new LinearLayout(context);

    parent.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
    parent.setWeightSum(3);
    parent.setOrientation(LinearLayout.HORIZONTAL);

    AppCompatButton button1 = new AppCompatButton(context);
    button1.setLayoutParams(new LinearLayout.LayoutParams(0 ,LinearLayout.LayoutParams.WRAP_CONTENT,1.0f));

    AppCompatButton button2 = new AppCompatButton(context);
    button2.setLayoutParams(new LinearLayout.LayoutParams(0 ,LinearLayout.LayoutParams.WRAP_CONTENT,1.0f));

    AppCompatButton button3 = new AppCompatButton(context);
    button3.setLayoutParams(new LinearLayout.LayoutParams(0 ,LinearLayout.LayoutParams.WRAP_CONTENT,1.0f));
    
    parent.addView(button1);
    parent.addView(button2);
    parent.addView(button3);

}

score 4 · Accepted Answer

で、それ自体にlinearLayout重みを与える代わりに、重みを[表示]に設定します。これはストレッチされません。Button<Space>Button

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.955">

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/ic_baseline_arrow_back_24" />

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/captureButton"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:background="@drawable/ic_round_camera_24" />

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/cameraChangerBtn"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/ic_round_switch_camera_24" />

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

私は4を使用して<Space>いるので、android:weightSum="4"これlinear layoutも結果です::

レイアウトプレビュー

score 3 · Accepted Answer

最善のアプローチは、すべての列で使用TableLayoutするandroid:layout_width="match_parent"列で使用することandroid:layout_weight="1"です。

score 2 · Accepted Answer

layout_を使用した上記の回答は私には機能しませんでしたが、以下は機能しました。

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_weight="0.1"
    android:layout_gravity="center_horizontal"
    >

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
       />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp"
        />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp"/>

</LinearLayout>

これが画面上での表示です。

score 2 · Accepted Answer

何よりも正しい答えですが、目に見える機能やなくなった機能が必要な場合は、この実用的な方法がうまく機能します

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnOne"
            android:layout_width="120dp"
            android:layout_height="match_parent"></Button>

        <Button
            android:id="@+id/btnTwo"
            android:layout_width="120dp"
            android:layout_height="match_parent"></Button>


        <Button
            android:id="@+id/btnThree"
            android:layout_width="120dp"
            android:layout_height="match_parent"></Button>
    </LinearLayout>



 float width=CommonUtills.getScreenWidth(activity);
            int cardWidth=(int)CommonUtills.convertDpToPixel (((width)/3),activity);

LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(width,
                        LinearLayout.LayoutParams.MATCH_PARENT);

btnOne.setLayoutParams(params);
btnTwo.setLayoutParams(params);
btnThree.setLayoutParams(params);

public class CommonUtills {
public static float getScreenWidth(Context context) {
        float width = (float) 360.0;
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        width = displayMetrics.widthPixels / displayMetrics.density;
        return width;
    }
}

score 2 · Accepted Answer

均等に重み付けされた子供

各子が画面上で同じ量のスペースを使用する線形レイアウトを作成するには、各ビューのandroid：layout_heightを「0dp」（垂直レイアウトの場合）に設定するか、各ビューのandroid：layout_widthを「0dp」（水平レイアウトの場合）。次に、各ビューのandroid：layout_weightを「1」に設定します。

これがLinearLayoutビューグループで機能するためには、の属性値が...に等しい必要がありandroid:layout_widthます。android:layout_height"match_parent"

score 1 · Accepted Answer

これを使用できます。理解するのはとても簡単です：https ：//developer.androidによって

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
    android:text="Tom"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="24sp" />

<TextView
    android:text="Tim"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="24sp" />

<TextView
    android:text="Todd"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="24sp" />

</LinearLayout>

score 0 · Accepted Answer

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Tom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp" 
        android:layout_weight="3"/>

    <TextView
        android:text="Tim"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp"
        android:layout_weight="3"/>

    <TextView
        android:text="Todd"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp" 
        android:layout_weight="3"/>

</LinearLayout>

円では、トム、ティム、トッドは3センチメートルと見なされます。タッチダウン画面にしたい場合は、トムとティムが1センチメートルと想定されるように配置します。つまり、仮想を組み合わせますが、その2D平面は下部にあります。これは画面に表示されます。

score 0 · Accepted Answer

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
    android:text="Tom"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

<TextView
    android:text="Tim"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

<TextView
    android:text="Todd"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

score 0 · Accepted Answer

最も簡単で最速の方法（ただし、最善ではありません）は、次のように、空のテキスト属性を持つTextViewを追加することです。

android:text=""

LinearLayoutで背景色が同じである必要がある場合は、次のようにpaddingプロパティを使用できます。

android:paddingBottom="250dp"

またはあなたが必要なものは何でも。これが例です。

score 0 · Accepted Answer

3つのボタンの幅を固定し、レイアウトの幅全体に均等に分散させたい場合は、constraintLayoutを使用してみませんか？

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <Button
            android:id="@+id/btnOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="120dip"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btnTwo">
            
        </Button>

        <Button
            android:id="@+id/btnTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="120dip"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btnThree"
            app:layout_constraintStart_toEndOf="@id/btnOne"></Button>


        <Button
            android:id="@+id/btnThree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="120dip"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/btnTwo"
            app:layout_constraintEnd_toEndOf="parent">
            
        </Button>

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Accepted Answer

幅とbeは、レイアウトの幅全体に均等に分散されます。なぜconstraintLayoutを使用しないのですか？

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="match_parent">

 <Button android:id="@+id/btnOne" android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:width="120dip"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintEnd_toStartOf="@id/btnTwo">
 </Button> 

 <Button android:id="@+id/btnTwo" android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:width="120dip" 
  app:layout_constraintTop_toTopOf="parent" 
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toStartOf="@id/btnThree"
  app:layout_constraintStart_toEndOf="@id/btnOne"></Button> <Button 
  android:id="@+id/btnThree" android:layout_width="wrap_content"    
  android:layout_height="wrap_content" android:width="120dip" 
  app:layout_constraintTop_toTopOf="parent" 
  app:layout_constraintBottom_toBottomOf="parent" 
  app:layout_constraintStart_toEndOf="@id/btnTwo" 
  app:layout_constraintEnd_toEndOf="parent"> 
 </Button>

</androidx.constraintlayout.widget.ConstraintLayout>```

android - LinearLayoutの幅全体にボタンを均等に分散させることは可能ですか？

23 に答える 23

このための最新のソリューションはFlexboxです。

Related

Reference