English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Cos'è Drawable
Prima di tutto, Drawable è una classe astratta che rappresenta un'immagine che può essere disegnata su Canvas, spesso utilizzata come sfondo di una view, con molti tipi di implementazione che completano diverse funzioni. In secondo luogo, Drawable può essere大致mente diviso in queste categorie: immagini, immagini composte da colori. Di solito viene definito tramite xml.
L'inheritance system di Drawable
Classi di implementazione e tag di Drawable
Drawable
Ottieni le dimensioni interne
getIntrinsicHeight, getIntrinsicWidth
- Quando Drawable è composto da immagini, il metodo restituisce le dimensioni dell'immagine
- Quando Drawable è composto da colori, non c'è concetto di larghezza e altezza, viene restituito -1
Variety di Drawable e i loro usi
BitmapDrawable
Utilizzato per visualizzare un'immagine, come nell'esempio di seguito
<?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" />
Proprietà comuni
android:antialias se abilitare l'anti-aliasing
android:dither se abilitare la riduzione del tremolo
android:filter se abilitare l'effetto di filtraggio
android:gravity utilizzato per posizionare l'immagine
android:src id della risorsa immagine
android:tileMode modello di piastrellatura, repeat, mirror, clamp tre
ColorDrawable
Rappresenta un'area di disegno monocromatica, impacchettata con un colore fisso, che disegna un'area monocromatica sullo schermo.
Esempio:
<?xml version="1.0" encoding="utf-8"?> <color xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent"> </color>
Può essere creato anche con il codice
ColorDrawable drawable = new ColorDrawable(int color); // Passare un valore intero di color
NinePatchDrawable
Ecco un'immagine 9-patch, che può essere liberamente scalata in altezza e larghezza senza distorsione
Esempio:
<?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>
Impostare l'area di scala con draw9patch
Le linee nere dirette 1 e 2 nella figura rappresentano il disegno delle linee nere in draw9patch, la sovrapposizione della lunghezza delle linee nere rappresenta l'area che può essere trascinata
La sovrapposizione della lunghezza delle linee nere dirette 3 e 4 nella figura rappresenta l'area di contenuto che può essere riempita
ShapeDrawable
Costruire grafici attraverso i colori, può essere sia grafici a colori puri che grafici con effetti di gradiente. I grafici che possono essere costruiti includono rectangle, oval, ring, line
Esempio di cerchio con effetto di sfumatura:
<?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>
Attenzione: 1、Il valore di Android:angle deve essere un multiplo di 45 2、oval viene utilizzato per disegnare un ellisse, quando la larghezza e l'altezza di size sono uguali, viene disegnato come cerchio
Esempio di cerchio:
<?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 impostato su false, altrimenti non è possibile visualizzare l'effetto desiderato
2、innerRadius è il raggio interno del cerchio, innerRadiusRation è la percentuale del raggio interno rispetto alla larghezza del cerchio, entrambi con innerRadius come principale
3、thickness è la larghezza del cerchio, thicknessRatio è la percentuale di questa larghezza rispetto alla larghezza del cerchio, con thickness come principale
Proprietà comuni
- android:shape la forma da disegnare, rectangle, oval, ring, line
- <stroke> il contorno della forma, con le seguenti proprietà
- android:width il width della linea di contorno
- android:color Colore del contorno
- android:dashGap Larghezza della linea tratteggiata
- android:dashWidth Intervallo tra i segmenti della linea tratteggiata (per disegnare una linea tratteggiata, entrambi gli altri devono essere diversi da 0)
-<solid> Riempimento a colore puro, android:color specifica il colore della shape
- <gradient> Effetto di gradiente, non può essere utilizzato insieme a solid, ha le seguenti proprietà
- android:angle Angolo del gradiente, deve essere un multiplo di 45
- android:startColor Colore di inizio del gradiente
- android:centerColor Colore centrale del gradiente
- android:endColor Colore di fine del gradiente
- android:centerX Coordinate x del punto centrale del gradiente
- android:centerY Coordinate y del punto centrale del gradiente
- android:gradientRadius Raggio del gradiente
- android:type Tipo di gradiente, linear (lineare), sweep (scansione), radial (radiale)
- <corners> Rappresenta gli angoli di un rettangolo (rectangle) e non è applicabile ad altre shape, ha le seguenti proprietà
- android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius Impostano gli angoli rispettivamente per l'angolo superiore sinistro, superiore destro, inferiore sinistro e inferiore destro
- android:radius Imposta un angolo uniforme per i quattro angoli, ha bassa priorità e viene sovrascritto dagli altri quattro attributi
- <size> Le dimensioni della shape, corrispondenti a android:width e android:height
- La shape di default non ha dimensioni, getIntrinsicHeight e getIntrinsicWidth restituiscono -1
- Attraverso size è possibile impostare le dimensioni, ma come sfondo della view viene comunque stirato o ridotto alle dimensioni della view
- <padding> Imposta lo spazio vuoto tra la view che contiene la shape
StateListDrawable
Può essere considerato un selettore di stato, che seleziona l'item corrispondente per visualizzare il drawable attraverso lo stato diverso del view
Esempio:
<?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>
Stati comuni
android:state_pressed quando si preme un view, stato premuto
android:state_checked quando un view viene selezionato, adatto per CheckBox
android:state_selected quando un view viene selezionato
android:state_enabled quando un view è in stato disponibile
android:state_focused quando il view ottiene il fuoco
LayerDrawable
Rappresenta una raccolta di drawable strati, simile al concetto di livelli in Photoshop, dove più drawable vengono messi su diversi strati per creare un effetto di sovrapposizione
Esempio:
<?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>
Avvertenze:
1、layer-list può contenere più item, ognuno dei quali rappresenta un drawable, e l'item aggiunto successivamente copre l'item aggiunto in precedenza
2、di default, tutti i drawable di layer-list vengono scalati fino a view di grandi dimensioni, attraverso l'impostazione android:gravity è possibile regolare l'effetto di scala
3、è possibile impostare le offsetture superiori, inferiori, sinistre e destre, android:top, android:bottom, android:left, android:right
LevelListDrawable
Rappresenta una raccolta di drawable, in cui ogni Drawable ha un livello (level). Impostando diversi livelli, è possibile far scorrere LevelListDrawable a diversi drawable. La gamma di livelli è tra 0 e 10000, android:maxLevel imposta il livello massimo, android:minLevel imposta il livello minimo
Esempio:
<?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>
Attraverso la impostazione di level è possibile commutare tra diversi Drawable, nel codice
//Cambia lo sfondo dell'ImageView in photo1, 35 è tra 30 e 40 iv.setImageLevel(35); //Cambia lo sfondo dell'ImageView in photo0, 15 è tra 10 e 20 iv.setImageLevel(15);
TransitionDrawable
Sottoclasse di LayerDeawable, utilizzata per implementare l'effetto di dissolvenza tra due Drawable
Esempio:
Definizione in file xml
<?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>
Imposta src per l'ImageView, nel codice Java
iv= (ImageView) findViewById(R.id.iv_transition); drawable = (TransitionDrawable) iv.getDrawable(); drawable.startTransition(1000); // Esegue l'effetto di dissolvenza in ingresso e uscita drawable.reverseTransition(1000);
InsetDrawable
includere altri Drawable e mantenere uno spazio specifico intorno a essi
Esempio:
<?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
A seconda del livello, ridurre una Drawable a una certa proporzione, quando il livello è 0 non è visibile, quando il livello è 10000 non c'è effetto di riduzione
Esempio:
<?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%" />
Per visualizzare l'effetto, è necessario impostare il livello maggiore di 0
iv = (ImageView) findViewById(R.id.iv_scale); ScaleDrawable drawable= (ScaleDrawable) iv.getDrawable(); drawable.setLevel(1);
- android:scaleHeight="percentage", android:scaleWidth="percentage", impostare la riduzione delle dimensioni in percentuale rispetto all'originale (100%-percentage)
- Maggiore è il livello, maggiore è la visualizzazione dell'immagine
ClipDrawable
A seconda del proprio livello (level) per tagliare un altro Drawable, la direzione del taglio è determinata da android:clipOrientation e android:gravity. Impostare il livello per tagliare, la dimensione del livello va da 0 a 10000, quando il livello è 0 non viene visualizzato, e quando il livello è 10000 viene visualizzato completamente
definizione 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" />
Cropping through setting level
ImageView iv = (ImageView) findViewById(R.id.iv_clip); ClipDrawable drawable= (ClipDrawable) iv.getDrawable(); drawable.setLevel(5000); // The larger the level set, the smaller the cropping range
Properties
android:clipOrientation, horizontal cropping in horizontal direction, vertical cropping in vertical direction
android:gravity, combined with cropping direction
Custom Drawable
Custom circular 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;
}
}
Custom rectangle Drawable with rounded corners
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();
}
}
Passaggi generali per la creazione di Drawable personalizzati
1. La classe Drawable personalizzata eredita da Drawable
2. Implementa i metodi getOpacity, setColorFilter, setAlpha e altri
3. Esegui il disegno nel metodo onDraw
4. Se il Drawable personalizzato ha una dimensione fissa, è necessario implementare i metodi getIntrinsicWidth, getIntrinsicHeight
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urla.
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.