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

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

Resumo de Conhecimentos Necessários 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.

Drawable inheritance hierarchy

Drawable implementation classes and tags

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

Tipos de Drawable e suas aplicações

BitmapDrawable

Usado para exibir uma imagem, como o exemplo a seguir

<?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" />

propriedades comuns

android:antialias se ativar o efeito de anti-aliasamento
android:dither se ativar o efeito de desacoplamento
android:filter se ativar o efeito de filtragem
android:gravity usado para localizar a imagem
android:src id do recurso de imagem
android:tileMode modo de repetição, repeat, mirror, clamp três

ColorDrawable

Representa uma área de desenho monocromática, envolve uma cor fixa, desenha uma área monocromática no canvas.

示例：

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

Também pode ser criado usando código

ColorDrawable drawable = new ColorDrawable(int color); //Inserir um valor inteiro de color

NinePatchDrawable

isto é9-patch imagem, pode ser ajustada livremente a largura e altura do conteúdo sem distorção

示例：

<?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>

Usar draw9patch define a área de escalonamento

na imagem1,2A direção representa no draw9Desenhar linha preta no patch, a interseção da linha preta é o intervalo que pode ser esticado
na imagem3,4A interseção da长度do linha preta representa a área que pode ser preenchida

ShapeDrawable

Construção de figuras através de cores, pode ser uma figura de cor pura ou uma figura com efeito de gradiente. As figuras que podem ser construídas são rectangle, oval, ring, line

Exemplo de círculo com efeito de gradiente:

<?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:centerX="50%"
  android:centerY="/android:endColor="@color
  colorPrimary"150dp"
  android:gradientRadius="/android:startColor="@color
  colorPrimaryDark" />
 android:type="sweep"
  android:width="260dp"
  <size260dp" />
</shape>

android:height="1注意：45multiplos 2、oval usado para desenhar elípticos, quando a largura e a altura de size forem iguais, será desenhado como um círculo

exemplo de anel:

<?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 definido como false, caso contrário, não será possível exibir o efeito ideal
2、innerRadius raio interno do anel, innerRadiusRation é a taxa do raio interno em relação à largura do anel, os dois com innerRadius como principais
3、thickness largura do anel, thicknessRatio é a taxa de largura deste anel em relação à largura do anel, com thickness como principal

propriedades comuns

- android:shape forma a ser desenhada, rectangle, oval, ring, line
- <stroke> borda da forma, tem as seguintes propriedades
　　　　　　　 - android:width largura da borda
　　　　　　　 - android:color cor da borda
　　　　　　　 - android:dashGap largura do traço do traço
　　　　　　　 - android:dashWidth intervalo do segmento de traço (para traçar traços, os dois últimos não podem ser 0)
-<solid> preenchimento de cor sólida, android:color especifica a cor do shape
- <gradient> efeito de transição, não pode ser usado com solid, tem as seguintes propriedades
　　　　　　　 - android:angle ângulo de transição, deve ser45multiplos
　　　　　　　 - android:startColor cor de início da transição
　　　　　　　 - android:centerColor transição de cor central
　　　　　　　 - android:endColor Cor de fim do gradiente
　　　　　　　 - android:centerX Coordenada横坐标 do ponto central do gradiente
　　　　　　　 - android:centerY Coordenada纵坐标 do ponto central do gradiente
　　　　　　　 - android:gradientRadius Raio do gradiente
　　　　　　　 - android:type Tipo de gradiente, linear (linear), sweep (sweep), radial (radial)
- <corners> Representa os ângulos dos quatro cantos de um retângulo (rectangle), não aplicável a outras formas, com as seguintes propriedades
　　　　　　　 - android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius definem os ângulos dos cantos superior esquerdo, superior direito, inferior esquerdo e inferior direito, respectivamente
　　　　　　　 - android:radius define um ângulo igual para os cantos, com prioridade baixa, será coberto pelos outros quatro atributos
- <size> Largura e altura da forma, correspondendo a android:width, android:height
　　　　　　　 -　 shape padrão não tem largura e altura, getIntrinsicHeight, getIntrinsicWidth retornam-1
　　　　　　　 -　 Pode definir a largura e a altura através do size, mas como background da view, ainda será esticado ou reduzido para o tamanho da view
- <padding> Define o espaçamento vazio da view que contém a forma

StateListDrawable

Pode ser considerado um seletor de estado, que escolhe o item correspondente no drawable através de diferentes estados da 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 comuns

android:state_pressed - Quando uma view é pressionada, estado de pressão
android:state_checked - Quando uma view é marcada, aplicável para CheckBox
android:state_selected - Quando uma view é selecionada
android:state_enabled - Quando uma view está disponível
android:state_focused - Quando a view obtém o foco

LayerDeawable

LayerDeawable

示例：

<?xml version="1.0" encoding="utf-8"?>
Representa uma coleção de drawable em camadas, semelhante ao conceito de camadas no Photoshop, onde vários drawable são colocados em diferentes camadas para formar um efeito de sobreposição-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/noite" />
 <item
  android:drawable="@mipmap/photo6"
  <layer />
</android:gravity="center"-list>

layer

1atenção:-list pode conter vários itens, onde cada item representa um drawable, e o item adicionado mais recentemente cobre o item adicionado anteriormente
2por padrão, layer-todos os drawable no list serão escalados para o tamanho do view, através da configuração android:gravity pode ajustar o efeito de escalonamento
3pode definir a offset de cima, baixo, esquerda e direita, android:top, android:bottom, android:left, android:right

LevelListDrawable

Representa uma coleção de drawable, onde cada drawable tem um nível (level). Através da configuração de diferentes níveis, é possível alternar o LevelListDrawable para diferentes drawable. O intervalo de nível está entre 0~10000 entre, android:maxLevel define o level máximo, android:minLevel define o level 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>

Através de configuração de level, é possível alternar entre diferentes Drawable, no código

 //Alterar o fundo do ImageView para photo1, 35 no30~4entre 0
 iv.setImageLevel(35); 
 //Alterar o fundo do ImageView para photo0, 15no10~2entre 0
 iv.setImageLevel(15);

TransitionDrawable

Subclasse de LayerDeawable, usada para implementar o efeito de suavização de entrada e saída de dois Drawable
示例：

arquivo xml definido

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

Definir src para ImageView, no 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/noite"
 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/noite"
 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" />

Através de configuração de nível para recorte

 ImageView iv = (ImageView) findViewById(R.id.iv_clip);
 ClipDrawable drawable= (ClipDrawable) iv.getDrawable();
 drawable.setLevel(5000); // O nível configurado maior, a faixa de recorte menor

Atributos

android:clipOrientation, horizontal para recorte horizontal, vertical para recorte vertical
android:gravity, combinado com a direção de recorte

Customizável Drawable

Customizável Drawable circular

package 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 radius;
 private int mWidth;
 private int mHeight;
 private Paint mPaint;
 @Override
 public void draw(Canvas canvas) {
  canvas.drawCircle(mWidth/2,mHeight/2,radius,mPaint);
 }
 public CircleDrawable(Bitmap bitmap) {
  radius = 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() {
  return mHeight;
 }
 @Override
 public int getIntrinsicWidth() {
  return mWidth;
 }
}

Customizável retângulo com cantos arredondados Drawable

package 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();
 }
}

Passos gerais para criar um Drawable personalizado

　1A classe Drawable personalizado herda de Drawable
　2Implementar métodos como getOpacity, setColorFilter, setAlpha
　3Desenhar no método onDraw
　4Se o Drawable personalizado tiver um tamanho fixo, é necessário implementar os métodos getIntrinsicWidth e getIntrinsicHeight

Isso é tudo o que há no artigo. Espero que ajude na sua aprendizagem e que você apoie o tutorial Ganhador.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao autor original, foi carregado por usuários da Internet de forma voluntária, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais. Se você encontrar conteúdo suspeito de infringir direitos autorais, por favor, envie um e-mail para: notice#w3Aviso: Ao denunciar, por favor, substitua # por @ no e-mail e forneça provas relevantes. Caso seja confirmado, o conteúdo suspeito de infringir direitos autorais será imediatamente removido deste site.

Tutorial Básico
Você Também Pode Gostar