Résumé de 13 Drawables dans Android Partie 1
Introduction à cette section :
À partir de cette section, nous apprendrons quelques connaissances de base du dessin et de l'animation sous Android, et préparerons la personnalisation de nos pièces avancées. Poser les bases! Dans la première section, jetons un coup d’œil à Drawable sur Android ! Android nous propose jusqu'à 13 types de Drawable, dans cette section nous allons le dessiner un par un !
Remarques sur l'utilisation des ressources Drawable
- Drawable est divisé en deux types : L'une d'entre elles est nos ressources d'images ordinaires Dans Android Studio, nous les plaçons généralement dans le répertoire res/mipmap. C’est différent de l’Eclipse précédente ! De plus, si on passe le projet en mode projet Android, on peut directement Déposez simplement l'image dans le répertoire mipmap, et AS la classera automatiquement en hdpi, xhdpi... ! L'autre est les ressources Drawable sous forme de XML écrites par nos soins. Nous les mettons généralement dans le répertoire res/drawable. Ensuite, comme le bouton le plus courant, cliquez sur le sélecteur de commutation d'arrière-plan !
- En XML, on peut définir directement Drawable via @mipmap ou @drawable Par exemple : android:background = "@mipmap/iv_icon_zhu" / "@drawable/btn_back_selctor" Dans le code Java, nous pouvons obtenir des ressources dessinables via getDrawable (R.mipmap.xxx) de Resource. Si nous définissons l'arrière-plan d'un certain contrôle, tel que ImageView, nous pouvons appeler directement control.getDrawale() de la même manière. Des objets dessinables peuvent être obtenus !
- Le nom de la ressource dans le drawable sous Android a des restrictions, il doit être : [a-z0-9_.] (c'est-à-dire : il ne peut être qu'alphanumérique et et . ), Et il ne peut pas commencer par un nombre, sinon la compilation signalera une erreur : Nom de fichier invalide : doit contenir uniquement [a-z0-9.] ! Minuscule ! ! ! ! minuscule ! ! ! minuscule ! ——Dites les choses importantes trois fois ~
D'accord, c'est probablement ce à quoi vous devez faire attention. Découvrons maintenant les 13 types de Drawables qui nous sont fournis dans Android !
1.ColorDrawable
Le type le plus simple de Drawable, lorsque nous dessinons ColorDrawable sur Canvas (toile), Une couleur fixe sera utilisée pour remplir le Paint, puis une zone monochrome sera dessinée sur la toile
1). ColorDrawable est défini en Java :
ColorDrawable drawable = new ColorDrawable(0xffff2200); txtShow.setBackground(drawable);
2) . Définissez ColorDrawable en xml :
<?xml version="1.0" encoding="utf-8"?> <color xmlns:android="http://schemas.android.com/apk/res/android" android:color="#FF0000"/>
Bien sûr, l'utilisation ci-dessus n'est pas très utile. Le plus souvent, nous créons un color.xml dans le répertoire res/values. puis écrivez-y les valeurs de couleur à utiliser et obtenez les valeurs correspondantes via @color si nécessaire, par exemple :
3). Créez un fichier color.xml
., tel que :
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="material_grey_100">#fff5f5f5</color> <color name="material_grey_300">#ffe0e0e0</color> <color name="material_grey_50">#fffafafa</color> <color name="material_grey_600">#ff757575</color> <color name="material_grey_800">#ff424242</color> <color name="material_grey_850">#ff303030</color> <color name="material_grey_900">#ff212121</color></resources>
Ensuite, si c'est dans un fichier XML, nous pouvons obtenir la valeur de couleur correspondante via @color/xxx Si c'est en Java :
int mycolor = getResources().getColor(R.color.mycolor); btn.setBackgroundColor(mycolor);
ps : Une autre chose à noter est que si on définit directement la valeur de couleur en Java, il faut ajouter 0x, et la transparence ne peut pas manquer :
int mycolor = 0xff123456; btn.setBackgroundColor(mycolor);
4). Utilisez la couleur définie par le système :
Par exemple : NOIR (noir), BLEU (bleu), CYAN (cyan), GRIS (gris), VERT (vert), ROUGE ( rouge), ÉCRIRE (blanc), JAUNE (jaune) ! Utilisation : btn.setBackgroundColor(Color.BLUE);Vous pouvez également obtenir la couleur du système et la définir :
int getcolor = Resources.getSystem().getColor(android.R.color.holo_green_light); btn.setBackgroundColor(getcolor);
Utiliser en XML : android:background="../ style/images /black"
5). Utilisez la méthode statique argb pour définir la couleur :
Android utilise des données de type int pour représenter la valeur de couleur, généralement hexadécimal, c'est-à-dire commençant par 0x, La définition de la valeur de couleur est définie par l'alpha de transparence et les trois couleurs primaires du RVB (rouge, vert et bleu), commençant par "#", suivi de :
Transparence-Rouge-Vert-Bleu;par exemple :# RGB #ARGB #RRGGBB #AARRGGBB
Chaque élément est représenté par un octet (8 bits), donc la plage de valeurs est de 0 à 255. Vous pouvez ignorer la transparence lors de la définition de la couleur en XML. Mais si vous êtes en code Java, vous devez indiquer clairement la valeur de la transparence. Si vous l'omettez, cela signifie une transparence totale. Cela n'aura aucun effet ~ Par exemple : bien que 0xFF0000 signifie rouge, si vous l'écrivez directement comme ceci, il n'y aura rien d'autre. À la place, vous devriez l'écrire comme ceci : 0xFFFF0000, rappelez-vous le code Java pour définir la valeur de couleur, vous devez ajouter de la transparence devant~ Exemple : (Les paramètres sont : transparence, valeur rouge, valeur verte, valeur bleue)txtShow.setBackgroundColor(Color.argb(0xff, 0x00, 0x00, 0x00));
2.NiewPatchDrawable
est l'image .9 Nous avons détaillé comment jouer avec les images 1.6.9 (Nine Sisters) dans la section précédente. Laissez-moi vous expliquer comment réaliser des images .9 ! Android FrameWork utilise efficacement Algorithme d'optimisation graphique, nous pouvons réaliser un étirement adaptatif de l'image sans aucun traitement spécial ~ De plus, lorsque vous utilisez AS, veuillez faire attention aux points suivants :
- 1. L'image du point 9 ne peut pas être placée dans le répertoire mipmap, mais doit être placée dans le répertoire drawable !
- 2. L'image .9 dans AS doit avoir des lignes noires, sinon la compilation ne passera pas. Ce matin, mon cousin Ajun a dit dans le groupe. L'artiste de son entreprise lui a donné une image .9 sans lignes noires, disant qu'elle avait été réalisée à l'aide d'un certain logiciel, puis l'a imprimée sur Eclipse. Il peut être utilisé. Oui, il n'y a pas de ligne noire. Bon sang, cependant, lorsque je suis passé à AS, la compilation directe a échoué. On dirait qu'il s'agit d'une identification AS. La norme sur la 9ème photo est qu'il doit y avoir un magasin noir ou une ligne noire ! De plus, mon cousin m'a donné une méthode pour supprimer les lignes noires : 9patch (.9) Comment supprimer les points noirs/lignes noires sur vos propres dessins Je ne l'ai pas essayé spécifiquement Si vous êtes intéressé, vous pouvez l'essayer vous-même. , mais les lignes noires sont-elles vraiment si gênantes ? .Je ne ressens pas de trouble obsessionnel-compulsif ! Un autre point est de décompresser l'apk d'autres personnes. Lorsque vous obtenez le matériel .9, vous constatez qu'il n'y a pas de ligne noire et la même erreur sera signalée ! Si vous souhaitez supprimer le matériel .9 avec des lignes noires, vous devez décompiler l'apk au lieu de le décompresser directement ! ! ! Décompilez également le recto Je l’ai déjà présenté, je n’entrerai donc pas dans les détails ici !
Puis introduisez deux choses inutiles :
définition XML NinePatchDrawable :
<!--pic9.xml--> <!--参数依次为:引用的.9图片,是否对位图进行抖动处理--> <?xml version="1.0" encoding="utf-8"?> <nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/dule_pic" android:dither="true"/>
utiliser un packaging Bitmap.9 images :
<!--pic9.xml--> <!--参数依次为:引用的.9图片,是否对位图进行抖动处理--> <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/dule_pic" android:dither="true"/>
3.ShapeDrawable
Shape Drawable, il définit des formes géométriques de base, telles que (rectangle, cercle, ligne, etc.), l'élément racine est
et là y a plusieurs nœuds, les nœuds pertinents sont les suivants :
- ① <forme>:
- ~ visible : Définissez s'il est visible
- ~ forme : Forme, facultatif : rectangle (rectangle, y compris carré), ovale (ellipse, y compris cercle), ligne (segment de ligne), anneau (anneau )
- ~ innerRadiusRatio : Valable uniquement lorsque la forme est un anneau, indiquant le rapport entre le rayon intérieur de l'anneau et le rayon Si innerRadius est défini, Il sera ignoré
- ~ innerRadius : Il n'est valable que lorsque la forme est un anneau, indiquant la taille du rayon intérieur de l'anneau
- ~ thicknessRatio : Quand la forme Elle n'est valable que lorsque la forme est en anneau, et le rapport de l'épaisseur de l'anneau de la montre au rayon
- ~ épaisseur : Il est valable lorsque la forme est anneau, indiquant l'épaisseur de l'anneau, c'est-à-dire la différence entre le rayon extérieur et le rayon intérieur
- ~ useLevel : Valable uniquement lorsque la forme est un anneau, indiquant s'il faut autoriser une pièce de la bague à afficher en fonction du niveau
- ②<taille>:
- ~ largeur : Largeur de la forme graphique
- ~ hauteur : Hauteur de la forme graphique
- ③<gradient> : Parlons de GradientDrawable plus tard~
- ④<solid>
- ~ couleur : couleur de remplissage d'arrière-plan, le réglage uni écrasera le paramètre de dégradé Tous les effets !!!!!!
- ⑤<trait >
- ~ width : La largeur de la bordure
- ~ color : Couleur de la bordure
- ~ dashWidth : Longueur du segment de ligne pointillée de la bordure
- ~ dashGap : Segment de ligne pointillée de la bordure Espacement
- ⑥<conner>
- ~ radius : rayon de congé, applicable aux coins supérieur, inférieur, gauche et droit
- ~ topLeftRadius ,topRightRadius,BottomLeftRadius,tBottomRightRadius : Les valeurs des coins arrondisdu coin supérieur gauche, supérieur droit, inférieur gauche et inférieur droit sont définies en fonction de vos besoins !
- ⑦<padding>
- gauche, haut, droite, basm :Les marges dans les directions supérieure gauche, droite et inférieure sont en ordre !
Exemple d'utilisation : 2.3.1 TextView (zone de texte) explication détaillée
4.GradientDrawable
Un Drawable avec une zone de dégradé qui peut obtenir un dégradé linéaire, un dégradé divergent et effets de dégradé en mosaïque Nœud principal : <gradient/>, avec les attributs facultatifs suivants :
- startColor : la couleur de départ du dégradé
- centerColor : la couleur du milieu du dégradé
- endColor : Couleur de fin du dégradé
- type : Type de dégradé, facultatif (linéaire,radial,balayage ), Dégradé linéaire(l'angle du dégradé peut être défini), dégradé divergent (divergent du centre vers tous les côtés), dégradé de tuiles
- centerX : la coordonnée x de Arthur au milieu du dégradé, prends La plage de valeurs est : 0~1
- centerY : coordonnée Y de la couleur du milieu du dégradé, la plage de valeurs est : 0~1
- angle : Seuls les dégradés de type linéaire sont valides, indiquant l'angle du dégradé, qui doit être un multiple de 45
- gradientRadius : Uniquement radial et balayage les dégradés de type sont valides, le radial doit être défini, indiquant l'effet de dégradé Radius
- useLevel : Déterminez s'il faut dessiner un effet de dégradé en fonction du niveau
Exemple de code : (Démonstration de trois effets de dégradé) :
Exécuter le rendu :
Premier créez trois fichiers XML de dégradé sous drawable :
(dégradé linéaire) gradient_linear.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <gradient android:angle="90" android:centerColor="#FFEB82" android:endColor="#35B2DE" android:startColor="#DEACAB" /> <stroke android:dashGap="5dip" android:dashWidth="4dip" android:width="3dip" android:color="#fff" /></shape>
(dégradé divergent) gradient_radial.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="0dip" android:shape="ring" android:thickness="70dip" android:useLevel="false" > <gradient android:centerColor="#FFEB82" android:endColor="#35B2DE" android:gradientRadius="70" android:startColor="#DEACAB" android:type="radial" android:useLevel="false" /></shape>
(tiled gradient) gradient_sweep.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadiusRatio="8" android:shape="ring" android:thicknessRatio="3" android:useLevel="false" > <gradient android:centerColor="#FFEB82" android:endColor="#35B2DE" android:startColor="#DEACAB" android:type="sweep" android:useLevel="false" /></shape>
Appel de trois drawablesactivity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/txtShow1" android:layout_width="200dp" android:layout_height="100dp" android:background="@drawable/gradient_linear" /> <TextView android:id="@+id/txtShow2" android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/gradient_radial" /> <TextView android:id="@+id/txtShow3" android:layout_width="100dp" android:layout_height="100dp" android:background="@drawable/gradient_sweep" /></LinearLayout>
D'accord, c'est c'est aussi simple que cela ~ Bien sûr, si vous souhaitez dessiner des graphiques plus compliqués, il ne suffit pas d'utiliser des fichiers XML. Des effets plus complexes doivent être réalisés via du code Java. La démonstration suivante est un code source extrait d'Internet :
Exécution du rendu :
Code d'implémentation :
MainActivity.java :
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new SampleView(this));
}
private static class SampleView extends View {
private ShapeDrawable[] mDrawables;
private static Shader makeSweep() {
return new SweepGradient(150, 25,
new int[] { 0xFFFF0000, 0xFF00FF00, 0xFF0000FF, 0xFFFF0000 },
null);
}
private static Shader makeLinear() {
return new LinearGradient(0, 0, 50, 50,
new int[] { 0xFFFF0000, 0xFF00FF00, 0xFF0000FF },
null, Shader.TileMode.MIRROR);
}
private static Shader makeTiling() {
int[] pixels = new int[] { 0xFFFF0000, 0xFF00FF00, 0xFF0000FF, 0};
Bitmap bm = Bitmap.createBitmap(pixels, 2, 2,
Bitmap.Config.ARGB_8888);
return new BitmapShader(bm, Shader.TileMode.REPEAT,
Shader.TileMode.REPEAT);
}
private static class MyShapeDrawable extends ShapeDrawable {
private Paint mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
public MyShapeDrawable(Shape s) {
super(s);
mStrokePaint.setStyle(Paint.Style.STROKE);
}
public Paint getStrokePaint() {
return mStrokePaint;
}
@Override protected void onDraw(Shape s, Canvas c, Paint p) {
s.draw(c, p);
s.draw(c, mStrokePaint);
}
}
public SampleView(Context context) {
super(context);
setFocusable(true);
float[] outerR = new float[] { 12, 12, 12, 12, 0, 0, 0, 0 };
RectF inset = new RectF(6, 6, 6, 6);
float[] innerR = new float[] { 12, 12, 0, 0, 12, 12, 0, 0 };
Path path = new Path();
path.moveTo(50, 0);
path.lineTo(0, 50);
path.lineTo(50, 100);
path.lineTo(100, 50);
path.close();
mDrawables = new ShapeDrawable[7];
mDrawables[0] = new ShapeDrawable(new RectShape());
mDrawables[1] = new ShapeDrawable(new OvalShape());
mDrawables[2] = new ShapeDrawable(new RoundRectShape(outerR, null,
null));
mDrawables[3] = new ShapeDrawable(new RoundRectShape(outerR, inset,
null));
mDrawables[4] = new ShapeDrawable(new RoundRectShape(outerR, inset,
innerR));
mDrawables[5] = new ShapeDrawable(new PathShape(path, 100, 100));
mDrawables[6] = new MyShapeDrawable(new ArcShape(45, -270));
mDrawables[0].getPaint().setColor(0xFFFF0000);
mDrawables[1].getPaint().setColor(0xFF00FF00);
mDrawables[2].getPaint().setColor(0xFF0000FF);
mDrawables[3].getPaint().setShader(makeSweep());
mDrawables[4].getPaint().setShader(makeLinear());
mDrawables[5].getPaint().setShader(makeTiling());
mDrawables[6].getPaint().setColor(0x88FF8844);
PathEffect pe = new DiscretePathEffect(10, 4);
PathEffect pe2 = new CornerPathEffect(4);
mDrawables[3].getPaint().setPathEffect(
new ComposePathEffect(pe2, pe));
MyShapeDrawable msd = (MyShapeDrawable)mDrawables[6];
msd.getStrokePaint().setStrokeWidth(4);
}
@Override protected void onDraw(Canvas canvas) {
int x = 10;
int y = 10;
int width = 400;
int height = 100;
for (Drawable dr : mDrawables) {
dr.setBounds(x, y, x + width, y + height);
dr.draw(canvas);
y += height + 5;
}
}
}
}Le code utilise ShapeDrawable et PathEffect, le premier est un wrapper pour les graphiques ordinaires comprenant : ArcShape, OvalShape, PathShape, RectShape, RoundRectShape
Et PathEffect est un effet de chemin, comprenant : CornerPathEffect, DashPathEffect et DiscretePathEffect ! Vous pouvez créer des bordures graphiques complexes...
C'est tout à propos de ce dégradé GradoemtDrawable. Si cette dernière chose vous intéresse, vous pouvez aller sur : appium/android-apidemos
. Résumé de cette section :
D'accord, dans cette section, nous allons apprendre ColorDrawable, NiewPatchDrawable, ShapeDrawable, GradientDrawable
Quatre Drawables en premier. Bien sûr, ce ne sont que du riz frit et ont été. écrit auparavant. Réussi, mais pour l'exhaustivité du tutoriel, j'ai décidé de Réécrivez-le ~ De plus, après avoir écrit le tutoriel de base, certains blogs écrits auparavant seront supprimés !
