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

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

Android Drawableの必須知識要約

Drawableとは何か

まず、Drawableは抽象クラスであり、Canvasで描画できる画像を表し、通常ビューの背景として使用されます。さまざまな機能を完了するために、多くの実装クラスがあります。次に、Drawableは以下のようなカテゴリに大別できます：画像、色で構成された画像。一般的にはxmlで定義されます。

Drawableの継承体系

Drawableの実装クラスおよびタグ

Drawable

内部の幅と高さの取得

　　　 getIntrinsicHeight、getIntrinsicWidth
　　　 - Drawableが画像で構成されている場合、方法が返すのは画像の幅と高さです。
　　　 -　 Drawableが色で構成されている場合、幅と高さの概念がありません。返されます。-1

各種Drawableおよびその使用法

BitmapDrawable

画像を表示するために使用、以下の例を示します

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

常用属性

android:antialias アンチエイリアスを有効にするかどうか
android:dither 防抖动を有効にするかどうか
android:filter フィルタ効果を有効にするかどうか
android:gravity 画像の定位に使用
android:src 画像リソースID
android:tileMode タイルモード、repeat、mirror、clampの3種類

ColorDrawable

単色の可描画エリアを表し、固定の色を包装しています。キャンバス上に単色のエリアを描画します。

例：

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

コードで作成することもできます

ColorDrawable drawable = new ColorDrawable(int color); //colorのinteger値を传入します

NinePatchDrawable

つまり9-patch図，内容に応じて自由に縮み伸びさせることができ、歪みを失いません

例：

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

用draw9patch设定缩放区域

图中1、2方向表示在draw9patch中绘制黑线，黑线长度交集为可拉伸的范围
图中3、4方向黑线长度交集表示内容可以填充的区域

ShapeDrawable

通过颜色来构造图形，既可以为纯色图形，也可以为具有渐变效果的图形。能构成的图形有rectangle、oval、ring、line

具有渐变效果的圆示例:

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

注意：1、Android:angleの値は以下の通りでなければなりません45の倍数 2、ovalは円形を描くために使用され，sizeの幅と高さが等しい場合に円として描画されます

円環の例:

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

注：
1、android:useLevelをfalseに設定するときにのみ理想の効果が表示されます
2、innerRadiusは円環の内半径，innerRadiusRatioは内半径が円環の幅の比率，両方でinnerRadiusが主
3、thicknessは円環の幅，thicknessRatioはこの幅が円環の幅の比率，厚度が主

常用属性

- android:shape 要素を描く形状，rectangle、oval、ring、line
- <stroke> 形状の描边，以下の属性があります
　　　　　　　 - android:width 描边の幅
　　　　　　　 - android:color 描边の色
　　　　　　　 - android:dashGap 绘制虚線の線幅
　　　　　　　 - android:dashWidth 绘制虚線の線段間隔 （要绘制虚線，後者も0でないこと）
-<solid> 純色填充，android:color指定shape颜色
- <gradient> 渐变效果，与solid不可一起用，有如下属性
　　　　　　　 - android:angle 渐变的角度，必须为45の倍数
　　　　　　　 - android:startColor 渐变的起始颜色
　　　　　　　 - android:centerColor 渐变的中心颜色
　　　　　　　 - android:endColor 渐変の終了色
　　　　　　　 - android:centerX 渐変の中心点の横座標
　　　　　　　 - android:centerY 渐変の中心点の縦座標
　　　　　　　 - android:gradientRadius 渐変の半径
　　　　　　　 - android:type 渐変のタイプ、linear（線形）、sweep（扫视）、radial（径向）
- <corners> 矩形（rectangle）の角の角度を表す、他のshapeには適用されません、以下の属性があります
　　　　　　　 - android:topLeftRadius、android:topRightRadius、android:bottomLeftRadius、android:bottomRightRadius　それぞれ左上角、右上角、左下角、右下角の角度を設定
　　　　　　　 - android:radius　四角の角に同じ角度を設定、優先順位が低く、他の4つの属性に覆盖されます
- <size> shapeの幅と高さ、android:width、android:heightに対応
　　　　　　　 -　 shapeはデフォルトで幅と高さがありません。getIntrinsicHeight、getIntrinsicWidthが返されます-1
　　　　　　　 -　 サイズを設定することで幅と高さを設定できますが、ビューの背景として使用される場合は、ビューの大きさに合わせて伸びたり縮められたりします
- <padding> shapeを収容するビューの余白間隔を設定

StateListDrawable

ビューの異なる状態に応じて、item内のdrawableを表示するための状態選択器と見なすことができます

例：

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

一般的な状態

android:state_pressed　ビューに押しがかかっている場合、押された状態
android:state_checked　ビューがチェックされた場合、CheckBoxに適用
android:state_selected　ビューが選択された場合
android:state_enabled　ビューが利用可能な状態にある場合
android:state_focused　ビューが焦点を取得した場合

LayerDeawable

LayerDeawable

例：

<?xml version="1.0" encoding="utf-8"?>
これは層のDrawableの集合を表し、Photoshopのレイヤーの概念に似ています。複数のdrawableを異なる層に配置することで、重ね合わせ効果を作成します-<level//schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/night" />
 photo0"
  android:drawable="@mipmap"/photo6"
  <layer />
</android:gravity="center"-level

layer

1注意事項：-、layer
2listには複数のitemを含むことができます。各itemはdrawableを表し、追加された順に以前に追加されたitemを覆います-、デフォルトでは、layer
3listに含まれるすべてのdrawableはviewの大きさに拡縮されます。android:gravityを設定することで、拡縮効果を調整できます

、上下左右のオフセット量を設定することができます、android:top、android:bottom、android:left、android:right

LevelListDrawable10表示するdrawableの集合で、集合内の各Drawableにはレベル（level）が設定されています。異なるレベルを設定することで、LevelListDrawableが異なるDrawableに切り替わります。レベルの範囲は0～
例：

<?xml version="1.0" encoding="utf-8"?>
000～、android:maxLevelで最大レベルを設定、android:minLevelで最小レベルを設定-<level//schemas.android.com/apk/res/android">
 photo0"
  android:drawable="@mipmap"/list xmlns:android="http:
  <item2android:minLevel="
  android:maxLevel="10" />
 photo0"
  android:drawable="@mipmap"/photo1"
  <item4android:minLevel="
  android:maxLevel="3android:minLevel=" />
</0"-level

list>

 //設定することで、異なるDrawableを切り替えることができます、コードで1ImageViewの背景をphotoに切り替える、 35 ImageViewの背景をphoto0に切り替える、3、40～
 iv.setImageLevel(35); 
 //0～ 15ImageViewの背景をphoto0に切り替える、10~20～
 iv.setImageLevel(15);

TransitionDrawable

LayerDrawableのサブクラスで、2つのDrawableのフェードインフェードアウト効果を実現するためのもの
例：

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>

ImageViewにsrcを設定する、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時は見えませんが、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" />

レベルを設定してカット

 ImageView iv = (ImageView) findViewById(R.id.iv_clip);
 ClipDrawable drawable= (ClipDrawable) iv.getDrawable();
 drawable.setLevel(5000); // 設定したlevelが大きいほどカット範囲が小さくなります

属性

android:clipOrientation ，horizontal 水平方向のカット，vertical 垂直方向のカット
android:gravity ，カット方向と連携

カスタムのDrawable

カスタムの円形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;
 }
}

カスタムの角丸の矩形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();
 }
}

カスタムDrawableの一般的な手順

　1カスタムDrawableクラスはDrawableを継承します。
　2getOpacity、setColorFilter、setAlphaなどのメソッドを実装します。
　3onDrawメソッドで描画を行います。
　4カスタムDrawableが固定のサイズを持っている場合、getIntrinsicWidth、getIntrinsicHeightメソッドを実装する必要があります。

これでこの記事はすべて終わりです。皆様の学習に役立てば幸いですし、もっと「呐喊ものの導入」をサポートしていただけると嬉しいです。

声明：この記事の内容はインターネットから取得しており、著作権者は所有者であり、インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。また、人工的な編集は行われておらず、関連する法的責任も負いません。著作権に抵触する内容がある場合は、メールを送信して：notice#wまでお知らせください。3codebox.com（メールを送信する際、#を@に変更してください）で通報し、関連する証拠を提供してください。一旦確認がついたら、このサイトは侵害された内容をすぐに削除します。

基礎教程
お気に入り