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

  1. Position
  2. Startseite
  3. Erfahrungshinweise
  4. Haupttext

Kurzübersicht über die notwendigen Kenntnisse von Android Drawable

Was ist Drawable

Zunächst ist Drawable eine abstrakte Klasse, die darstellt, dass Bilder in einem Canvas gezeichnet werden können und oft als Hintergrund eines Views verwendet wird. Es gibt verschiedene Implementierungsklassen, die verschiedene Funktionen erfüllen. Darüber hinaus kann Drawable grob in diese Kategorien eingeteilt werden: Bilder, Bilder, die aus Farben bestehen. Sie werden in der Regel in XML definiert.

Vererbungshierarchie von Drawable

Implementierungsklassen und Tags von Drawable

Drawable

Ermittlung der internen Breite und Höhe

　　　 getIntrinsicHeight, getIntrinsicWidth
　　　 - Wenn ein Drawable aus Bildern besteht, gibt die Methode die Breite und Höhe des Bildes zurück
　　　 -　 Wenn ein Drawable aus Farben besteht, gibt es keine Konzepte von Breite und Höhe, es wird zurückgegeben-1

Kategorien von Drawable und ihre Verwendung

BitmapDrawable

Wird verwendet, um ein Bild anzuzeigen, wie im folgenden Beispiel

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

gebräuchliche Eigenschaften

android:antialias Ob der Anti-Aliasing aktiviert wird
android:dither Ob der Rauschunterdrückung aktiviert wird
android:filter Ob der Filtereffekt aktiviert wird
android:gravity Wird verwendet, um das Bild zu positionieren
android:src Bildressourcen-ID
android:tileMode Verkleinerungsmuster, repeat、mirror、clamp drei Arten

ColorDrawable

Stellt eine einfache, einzefärbbare Fläche dar, die einen festen Farbton umschließt. Ein Einzelfarbe wird auf der Leinwand gezeichnet.

示例：

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

Kann auch mit Code erstellt werden

ColorDrawable drawable = new ColorDrawable(int color); //Ein Integer-Wert für die Farbe wird übergeben

NinePatchDrawable

d.h.9-patch-Bild, das sich auf das Inhalt frei skalieren und vergrößern lassen kann, ohne dass Verzerrungen entstehen

示例：

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

Mit draw9patch die Skalierbereich festlegt

In der Abbildung1,2Die Richtung zeigt, in der draw9In der patch gezeichnete schwarze Linie, das Intersection der Länge der schwarzen Linie ist der Bereich, der sich dehnen lässt
In der Abbildung3,4Die Länge des schwarzen Linienintersection in der Richtung zeigt das Bereich, der gefüllt werden kann

ShapeDrawable

图形可以通过颜色来构建，可以是纯色图形，也可以是具有渐变效果的图形。可以构建的图形有rectangle、oval、ring、line

Ein Beispiel für einen Kreis mit Gradientenwirkung:

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

Beachtung:1、Android:angle muss sein45Malzahl 2、oval wird verwendet, um Ellipsen zu zeichnen, wenn die Breite und Höhe von size gleich sind, wird ein Kreis gezeichnet

Beispiel für den Ring:

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

Anmerkung:
1、android:useLevel auf false gesetzt, andernfalls kann das ideale Effekt nicht angezeigt werden
2、innerRadius ist der innere Radius des Rings, innerRadiusRation ist das Verhältnis des inneren Radius zur Breite des Rings, wobei innerRadius die Hauptrolle spielt
3、thickness ist die Breite des Rings, thicknessRatio ist der Verhältnis der Breite zu der des Rings, wobei thickness die Hauptrolle spielt

gebräuchliche Eigenschaften

- android:shape die zu zeichnende Form, rectangle, oval, ring, line
- <stroke> die Umrandung des shapes, hat folgende Eigenschaften
　　　　　　　 - android:width die Breite der Umrandung
　　　　　　　 - android:color die Farbe der Umrandung
　　　　　　　 - android:dashGap die Breite der Strichpunktlinie
　　　　　　　 - android:dashWidth der Abstand der Linienabschnitte beim Zeichnen einer Strichpunktlinie (um eine Strichpunktlinie zu zeichnen, dürfen beide Werte nicht 0 sein)
-<solid> Füllung mit reinem Farbton, android:color legt die Farbe des shapes fest
- <gradient> Verlaufsänderungseffekt, kann nicht mit solid gleichzeitig verwendet werden, hat folgende Eigenschaften
　　　　　　　 - android:angle der Winkel der Verlaufsänderung, muss sein45Malzahl
　　　　　　　 - android:startColor der Anfangsfarbe der Verlaufsänderung
　　　　　　　 - android:centerColor die mittlere Farbe der Verlaufsänderung
　　　　　　　 - android:endColor Farbende des Farbverlaufs
　　　　　　　 - android:centerX Querachse des Zentrums des Farbverlaufs
　　　　　　　 - android:centerY Längsachse des Zentrums des Farbverlaufs
　　　　　　　 - android:gradientRadius Farbverlaufsradius
　　　　　　　 - android:type Typ der Farbverlauf, linear (linear), sweep (sweep), radial (radial)
- <corners> Stellt die Ecken des Rechtecks (rectangle) dar, ist nicht für andere Shape geeignet, hat die folgenden Eigenschaften
　　　　　　　 - android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius setzen den Winkel für die linken oberen, rechten oberen, linken unteren und rechten unteren Ecken
　　　　　　　 - android:radius Setzt den gleichen Winkel für die Ecken, hat eine niedrigere Priorität und wird von den anderen vier Eigenschaften übergangen
- <size> Breite und Höhe der Shape, entspricht android:width, android:height
　　　　　　　 -　 shape hat standardmäßig keine Breite und Höhe, getIntrinsicHeight, getIntrinsicWidth wird zurückgegeben-1
　　　　　　　 -　 Durch size kann die Breite und Höhe eingestellt werden, aber als View-Hintergrund wird er dennoch gestreckt oder verkleinert auf die Größe des Views
- <padding> Setzt die Leerzeichenabstände des View, das die Shape enthält

StateListDrawable

Kann als Zustandsauswahl-Selector betrachtet werden, der durch verschiedene Zustände des Views die entsprechenden drawable in den Items anzeigt

示例：

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

Gängige Zustände

android:state_pressed - Wenn ein View gedrückt wird, Zustand des Drucks
android:state_checked - Wenn ein View ausgewählt ist, gilt dies für CheckBox
android:state_selected - Wenn ein View ausgewählt wird
android:state_enabled - Wenn ein View im Verfügbarkeitsmodus ist
android:state_focused - Wenn das View-Fenster den Fokus erhält

LayerDeawable

stellt eine Art von SchichtDrawable-Sammlung dar, ähnlich wie das Konzept von Schichten in Photoshop, mehrere drawable in verschiedenen Ebenen platzieren, um eine叠加effekt zu erzeugen

示例：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/night" />
 <item
  android:drawable="@mipmap/photo6"
  android:gravity="center" />
</layer-list>

Hinweise:

1、layer-list kann mehrere item enthalten, jeder item stellt einen drawable dar, und der nach hinzugefügte item wird auf den zuvor hinzugefügten item gelegt
2、standardmäßig, layer-list alle drawable werden auf die Größe der view skaliert, durch die Einstellung android:gravity kann das Skalungseffekt reguliert werden
3können die Ausrichtungspositionen oben, unten, links und rechts eingestellt werden, android:top, android:bottom, android:left, android:right

LevelListDrawable

stellt eine Sammlung von Drawable dar, wobei jeder Drawable eine Stufe (Level) hat. Durch die Einstellung verschiedener Stufen kann LevelListDrawable auf verschiedene Drawable umgeschaltet werden. Der Bereich der Stufe liegt zwischen 0~10000 zwischen, android:maxLevel setzt den höchsten Level, android:minLevel setzt den niedrigsten Level
示例：

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

Durch die Einstellung des Levels können verschiedene Drawable umgeschaltet werden, im Code

 //Wechsel die Hintergrundfarbe des ImageView zu photo1, 35 in30~4zwischen 0
 iv.setImageLevel(35); 
 //Wechsel die Hintergrundfarbe des ImageView zu photo0, 15in10~2zwischen 0
 iv.setImageLevel(15);

TransitionDrawable

eine Unterklasse von LayerDeawable, die zur Implementierung des Übergangs vonDrawable zur Verfügung steht, um ein Ein- und Ausblenden-Effekt zu erzeugen
示例：

xml-Datei definiert

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

Setze die src für ImageView, im Java-Code

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

Durch Einstellen des Levels wird geschnitten

 ImageView iv = (ImageView) findViewById(R.id.iv_clip);
 ClipDrawable drawable= (ClipDrawable) iv.getDrawable();
 drawable.setLevel(5000); // Je größer der gesetzte Level, desto kleiner ist der Schnittbereich

Eigenschaften

android:clipOrientation, horizontaler Schnitt in der horizontalen Richtung, vertikaler Schnitt in der vertikalen Richtung
android:gravity, zusammen mit dem Schnittrichtung

Erstellen Sie ein Drawable

Erstellen Sie ein runde 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.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;
 }
}

Erstellen Sie ein rechteckiges Drawable mit abgerundeten Ecken

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;
/**
 * Erstellt von pecu am 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();
 }
}

Allgemeine Schritte zur Erstellung eines angepassten Drawable

　1Das angepasste Drawable-Klasse erbt von Drawable
　2Die Methoden getOpacity, setColorFilter und setAlpha müssen implementiert werden
　3Die Zeichnung erfolgt in der Methode onDraw
　4Wenn ein angepasstes Drawable eine feste Größe hat, müssen die Methoden getIntrinsicWidth und getIntrinsicHeight implementiert werden

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und dass Sie die呐喊教程 unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich relevante Inhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3Erklärung: Wenn Sie eine Beschwerde einreichen möchten, ersetzen Sie bitte # durch @ und fügen Sie relevante Beweise bei. Bei nachgewiesener Urheberrechtsverletzung wird der fragliche Inhalt sofort gelöscht.

Grundlegende Anleitung
Möchten Sie auch