¿Cómo se crean botones con anchos iguales?

Question

Quiero mostrar tres botones en el medio de una pantalla, y hacer que los tres botones tengan el mismo ancho, aunque tendrán etiquetas de texto de diferentes longitudes.

Simplemente agregando tres botones con etiquetas de texto de diferentes longitudes produce botones de diferentes anchuras.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_vertical" 
    android:gravity="center"> 
    <Button 
     android:id="@+id/button_1" 
     android:layout_height="fill_parent" 
     android:layout_width="wrap_content" 
     android:text="ABCDEF" /> 
    <Button 
     android:id="@+id/button_2" 
     android:layout_height="fill_parent" 
     android:layout_width="wrap_content" 
     android:text="GHI" /> 
    <Button 
     android:id="@+id/button_3" 
     android:layout_height="fill_parent" 
     android:layout_width="wrap_content" 
     android:text="JKLM" /> 
</LinearLayout>

predeterminado ancho de botón envuelve contenidos:

-

Ajuste del layout_weight a 1 y el layout_width a 0dip en todos los botones hace que se extienden igualmente a llenar toda la pantalla anchura. Por lo que quiero, tales botones son simplemente demasiado grandes, especialmente en pantallas grandes.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_vertical" 
    android:gravity="center"> 
    <Button 
     android:id="@+id/button_1" 
     android:layout_height="fill_parent" 
     android:layout_width="0dip" 
     android:layout_weight="1" 
     android:text="ABCDEF" /> 
    <Button 
     android:id="@+id/button_2" 
     android:layout_height="fill_parent" 
     android:layout_width="0dip" 
     android:layout_weight="1" 
     android:text="GHI" /> 
    <Button 
     android:id="@+id/button_3" 
     android:layout_height="fill_parent" 
     android:layout_width="0dip" 
     android:layout_weight="1" 
     android:text="JKLM" /> 
</LinearLayout>

peso disposición 1 botones llenan ancho de la pantalla:

-

Establecimiento de valores diferentes para weightSum en el LinearLayout matriz se puede utilizar para detener los botones de llenar toda la pantalla, pero no creo que este sea el camino que quiero tomar, porque no quiero que los botones ocupen una gran parte de la pantalla en dispositivos de pantalla grande. Para aclarar, usando weightSum, podría, por ejemplo, configurar los tres botones para ocupar colectivamente la mitad del ancho de la pantalla, que puede verse bien en pantallas pequeñas, pero en una pantalla grande, los botones aún ocuparían la mitad del ancho de la pantalla, y el botones simplemente sería mucho más grande de lo que quiero. Quizás la solución final sea simplemente tener diferentes archivos de diseño para diferentes pantallas, pero prefiero no seguir este camino.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_vertical" 
    android:gravity="center" 
    android:weightSum="5"> 
    <Button 
     android:id="@+id/button_1" 
     android:layout_height="fill_parent" 
     android:layout_width="0dip" 
     android:layout_weight="1" 
     android:text="ABCDEF" /> 
    <Button 
     android:id="@+id/button_2" 
     android:layout_height="fill_parent" 
     android:layout_width="0dip" 
     android:layout_weight="1" 
     android:text="GHI" /> 
    <Button 
     android:id="@+id/button_3" 
     android:layout_height="fill_parent" 
     android:layout_width="0dip" 
     android:layout_weight="1" 
     android:text="JKLM" /> 
</LinearLayout>

suma de peso del 5 pequeña pantalla:

peso suma 5 en pantalla grande:

-

También probé muchas cosas con TableLayout, pero didn' No hay nada mejor que usar LinearLayout.

GridView es extremadamente torpe de usar, y aún no lo he probado.

Entonces, ¿cómo se crean botones con anchos iguales, preferiblemente donde son tan anchos como sea necesario para ajustar el contenido del botón con la etiqueta más larga?

Cualquier consejo es apreciado.

(lo hice buscar y encontrar a esta pregunta hecha y contestada muchas veces, pero ninguna de las respuestas que encontré resolví lo que estoy tratando de lograr.)

Answer 1

Tal vez la solución final será simplemente tener diferentes archivos de diseño para diferentes pantallas, pero prefiero no seguir este camino.

Muchos programadores utilizarán res/layout/ y res/layout-large/ para manejar situaciones como esta. En el caso limitado de los tres botones, puede tener alternativas, pero generalmente las interfaces de usuario no son tan simplistas.

Entonces, ¿cómo se crean botones con anchos iguales, preferiblemente donde son tan anchos como sea necesario para ajustar el contenido del botón con la etiqueta más larga?

Para cumplir con su requisito "preferible" [sic], deberá crear una clase de diseño personalizado para eso. Here is one related to it, para el patrón del tablero, que puede usar como punto de partida.

Answer 2

uso de paneles de clase Fragmento

http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/DashboardFragment.java

Answer 3

La lectura de este hilo, a continuación, hacer un poco de ensayo y error y se dio cuenta de que android:layout_width="180px" es un parámetro aceptado. Ahora como dije, acabo de tropezar con esto, no intenté usar esto para resolver el escenario de tres botones.

Bien podría ser que las cosas hayan cambiado desde que publicó originalmente. Aunque intenté esto mientras construía para la versión 1.5. Eso es lo bastante mayor ... :-)

Aquí es la completa main.xml:

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

    <TextView 
     android:id="@+id/dateText" 
     android:text="\n\nClick for Date\n\n" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="180px" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:text="Get the Time" 
     android:onClick="showNewDate" /> 

</LinearLayout> 

Answer 4

Si usted sabe de antemano lo que su texto del botón será más amplia que puede utilizar el atributo android:ems para establecer sus botones para que anchura.

<Button 
    android:id="@+id/my_button" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:minEms="5" 
    android:text="@string/my_button" /> 

No es perfecto, pero es la manera más fácil que he encontrado para lograr este look sin cesar perder el tiempo con los diseños.

Answer 5

¡Solo una nota adicional de mi parte!

Si necesita establecer el ancho (o alto) de los botones (o cualquier otra vista con un simple cambio de código) que se agregan en tiempo de ejecución, puede usar el siguiente código (no depende de la orientación):

public void AlignButtons(){ 
    llModules = (LinearLayout) findViewById(R.id.llModules); 

    ViewTreeObserver viewTree = llModules.getViewTreeObserver(); 
    viewTree.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { 
     public boolean onPreDraw() { 

      int childcount = llModules.getChildCount(); 
      int maxWidth = 0; //int maxHeight = 0; 

      String fontPath = "fonts/Isabella-Decor.ttf"; 
      Typeface tf = Typeface.createFromAsset(getAssets(), fontPath); 

      for (int i = 0; i < childcount; i++) { 
       LinearLayout v = (LinearLayout)llModules.getChildAt(i); 
       View vv = v.getChildAt(0); 
       if (vv instanceof Button) { 
        int width = vv.getMeasuredWidth(); 
        maxWidth = (maxWidth > width) ? maxWidth : width; 
        //int height = vv.getMeasuredHeight(); 
        //maxHeight = (maxHeight > height) ? maxHeight : height; 
       } 
      } 
      for (int i = 0; i < childcount; i++) { 
       LinearLayout v = (LinearLayout)llModules.getChildAt(i); 
       View vv = v.getChildAt(0); 
       if (vv instanceof Button) { 
        LayoutParams params = ((Button) vv).getLayoutParams(); 
        params.width = maxWidth; 
        //params.height = maxHeight; 
        ((Button) vv).setLayoutParams(params); 

        // Applying font 
        ((Button) vv).setTypeface(tf); 
       } 
       vv = v.getChildAt(1); 
       if (vv instanceof TextView) { 
        // Applying font 
        ((TextView) vv).setTypeface(tf); 
       } 
      } 

      return true; 
     } 
    }); 
} 

Aquí, en mi caso:

llModule - alguna disposición que contiene otro diseño con lo que necesitamos para alinear (v.getChildAt(0);) y otra (v.getChildAt(1);).

LinearLayout v = (LinearLayout) llModules.getChildAt (i); - obtén el diseño de los botones para alinear.

Otras piezas son claras de entender.

Dos ciclos en este código son bastante idénticos, pero todavía no puedo imaginar cómo combinarlos (para acelerar el tiempo de ejecución).

Answer 6

Utilice este código adecuado, esto lo ayudará.

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

<Button 
    android:id="@+id/button1" 
    android:layout_width="0dp" 
    android:layout_weight="1" 
    android:layout_height="wrap_content" 
    android:text="Get the Time" 
    android:onClick="showNewDate" /> 
<Button 
    android:id="@+id/button2" 
    android:layout_width="0dp" 
    android:layout_weight="1" 
    android:layout_height="wrap_content" 
    android:text="Get the Time" 
    android:onClick="showNewDate" /> 
<Button 
    android:id="@+id/button3" 
    android:layout_width="0dp" 
    android:layout_weight="1" 
    android:layout_height="wrap_content" 
    android:text="Get the Time" 
    android:onClick="showNewDate" />