É possível distribuir uniformemente os botões através da largura de um Android Linearlayout
-
28-09-2019 - |
Pergunta
Eu tenho um layout linear (orientado horizontalmente) que contém 3 botões. Eu quero que os 3 botões tenham uma largura fixa e sejam distribuídos uniformemente pela largura do layout linear.
Eu posso gerenciar isso definindo a gravidade do LinearLayout para centralizar e depois ajustar o preenchimento dos botões, mas isso funciona para uma largura fixa e não funcionará para alterar dispositivos ou orientações.
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:gravity="center">
<Button
android:id="@+id/btnOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="120dip"></Button>
<Button
android:id="@+id/btnTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="120dip"></Button>
<Button
android:id="@+id/btnThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="120dip"></Button>
</LinearLayout>
Solução
Expandindo -se Resposta do FedJ, se você definir layout_width
para 0dp
e defina o layout_weight
Para cada um dos botões para 1, a largura disponível será compartilhada igualmente entre os botões.
Outras dicas
Se você não deseja que os botões escalem, mas ajuste o espaçamento entre os botões (espaçamento igual entre todos os botões), você pode usar as visualizações com peso = "1", que preencherão o espaço entre os botões:
<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>
Você pode usá -lo como o seguinte.
<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>
Você pode fazer isso dando os dois View
SA layout_width
do 0dp
e a layout_weight
do 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>
A maneira como o Android layout_weight funciona é que:
- Primeiro, parece o tamanho que uma visão normalmente pega e reserva esse espaço.
- segundo, se o layout for
match_parent
então ele dividirá o Espaço que resta na proporção dolayout_weight
s. Assim, se você deu as opiniõeslayout_weight="2"
elayout_weight="1"
, a proporção resultante será de 2 a 1, ou seja: a primeira visão terá 2/3 do espaço que será deixado e a outra vista 1/3.
Então é por isso que se você der layout_width
um tamanho de 0dp
O primeiro passo não tem significado adicional, pois ambas as visualizações não recebem espaço. Então apenas o segundo ponto decide o espaço cada View
recebe assim, dando o View
é o espaço que você especificou de acordo com a proporção!
Para explicar o porquê 0dp
faz com que o espaço se deva igualmente, fornecendo um exemplo que mostra o oposto: O código abaixo resultaria em algo diferente desde example text
agora tem uma largura que é maior que 0dp
porque tem wrap_content
Em vez disso, tornar o espaço livre para dividir menos de 100% porque o texto ocupa espaço. O resultado será que eles obtêm 50% do espaço livre, mas o texto já ocupou algum espaço para que o TextView
terá bem mais de 50% do espaço total.
<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>
Bem, se você tiver exatamente 3 botões e se estiver ok (ou mesmo planejado), os botões externos estão alinhados ao lado esquerdo e direito, você pode querer experimentar uma relatividade que é menos sobrecarga (em muitas situações).
Você pode usar layout_alignParentBottom
Para alinhar todos os botões com a parte inferior do layout. Usar layout_alignParentLeft and Right
para os botões externos e layout_centerHorizontal
Para o botão do meio.
Isso funcionará bem em diferentes orientações e tamanhos de tela.
Você deve dar uma olhada no Android: Layout_weight Attribui
Para espaçar uniformemente dois botões em um layout linear horizontal, usei 3 objetos lineares para atuar como espaços que serão redimensionados automaticamente. Eu posicionei esses objetos linearlayout da seguinte maneira:
] Button1 [] Button2 [
([] representa um objeto LinearLayout usado para espaçamento)
Em seguida, eu defino cada um desses pesos dos objetos linearlayout como 1 e fico espaçando botões uniformemente.
Espero que isto ajude.
Eu criei uma visão personalizada Distributelayout para fazer isso.
Eu sugiro que você use o atributo Weightsum da Linearlayout.
Adicionando a tagandroid:weightSum="3"
para a declaração XML do seu linearlayout e depois android:layout_weight="1"
Para seus botões, resultará na distribuição dos três botões.
Isso pode ser alcançado atribuindo weight
A cada botão adicionado dentro do contêiner, muito importante para definir a orientação horizontal:
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);
}
Para que possamos obter isso em nosso dispositivo como resultado:
mesmo se girarmos nosso dispositivo o weight
definido em cada botão pode distribuir os elementos uniformalmente ao longo do recipiente:
A melhor abordagem é usar o tableLayout com o Android: layout_width = "match_parent" e nas colunas usam Android: layout_weight = "1" para todas as colunas
As respostas acima usando layout_did não funcionam para mim, mas o seguinte foi.
<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>
É assim que fica na tela,
Acima de todas
<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;
}
}
<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" />
A maneira mais fácil e rápida, (mas não a melhor), é adicionar uma visualização de texto com atributo de texto vazio, como este
android:text=""
A cor do fundo deve ser a mesma no linearlayout, então você pode usar a propriedade de preenchimento, como esta
android:paddingBottom="250dp"
ou o que você precisa.Aqui está um exemplo.
Crianças igualmente ponderadas
Para criar um layout linear no qual cada criança usa a mesma quantidade de espaço na tela, defina o Android: layout_height de cada vista para "0dp" (para um layout vertical) ou o Android: Layout_width de cada vista para "0dp" ( para um layout horizontal). Em seguida, defina o Android: layout_weight de cada visualização para "1".
Para que isso funcione no LinearLayout
Ver Grupo os valores de atributo para android:layout_width
e android:layout_height
precisa ser igual a "match_parent"
...
<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>
Em Circle, Tom, Tim e Todd são assumidos como 3 centímetros. Se você deseja que seja retoque, coloque -o como Tom e Tim sendo assumidos como 1 centímetros, o que significa que eles combinam virtual, mas seu plano 2D está na parte inferior. Isso é exibido na tela.