2010-02-08 6 views
17

Estoy creando una barra de progreso personalizada (posicionado bajo WebView) y lo que me gustaría dibujar es una línea de 1dp de ancho entre WebView y ProgressBar. Estoy modificando dibujable existentes, a saber progress_horizontal.xml, y trató de algo como esto:Dibujando el borde superior en una forma en Android

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

    (...) 

    <item> 
    <shape android:shape="line"> 
     <stroke android:width="1dp" android:color="#FF000000" /> 
    </shape> 
    </item> 

</layer-list> 

Esta línea sin embargo se centra verticalmente pero quiero que sea dibujado en la parte superior de la estirable. La única idea de que podía llegar a es el uso de este gradiente "hacky" a continuación:

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

    (...) 

    <item> 
    <shape> 
     <gradient 
      android:startColor="#FF000000" 
      android:centerColor="#00000000" 
      android:centerY="0.01" 
      android:endColor="#00000000" 
      android:angle="270" 
     /> 
    </shape> 
    </item> 

</layer-list> 

¿Tiene mejores ideas de cómo dibujar una sola línea de forma alineada con la parte superior de la dibujable definido con layer-list?

Respuesta

47

pasé un tiempo tratando de resolver esto también. Afortunadamente hay una mejor manera de hacerlo, pero este es el método que utilicé, que también es un poco hackish, pero en caso de que ayude a alguien, pensé que lo compartiría.

El primer elemento de la lista de capas debe ser un sólido del color que desee que sea su borde. A continuación, sería la (s) cosa (s) que desea que tenga el borde, con relleno en cualquier lado donde quiera que esté el borde.

Por ejemplo:

<?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="YOUR BORDER COLOR" /> 
     </shape> 
    </item> 
    <item android:top="YOUR TOP BORDER THICKNESS"> 
     THE THING YOU WANT A BORDER ON 
    </item> 
</layer-list> 

La idea es que el relleno en el elemento revela la forma sólida detrás de él, dando la apariencia de los bordes. Puede agregar relleno a cualquier lado para agregar un borde. Imagino que podrías ser más complicado y tener bordes de diferentes colores de esta manera también.

Parece un truco, pero funcionó para mí.

EDITAR: Dije "relleno" pero en las listas de capas es más como un desplazamiento.

+0

funciona! Gracias – Kevin

+9

Obviamente, esto no funciona con una "COSA" transparente. – Kenneth

+0

Gracias por esto. :) Agregué una capa adicional para tener un borde inferior que necesito. – KarenAnne

12

estaba pasando por todos los temas relacionados, pero nadie pudo resolver mi problema. Pero algunos de ellos fueron muy útiles para comprender cómo funcionan los parámetros de la lista de capas o de la forma.

Mi problema consistía en definir un botón con un degradado lineal y dibujar una línea superior e inferior en diferentes colores. Después de todo, pirateé esta solución. Me salvó el archivo res unter/estirable/blue_btn.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:state_pressed="true" >   
     <shape android:shape="rectangle"> 
      <solid android:color="@color/blue_end" /> 
      <padding 
        android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
      <stroke 
       android:width="1dp" 
       android:color="@color/bottomline_btn" />       
     </shape>  
    </item> 
    <item> 
     <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
      <item> 
       <shape android:shape="rectangle"> 
        <solid android:color="@color/blue" /> 
        <gradient 
         android:startColor="@color/blue" 
         android:endColor="@color/blue_end" 
         android:angle="270" /> 
       </shape> 
      </item> 
      <item android:top="0dp" android:bottom="-1dp" android:left="-1dp" android:right="-1dp"> 
       <shape android:shape="rectangle"> 
        <stroke 
         android:width="1dp" 
         android:color="@color/topline_btn" />      
        <solid android:color="#00000000" /> 
        <corners android:radius="0dp" /> 
       </shape> 
      </item> 
      <item android:top="-1dp" android:bottom="0dp" android:left="-1dp" android:right="-1dp"> 
       <shape android:shape="rectangle"> 
        <stroke 
         android:width="1dp" 
         android:color="@color/bottomline_btn" />       
        <solid android:color="#00000000" /> 
        <corners android:radius="0dp" /> 
       </shape> 
      </item>   
     </layer-list> 
    </item> 
</selector> 


<color name="topline_btn">#31ffffff</color> 
<color name="bottomline_btn">#31000000</color> 

<color name="blue">#449def</color> 
<color name="blue_end">#2f6699</color> 
0

Mi solución es añadir 9-parche como el último elemento de la capa:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item> 
     <shape> 
      <solid android:color="@color/tab_button_active_layer2" /> 
     </shape> 
    </item> 
    <item android:bottom="@dimen/tab_button_active_bottom_bar_width"> 
     <shape> 
      <solid android:color="@color/tab_button_active_layer1" /> 
     </shape> 
    </item> 
    <!-- 9-patch drawable --> 
    <item android:drawable="@drawable/tab_button_border_top"/> 
</layer-list> 
Cuestiones relacionadas