English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home page
  3. Experience notes
  4. Main text

Resumen de conocimientos necesarios para Android Drawable

What is Drawable

Firstly, Drawable is an abstract class, representing images that can be drawn on Canvas, often used as the background of a view, with multiple implementation classes to complete different functions. Secondly, Drawable can be roughly divided into these categories: images, images composed of colors. Generally defined using xml.

Inheritance system of Drawable

Implementation classes and tags of Drawable

Drawable

Obtaining internal width and height

　　　 getIntrinsicHeight, getIntrinsicWidth
　　　 - When the Drawable is composed of images, the method returns the width and height of the image
　　　 -　 When the Drawable is composed of colors, there is no concept of width and height, and it returns-1

Todos los Drawable y su uso

BitmapDrawable

Se utiliza para mostrar una imagen, como el siguiente ejemplo

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
 android:antialias="true"
 android:dither="true"
 android:filter="true"
 android:gravity="top"
 android:src="@mipmap/girl"
 android:tileMode="repeat" />

propiedades comunes

android:antialias si se abre el antialiasing
android:dither si se abre el anti-tremblor
android:filter si se abre el efecto de filtrado
android:gravity se utiliza para ubicar la imagen
android:src id de recurso de imagen
android:tileMode modo de mosaico, repeat, mirror, clamp tres

ColorDrawable

Representa un área de dibujo monocromática, que envuelve un color fijo, y dibuja un área monocromática en el lienzo.

示例：

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

También se puede crear con código

ColorDrawable drawable = new ColorDrawable(int color); //Se transmite un valor entero de color

NinePatchDrawable

es decir9-patch gráfico, que puede ajustar libremente el ancho y la altura según el contenido sin distorsión

示例：

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
 android:dither="true"
 android:filter="true"
 android:src="@color/colorAccent">
</nine-patch>

usando draw9se establece el área de escalado en patch

en la imagen1、2La dirección indica en draw9Se dibuja una línea negra en el parche, y la longitud de la intersección de la línea negra es el rango que se puede estirar
en la imagen3、4La longitud de la línea negra en la dirección representa la área que puede estar rellena

ShapeDrawable

Se puede construir gráficos mediante colores, ya sea gráficos de un solo color o gráficos con efecto de desvanecimiento. Los gráficos que se pueden construir son rectangle, oval, ring, line

Ejemplo de círculo con efecto de desvanecimiento:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <gradient
  android:angle="45"
  android:centerColor="@color/colorAccent"
  android:centerX="50%"
  android:centerY="50%"
  android:endColor="@color/colorPrimary"
  android:gradientRadius="150dp"
  android:startColor="@color/colorPrimaryDark"
  android:type="sweep" />
 <size
  android:width="260dp"
  android:height="260dp" />
</shape>

Nota:1、el valor de Android:angle debe ser45multiplo 2、oval se utiliza para dibujar el óvalo, cuando el ancho y la altura de size son iguales, se dibuja como un círculo

Ejemplo de anillo circular:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:innerRadius="100dp"
 android:shape="ring"
 android:thickness="10dp"
 android:useLevel="false" >
 <stroke
  android:width="10dp"
  android:color="@color/colorAccent" />
</shape>

Nota:
1、android:useLevel establecido en false, de lo contrario no se puede mostrar el efecto ideal
2、innerRadius el radio interno del anillo, innerRadiusRation la proporción del radio interno en el ancho del anillo, ambos se toman innerRadius como principales
3、thickness el ancho del anillo, thicknessRatio la proporción de este ancho en el ancho del anillo, se toma thickness como principal

propiedades comunes

- android:shape la forma a dibujar, rectangle, oval, ring, line
- <stroke> el contorno de la forma, tiene las siguientes propiedades
　　　　　　　 - android:width el ancho del contorno
　　　　　　　 - android:color el color del contorno
　　　　　　　 - android:dashGap el ancho de la línea punteada
　　　　　　　 - android:dashWidth el intervalo de segmentos de la línea punteada (para dibujar una línea punteada, los dos últimos no pueden ser 0)
-<solid> relleno de color puro, android:color especifica el color de shape
- <gradient> el efecto de transición gradual, no se puede usar junto con solid, tiene las siguientes propiedades
　　　　　　　 - android:angle el ángulo de la transición gradual, debe ser45multiplo
　　　　　　　 - android:startColor el color de inicio de la transición gradual
　　　　　　　 - android:centerColor el color intermedio de la transición gradual
　　　　　　　 - android:endColor Color de finalización del gradiente
　　　　　　　 - android:centerX Coordenada x del punto central del gradiente
　　　　　　　 - android:centerY Coordenada y del punto central del gradiente
　　　　　　　 - android:gradientRadius Radio del gradiente
　　　　　　　 - android:type Tipo de gradiente, linear (lineal), sweep (visión de amanecer), radial (radial)
- <corners> Representa los ángulos de los cuatro ángulos del rectángulo (rectangle), no se aplica a otros shape, tiene los siguientes atributos
　　　　　　　 - android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius Respectivamente, establecen los ángulos de los cuatro ángulos superior izquierdo, superior derecho, inferior izquierdo, inferior derecho
　　　　　　　 - android:radius Establece el ángulo de los cuatro ángulos, prioridad baja, se cubre por otros cuatro atributos
- <size> Anchura y altura de shape, correspondiente a android:width, android:height
　　　　　　　 -　 shape por defecto no tiene anchura y altura, getIntrinsicHeight, getIntrinsicWidth devuelven-1
　　　　　　　 -　 A través del tamaño se puede establecer su anchura y altura, pero como fondo del view aún se estira o reduce al tamaño del view
- <padding> Establece el espacio vacío de contención del view de forma

StateListDrawable

Se puede considerar un selector de estado, que selecciona el item correspondiente en el drawable según diferentes estados del view

示例：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@color/colorPrimaryDark" android:state_pressed="false"></item>
 <item android:drawable="@color/<colorAccent" android:state_pressed="true"></item>
</selector>

Estados comunes

android:state_pressed - Estado de pulsado cuando se presiona un view
android:state_checked - Cuando un view es seleccionado, aplicable a CheckBox
android:state_selected - Cuando un view es seleccionado
android:state_enabled - Cuando un view está en estado de disponibilidad
android:state_focused - Cuando el view obtiene el enfoque

LayerDeawable

表示的是一种分层的的Drawable集合，类似于ps中的图层的概念，将多个drawable放在不同的层上面形成一种叠加的效果

示例：

<?xml version="1.0" encoding="utf-8"?>
LayerDeawable-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/noche" />
 <item
  android:drawable="@mipmap/photo6"
  representa una colección de drawable de capas, similar al concepto de capas en ps, coloca varios drawable en diferentes capas para formar un efecto de superposición />
</<layer-list>

android:gravity="center"

1layer-notas importantes:
2list puede contener varios item, cada item representa un drawable, y el item agregado después cubrirá al item agregado anteriormente-todos los drawable en list se ajustarán al tamaño de la vista, a través de la configuración de android:gravity se puede ajustar el efecto de escalado, por defecto, layer
3puede establecer la cantidad de desplazamiento superior, inferior, izquierdo y derecho, android:top, android:bottom, android:left, android:right

LevelListDrawable

representa una colección de drawable, cada drawable en la colección tiene un nivel (level), al establecer diferentes niveles, se puede cambiar LevelListDrawable a diferentes drawable. El rango de nivel está entre 0~10entre 000, android:maxLevel establece el nivel máximo, android:minLevel establece el nivel mínimo
示例：

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:drawable="@mipmap/photo0"
  android:maxLevel="20"
  android:minLevel="10" />
 <item
  android:drawable="@mipmap/photo1"
  android:maxLevel="40"
  android:minLevel="30" />
</level-list>

A través de la configuración de level se puede cambiar entre diferentes Drawable, en el código

 //Cambiar el fondo de ImageView a photo1, 35 en30~4entre 0
 iv.setImageLevel(35); 
 //Cambiar el fondo de ImageView a photo0, 15en10~2entre 0
 iv.setImageLevel(15);

TransitionDrawable

subclase de LayerDeawable, utilizada para implementar el efecto de transición de desvanecimiento entre dos Drawable
示例：

definición de archivo xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/noche" />
 <item android:drawable="@mipmap/photo6" />
</transition>

Establecer src para ImageView, en el código java

 iv = (ImageView) findViewById(R.id.iv_transition);
 drawable = (TransitionDrawable) iv.getDrawable();
 drawable.startTransition(1000); // 实现淡入淡出效果
 drawable.reverseTransition(1000);

InsetDrawable

嵌入其他Drawable，并可以在四周保留一定的间距
示例：

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@mipmap/photo6"
 android:inset="20dp">
</inset>

ScaleDrawable

根据等级将一个Drawable缩放到一定的比例，当level为0时不可见，当level为10000时无缩放效果
示例：

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@mipmap/noche"
 android:scaleGravity="center"
 android:scaleHeight="50%"
 android:scaleWidth="50%" />

要显示出效果，必须设置level大于0

 iv = (ImageView) findViewById(R.id.iv_scale);
 ScaleDrawable drawable= (ScaleDrawable) iv.getDrawable();
 drawable.setLevel(1);

- android:scaleHeight="percentage"，android:scaleWidth="percentage",设置宽高缩放为原来的比例为（100%-percentage）
- 设置level越大，图像显示越大

ClipDrawable

根据自己的等级（level）来对另一个Drawable进行裁剪，裁剪的方向由android:clipOrientation、android:gravity共同决定。设置level进行裁剪，level的大小从0到10000，level为0时完全不显示，为10000时完全显示
xml定义

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
 android:clipOrientation="horizontal"
 android:drawable="@mipmap/noche"
 android:gravity="right"></clip>

 <ImageView
  android:id="@"+id/iv_clip"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/drawable_clip" />

A través de la configuración de nivel para recortar

 ImageView iv = (ImageView) findViewById(R.id.iv_clip);
 ClipDrawable drawable= (ClipDrawable) iv.getDrawable();
 drawable.setLevel(5000); // El rango de recorte es más pequeño a medida que aumenta el nivel configurado

Atributos

android:clipOrientation, horizontal para recortar en dirección horizontal, vertical para recortar en dirección vertical
android:gravity, junto con la dirección de recorte

Drawable personalizado

Drawable circular personalizado

paquete com.yu.drawablelearing;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
public class CircleDrawable extends Drawable{
 private int radio;
 private int mWidth;
 private int mHeight;
 private Paint mPaint;
 @Override
 public void draw(Canvas canvas) {
  canvas.drawCircle(mWidth/2,mHeight/2,radio,mPaint);
 }
 public CircleDrawable(Bitmap bitmap) {
  radio = Math.min(bitmap.getWidth(), bitmap.getHeight());/2;
  mWidth = bitmap.getWidth();
  mHeight = bitmap.getHeight();
  BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint = new Paint();
  mPaint.setShader(bitmapShader);
  mPaint.setAntiAlias(true);
 }
 @Override
 public void setAlpha(int alpha) {
  mPaint.setAlpha(alpha);
  invalidateSelf();
 }
 @Override
 public void setColorFilter(ColorFilter colorFilter) {
  mPaint.setColorFilter(colorFilter);
  invalidateSelf();
 }
 @Override
 public int getOpacity() {
  return PixelFormat.TRANSLUCENT;
 }
 @Override
 public int getIntrinsicHeight() {
  devolver mHeight;
 }
 @Override
 public int getIntrinsicWidth() {
  devolver mWidth;
 }
}

Drawable de rectángulo con esquinas redondas personalizado

paquete com.yu.drawablelearing;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
/**
 * Created by pecu on 2016/08/24.
 */
public class RoundRectangleDrawable extends Drawable {
 private RectF rectF;
 private Paint mPaint;
 Bitmap mBitmap;
 @Override
 public void draw(Canvas canvas) {
  canvas.drawRoundRect(rectF, mBitmap.getWidth()/6,mBitmap.getHeight()/6, mPaint);
 }
 public RoundRectangleDrawable(Bitmap bitmap) {
  mBitmap = bitmap;
  mPaint = new Paint();
  BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint.setAntiAlias(true);
  mPaint.setShader(bitmapShader);
 }
 @Override
 public void setAlpha(int alpha) {
  mPaint.setAlpha(alpha);
  invalidateSelf();
 }
 @Override
 public void setColorFilter(ColorFilter colorFilter) {
  mPaint.setColorFilter(colorFilter);
  invalidateSelf();
 }
 @Override
 public void setBounds(int left, int top, int right, int bottom) {
  super.setBounds(left, top, right, bottom);
  rectF = new RectF(left, top, right, bottom);
 }
 @Override
 public int getOpacity() {
  return PixelFormat.TRANSLUCENT;
 }
 @Override
 public int getIntrinsicWidth() {
  return mBitmap.getWidth();
 }
 @Override
 public int getIntrinsicHeight() {
  return mBitmap.getHeight();
 }
}

自定义Drawable的一般步骤

　1自定义Drawable类继承自Drawable
　2实现getOpacity，setColorFilter，setAlpha等方法
　3在onDraw方法中进行绘制
　4Si el Drawable personalizado tiene un tamaño fijo,则需要实现getIntrinsicWidth、getIntrinsicHeight方法

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos apoyen a la tutorial de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.3Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos
Te gustará