2011-05-14 7 views
18

Mi objetivo:¿Cómo puedo solucionar el problema de Android 9161, donde se intercambian bottomRightRadius y bottomLeftRadius?

Figure 1: The Goal
Figura 1: El objetivo

tanto, antes de que sabía sobre el tema, esto es lo que he intentado.

En primer lugar, un diseño de base:

<LinearLayout 
    android:orientation="horizontal" 
    android:layout_below="@id/heading" 
    android:layout_marginTop="10dp" 
    android:layout_width="@dimen/horizontal_two_button_width" 
    android:layout_height="@dimen/button_height_small" > 

    <Button 
     android:id="@+id/button_one" 
     android:layout_width="0dp" 
     android:layout_weight="1.0" 
     android:layout_height="fill_parent" 
     android:padding="10dp" 
     style="@style/ButtonText" 
     android:background="@drawable/button_left_green" /> 

    <Button 
     android:id="@+id/button_two" 
     android:layout_width="0dp" 
     android:layout_weight="1.0" 
     android:layout_height="fill_parent" 
     android:padding="10dp" 
     style="@style/ButtonText" 
     android:background="@drawable/button_right_green" />  

</LinearLayout> 

El 'button_left_green' dibujable:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/button_left_green_pressed" 
     android:state_pressed="true" /> 
    <item android:drawable="@drawable/button_left_green_focused" 
     android:state_focused="true" /> 
    <item android:drawable="@drawable/button_left_green_default" /> 
</selector> 

Y, por ejemplo, el 'button_left_green_default' dibujable:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape android:shape="rectangle"> 
      <solid android:color="@color/shadow" /> 
      <corners 
       android:radius="5dp" 
       android:topLeftRadius="5dp" 
       android:topRightRadius="0dp" 
       android:bottomLeftRadius="5dp" 
       android:bottomRightRadius="0dp" />  
     </shape> 
    </item> 
    <item 
     android:bottom="19dp" 
     android:top="1dp" 
     android:left="1dp" 
     android:right="1dp" > 

     <shape android:shape="rectangle"> 
      <gradient 
       android:startColor="@color/button_left_green_top_gradient_start" 
       android:endColor="@color/button_left_green_top_gradient_end" 
       android:angle="270" /> 

      <corners 
       android:radius="5dp" 
       android:topLeftRadius="5dp" 
       android:topRightRadius="0dp" 
       android:bottomLeftRadius="0dp" 
       android:bottomRightRadius="0dp" /> 
     </shape> 
    </item> 

    <item 
     android:top="19dp" 
     android:bottom="1dp" 
     android:left="1dp" 
     android:right="1dp" > 

     <shape android:shape="rectangle" > 
      <solid android:color="@color/button_left_green_bottom_gradient" /> 

      <corners 
       android:radius="5dp" 
       android:topLeftRadius="0dp" 
       android:topRightRadius="0dp" 
       android:bottomLeftRadius="5dp" 
       android:bottomRightRadius="0dp" /> 
     </shape> 
    </item> 
</layer-list> 

Por lo tanto, después de todo eso, obtuve la imagen en la Figura 2:
Figure 2: Take One
Figura 2: Tomar una

Después de doble comprobación de la definición de las esquinas inferiores, estaba convencido de que estaba loco hasta que encontré el problema conocido: http://code.google.com/p/android/issues/detail?id=9161

prefiero no sólo cambio ellos, porque si/cuando el problema se soluciona, los botones se romperán en las versiones más nuevas.

Una idea que tuve fue dejar los botones reales como rectángulos regulares (es decir, sin radios de esquina) y envolviendo ambos botones con un rectángulo redondeado. Agregué un fondo dibujable a LinearLayout que tenía esquinas redondeadas, pero las esquinas de los botones se superponían al borde del borde redondeado LinearLayout (ver Figura 3).

Figure 3: Take Two
Figura 3: Tomar dos

¿Cómo puedo mantener los antecedentes del botón dentro de los límites de fondo dibujable de su padre? ¿O tienes alguna otra sugerencia sobre cómo solucionar el error?

+0

Bueno, me enfrenté al mismo problema. Simplemente continué y los cambié en consecuencia con la esperanza de que si se soluciona un día, mi aplicación no es la única que sufre de ella :) – harism

+0

@harismo: también los cambié en una aplicación. PERO: en dispositivos> = Honeycomb ahora están equivocados (¿o debería decir correcto?: D) así que intercambiarlos no es una buena solución. –

Respuesta

15

Esto se siente como un truco, pero funcionó.

Los botones estaban compuestos originalmente por (1) una sombra exterior, (2) un degradado de la mitad superior y (3) un color sólido inferior. Esto es lo que hice:

  1. Hice las mitades superior e inferior redondeadas en las cuatro esquinas. Esto dejó (1) un espacio en el medio de los lados izquierdo y derecho y (2) esquinas redondeadas a la derecha.
  2. Creó un pequeño rectángulo para rellenar el espacio en el medio izquierdo.
  3. Creó otro rectángulo pequeño para rellenar el hueco en el medio derecho y hacer que las esquinas superior e inferior se encuentren en el lado derecho.

He aquí un ejemplo del XML para el estado normal del botón izquierdo.

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

    <!-- Main part of button --> 
    <item 
     android:bottom="20dp" 
     android:right="5dp" > 

     <shape android:shape="rectangle"> 
      <solid android:color="@color/button_normal_green_top" /> 
      <corners android:radius="5dp" /> 
     </shape> 
    </item> 

    <item 
     android:top="20dp" 
     android:right="5dp" > 

     <shape 
      android:shape="rectangle" > 
      <solid android:color="@color/button_normal_green_bottom" /> 
      <corners android:radius="5dp" /> 
     </shape> 
    </item> 

    <!-- Patch left middle part of button, which was left empty due to rounded 
    corners on top and bottom halves of button --> 
    <item 
     android:top="5dp" 
     android:bottom="20dp" 
     android:right="5dp" > 

     <shape android:shape="rectangle"> 
      <solid android:color="@color/button_normal_green_top" /> 
     </shape> 
    </item> 

    <item 
     android:top="20dp" 
     android:bottom="5dp" 
     android:right="5dp" > 

     <shape 
      android:shape="rectangle" > 
      <solid android:color="@color/button_normal_green_bottom" /> 
     </shape> 
    </item> 

    <!-- Patch right middle and make right side corners square --> 
    <item 
     android:bottom="20dp" 
     android:left="15dp" > 

     <shape android:shape="rectangle"> 
      <solid android:color="@color/button_normal_green_top" /> 
     </shape> 
    </item> 

    <item 
     android:top="20dp" 
     android:left="15dp" > 

     <shape android:shape="rectangle" > 
      <solid android:color="@color/button_normal_green_bottom" /> 
     </shape> 
    </item> 
</layer-list> 

yo, sin embargo, pierden el gradiente en la mitad superior, pero puedo vivir con el botón de dos tonos. Esto es lo que se ve el resultado como:
Two Buttons Solution

1

Se debe trabajar si nos proporcionan ya dejamos configuración correcta intercambiado; de manera que de intercambio de errores restaurará la configuración requerida, como abajo para dejó sólo curva, y righ aguda botón

<corners android:radius="2dp" android:topLeftRadius="2dp" 
    android:topRightRadius="0dp" android:bottomLeftRadius="0dp" 
    android:bottomRightRadius="2dp"> 
1

superó Esto parece haber sido fixed in Android 3.0. Y hay un comentario sobre el problema que explica cómo tener compatibilidad con versiones anteriores.

17

Otra solución es crear otra carpeta llamada "drawable-v12".

Introduzca aquí el radio correcto (por lo tanto, bottomLeftRadius, topLeftRadius), y en la carpeta dibujada original ponga los valores intercambiados. Entonces 3.1+ usará la carpeta v12, y las versiones anteriores a 3.1 usarán la carpeta dibujable.

+0

funciona genial Lo intenté con 2.3.3 y 4.0.2 - ¡es genial! Gracias – Informatic0re

+0

He estado jugando con algunas de las "soluciones" que existen y su sugerencia es la mejor que he encontrado hasta ahora. Es la forma más lógica de abordarlo dada la naturaleza ilógica del problema del radio. ¡Gracias! –

+0

Seguramente esta es la solución correcta. Una nota, si tiene diferentes versiones del dibujable para diferentes densidades, tendrá que tener drawable-v12-hdpi, etc. o factorizar los aspectos dependientes de la densidad en dimensiones dependientes de la densidad (recursos @dimen en dimensiones hdpi por ejemplo). – JulianSymes

1

Una solución mejor:

  • crear otra carpeta values-12
  • dimensions.xml Crear archivo bajo values-12.
  • Ponga 2 propiedades de dimensión en values-12/dimensions.xml para la esquina inferior izquierda, y esquina inferior derecha.
  • Ponga 2 propiedades de dimensión en values/dimensions.xml para los valores de radio de esquina inferior izquierda y esquina inferior derecha, pero recuerde voltearlos.

Utilice los valores de dimensión cuando asigne un radio de esquina en lugar de codificarlos en sus herramientas. Cuando se carga un pre 3.1, utilizará los valores de radio de esquina invertidos en la carpeta values. Cuando se carguen más de 3,1, utilizará los valores correctos de radio de esquina en la carpeta values-12.

¿Por qué es esto mejor? No necesita duplicar el código dibujable. Ahora puede cambiar cualquier código que no esté relacionado con radios de esquina sin tener que actualizar 2 o más lugares.

Cuestiones relacionadas