2012-08-28 19 views
53

Estoy pasando por un ejemplo de prueba. Donde por alguna Fondo de la imagen que están utilizando gradiente, el código es el siguienteen el gradiente de Android

<?xml version="1.0" encoding="utf-8"?> 


    <shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient 
     android:startColor="#ff0000" 
     android:centerColor="#00ff00" 
     android:endColor="#0000ff" 
     android:angle="180"/> 
    <corners android:radius="5dp" /> 
    </shape> 

en el xml de arriba no he tenido angle atributo. pero cuando cambio el valor de angle ligeramente el patrón se inclina. ¿Alguien me puede explicar exactamente cómo funciona ........... :)

Respuesta

120

Degradado básicamente representa la variación en el espacio (en una dirección) de cualquier cantidad. Con color, representa la variación de la intensidad del color en una dirección representada por el ángulo. Éstos son algunos diagramas para representar a este concepto:
enter image description here

Aquí la figura muestra la variación de color en la dirección horizontal (ángulo se establece 0). código
XML:

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <gradient 
     android:startColor="#000000" 
     android:angle="0"/> 
    </shape> 

enter image description here

Aquí la figura muestra la variación de color en la dirección horizontal (ángulo está ajustado 90).
código XML:

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<gradient 
    android:startColor="#000000" 
    android:angle="90"/> 
</shape> 

También se puede utilizar como color de inicio, centro y fin colores. El código que adjuntó contiene todos estos elementos.

+17

Gracias por respuesta Karn, pero una cosa que encontraron que puedo dar sólo múltiplos de 45 en atributo ángulo, distintos de los que se bloquea es decir, 20, 20, 50 etc –

+0

Hay muchas maneras en las que gradiente puede ser expresado Aquí estamos usando un gradiente lineal (pendiente a lo largo de una pendiente en línea recta m = (y-y1)/(x-x1)). Cuando es múltiplo de 45, la variación en xey es la misma. Puede ser la causa de esta razón. No sé mucho. – karn

+4

¡Excelente uso de la ilustración para explicar esto! – Ralphleon

3

Especifica un degradado de color para la forma. Atributos:

android: angle Entero. El ángulo para el gradiente, en grados. 0 es de izquierda a derecha, 90 es de abajo hacia arriba. Debe ser un múltiplo de 45. El valor predeterminado es 0.

Parece que la descripción en la documentación se contradice con la respuesta de karn?

Puede encontrar más detalles en el documentation

4

Es posible que desee crear gradiente diagonal desde código. Es mucho más fácil y tienes muchas opciones abiertas desde allí. Este fragmento me ayudó

public void SetGradient(View view) { 
     GradientDrawable gd = new GradientDrawable(
       GradientDrawable.Orientation.TL_BR, 
       new int[]{0xFF141a24, 0xFF293f49, 0xFF72554c}); 
     view.setBackground(gd); 
    } 

direcciones disponibles de la clase GradientDrawable

/*public enum Orientation { 
     *//** draw the gradient from the top to the bottom *//* 
     TOP_BOTTOM, 
     *//** draw the gradient from the top-right to the bottom-left *//* 
     TR_BL, 
     *//** draw the gradient from the right to the left *//* 
     RIGHT_LEFT, 
     *//** draw the gradient from the bottom-right to the top-left *//* 
     BR_TL, 
     *//** draw the gradient from the bottom to the top *//* 
     BOTTOM_TOP, 
     *//** draw the gradient from the bottom-left to the top-right *//* 
     BL_TR, 
     *//** draw the gradient from the left to the right *//* 
     LEFT_RIGHT, 
     *//** draw the gradient from the top-left to the bottom-right *//* 
     TL_BR, 
    }*/ 

y se llama al método de onCreate o onCreateView en el fragmento y pasan vista padre (en mi caso).

@Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     View view = inflater.inflate(R.layout.dialog_view_parent, container);   
     ... 

     SetGradient(view); 

     return view; 
    }