LayerDrawable

LayerDrawable是一組按照順序繪製的drawable資源，是由多個drawable資源重疊繪製而組成的，最後一個drawable會被繪製在最頂層。LayerDrawable資源的使用場景如下：

自定義SeekBar和水平進度條ProgressBar的樣式
代碼實現圖片疊加效果

1.自定義SeekBar樣式和水平進度條ProgressBar樣式

   <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        <!-- maxHeight 用於指定seekBar的高度-->
        android:maxHeight="2dp" 
        android:progress="3"
        <!-- 自定義seekBar進度條顏色資源-->
        android:progressDrawable="@drawable/seekbar_progress_drawable"
        <!-- seekBar上的圖標 -->
        android:thumb="@drawable/ic_thumb" />

    <ProgressBar
        <!-- 指定 進度條爲水平方向-->
        style="@android:style/Widget.Material.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        <!-- 指定進度條的高度-->
        android:layout_height="2dp"
        android:max="10"
        android:progress="3"
        <!-- 自定義進度條顏色資源-->
        android:progressDrawable="@drawable/seekbar_progress_drawable"
        />

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--進度條上進度背景顏色資源-->
    <item
        android:id="@android:id/background"
        android:gravity="center">
        <shape>
            <corners android:radius="2dip" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>

    <!-- 進度條上的進度顏色資源-->
    <item
        android:id="@android:id/progress"
        android:gravity="center">
        <!-- 一定要使用 clip標籤-->
        <clip>
            <shape>
                <corners android:radius="2dip" />
                <solid android:color="#009eff" />
            </shape>
        </clip>
    </item>
</layer-list>

2.自定義圓形進度條

<ProgressBar
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:indeterminateDrawable="@drawable/progress"/>

drawable/progress文件如下：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="16"
        android:useLevel="false" >
        <gradient
            android:centerColor="#FFFFFF"
            android:centerY="0.50"
            android:endColor="#ffffff"
            android:startColor="#0000"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

2.圖片疊加效果

第一種效果

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/layer_drawable" />

layer_drawable.xml資源文件如下：

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

    <item
    <!--當前圖片距離上一張圖片的位置-->
        android:left="35dp"
        android:top="35dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_default_heard" />
    </item>

    <item
    <!--當前圖片距離上一張圖片的位置-->
        android:left="70dp"
        android:top="70dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_default_heard" />
    </item>
</layer-list>

第二種效果

圖片按比例縮放

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/layer_drawable1" />

layer_drawable1.xml資源文件如下：

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

    <item
        android:drawable="@drawable/ic_default_heard"
        android:gravity="center"
        android:left="35dp"
        android:top="35dp"></item>

    <item
        android:drawable="@drawable/ic_default_heard"
        android:gravity="center"
        android:left="70dp"
        android:top="70dp"></item>
</layer-list>

第三種

代碼中實現圖片重疊效果
效果和第二種一樣

 Resources res = getResources();

        Drawable drawables[] = new Drawable [3];
        drawables[0] = res.getDrawable(R.drawable.ic_default_heard);
        drawables[1] = res.getDrawable(R.drawable.ic_default_heard);
        drawables[2] = res.getDrawable(R.drawable.ic_default_heard);
        LayerDrawable layerDrawable = new LayerDrawable(drawables);
        //一下代碼設置圖片之間的距離
        layerDrawable.setLayerInset(0, 20, 20, 0, 0);
        layerDrawable.setLayerInset(1, 40, 40, 0, 0);
        layerDrawable.setLayerInset(2, 60, 60, 0, 0);
        imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setImageDrawable(layerDrawable);

ShapeDrawable

1.shape 資源屬性解析如下

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    <!--矩形，橢圓，線性，環形-->
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <!--矩形的四個角的圓角-->
    <corners
        <!--四個圓角都一樣-->
        android:radius="integer"
        <!--左上角的角度-->
        android:topLeftRadius="integer"
        <!--右上角的角度-->
        android:topRightRadius="integer"
        <!--左下角的角度->
        android:bottomLeftRadius="integer"
        <!--右下角的角度-->
        android:bottomRightRadius="integer" />

    <!--drawable 填充顏色的梯度變化設置-->
    <gradient
        <!--顏色漸變類型：線性，圓形，扇形-->
        android:type=["linear" | "radial" | "sweep"]
        <!--顏色漸變的方向：0，90，180，270四個方向-->
        android:angle="integer"
         <!--開始的顏色-->
        android:startColor="color"
        <!--中間的顏色-->
        android:centerColor="integer"、
        <!--結束的顏色-->
        android:endColor="color"
         <!--圓形的半徑：注：當且僅當顏色漸變類型爲 radial 圓形時有效-->
        android:gradientRadius="integer"
        <!--圓形的中心點位置：取值範圍 0.0~1.0 之間。注：當且僅當顏色漸變類型爲radial和sweep時有效-->
        android:centerX="integer"
        android:centerY="integer"
        />

    <!--設置內容距離邊框的距離-->
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />

    <!--設置drawable資源的尺寸大小-->
    <size
        android:width="integer"
        android:height="integer" />

    <!--設置drawable填充的顏色-->
    <solid
        android:color="color" />

    <!--設置drawable的描邊-->
    <stroke
        <!--描邊的寬度-->
        android:width="integer"
        <!--描邊的顏色-->
        android:color="color"
        <!--描邊虛線的寬度，注：添加此屬性表示描邊是虛線，否則默認描邊爲實線-->
        android:dashWidth="integer"
        <!--描邊虛線之間的間距，注：添加此屬性表示描邊是虛線，否則默認描邊爲實線-->
        android:dashGap="integer" />
</shape>

2.shape demo

1.矩形

以下代碼描述的是一個大小爲100*100dp，描邊顏色黑色寬度爲2dp的一個帶有圓角爲10dp的矩形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    <stroke
        android:width="2dp"
        android:color="@android:color/black" />
    <size
        android:width="100dp"
        android:height="100dp" />
    <solid android:color="#ff0000" />
</shape>

2.虛線

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

    <stroke
        android:width="5dp"
        android:dashWidth="5dp"
        android:dashGap="5dp"
        android:color="@android:color/holo_red_dark" />
</shape>

android:dashGap=”5dp” 虛線的間距，如果沒有設置該屬性，則默認爲0，也就是實線了。如果設置了android:dashGap=”5dp”屬性，則android:dashWidth=”5dp”屬性表示虛線的寬度。

3.環形

以下代碼描述的是大小爲100*100dp的環形，環形的內圓半徑爲40dp，環形的厚度爲10dp。效果圖如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="40dp"
    android:shape="ring"
    android:thickness="10dp">
    <size
        android:width="100dp"
        android:height="100dp" />
    <solid android:color="#ff0000" />
</shape>

屬性解析如下：
當且僅當 android:shape=”ring”時，以下屬性纔有效

    //環形的內半徑大小
    android:innerRadius="40dp"

    //Float類型。這個值表示內部環的比例，例如,如果android:innerRadiusRatio = " 5 ",那麼內部的半徑等於環的寬度除以5。這個值會被android:innerRadius重寫。
    android:innerRadiusRatio="4"


     //環形的厚度
    android:thickness="10dp"

   // Float類型。厚度的比例。例如,如果android:thicknessRatio= " 2 ",然後厚度等於環的寬度除以2。這個值是被android:innerRadius重寫。
    android:thicknessRatio="100"

4.橢圓

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="100dp"
        android:height="50dp" />
    <solid android:color="@android:color/holo_red_dark" />
</shape>

此處的橢圓大小爲100*50dp，當你將size 設置爲寬高相等的橢圓時，也就變成了圓形了。

圓形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="100dp"
        android:height="100dp" />
    <solid android:color="@android:color/holo_red_dark" />
</shape>

AnimationDrawable

開發者可以通過 AnimationDrawable來實現逐幀動畫。比如進度條，比如wifi信號等動畫效果。代碼實現如下：

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

    <item
        <!--每一幀的圖片-->
        android:drawable="@drawable/ic_wifi_0"
        <!--每一幀圖片播放之間的時間間隔-->
        android:duration="200" />
    <item
        android:drawable="@drawable/ic_wifi_1"
        android:duration="200" />
    <item
        android:drawable="@drawable/ic_wifi_2"
        android:duration="200" />
    <item
        android:drawable="@drawable/ic_wifi_3"
        android:duration="200" />
    <item
        android:drawable="@drawable/ic_wifi_4"
        android:duration="200" />
    <item
        android:drawable="@drawable/ic_wifi_5"
        android:duration="200" />
</animation-list>

代碼調用如下：

 ImageView imageViewWifi = (ImageView) findViewById(R.id.wifi);
        imageViewWifi.setImageResource(R.drawable.anima_drawable);
        AnimationDrawable animationDrawable = (AnimationDrawable) imageViewWifi.getDrawable();
        //啓動動畫
        animationDrawable.start();

ClipDrawable

圖片裁剪

代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/ic_background"
    android:gravity="left"></clip>

android:clipOrientation 裁剪圖片的方向，分別有水平和垂直兩個方向。
android:gravity 裁剪圖片的初始位置。
調用代碼如下：

 imageView = (ImageView) findViewById(R.id.imageView);
        ClipDrawable clipDrawable = (ClipDrawable) imageView.getDrawable();
        //修改ClipDrawable的level值，level值爲0--10000； 
 0：截取圖片大小爲空白，10000：截取圖片爲整張圖片；
        clipDrawable.setLevel(clipDrawable.getLevel()+5000);

從左邊開始裁剪，裁剪圖片的一般效果如下：

自定義圓形Drawable資源CircleDrawable

自定義圓形圖片，通過繼承Drawable來實現。

package com.android.camera.view;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;

import com.android.camera.util.LogUtil;

/**
 * Created by 850302 on 2016/1/11.
 */
public class CircularDrawable extends Drawable {

    private final static String TAG = "CircularDrawable";
    private final BitmapShader mBitmapShader;
    private final Paint mPaint;
    private Rect mRect;
    private int mLength;

    public CircularDrawable(Bitmap bitmap,int targetSize) {
        int w = bitmap.getWidth();
        int h = bitmap.getHeight();
        LogUtil.d(TAG,"the w = "+w+" the h = "+h +"  the targetSize = "+targetSize);
        if (Math.min(w, h) < targetSize) {
            Matrix matrix = new Matrix();
            float scale = 1.0f;
            if (w > h) {
                scale = (float) targetSize / (float) h;
            } else {
                scale = (float) targetSize / (float) w;
            }
            matrix.postScale(scale, scale);
            bitmap = Bitmap.createBitmap(bitmap, 0, 0, w, h, matrix, true);
            w = (int) (w * scale);
            h = (int) (h * scale);
        }
        if (w > h) {
            mLength = h;
            bitmap = Bitmap.createBitmap(bitmap, (w - h) / 2, 0, h, h);
        } else if (w < h) {
            mLength = w;
            bitmap = Bitmap.createBitmap(bitmap, 0, (h - w) / 2, w, w);
        } else {
            mLength = w;
        }

        mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setShader(mBitmapShader);
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mRect = bounds;
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawRoundRect(new RectF(mRect), (mRect.right - mRect.left) / 2,
                (mRect.bottom - mRect.top) / 2, mPaint);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter filter) {
        mPaint.setColorFilter(filter);
    }

    @Override
    public int getIntrinsicWidth() {
        return mLength;
    }

    @Override
    public int getIntrinsicHeight() {
        return mLength;
    }
}

廢墟的樹

發佈了74 篇原創文章 · 獲贊 372 · 訪問量 75萬+

私信關注

Android Drawable資源總結篇

LayerDrawable

1.自定義SeekBar樣式和水平進度條ProgressBar樣式

2.自定義圓形進度條

2.圖片疊加效果

第一種效果

第二種效果

第三種

ShapeDrawable

1.shape 資源屬性解析如下

2.shape demo

1.矩形

2.虛線

3.環形

4.橢圓

圓形

AnimationDrawable

ClipDrawable

自定義圓形Drawable資源CircleDrawable

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

詳解Android 觸摸事件處理和傳遞過程的來龍去脈

Android studio 下的aidl編程實現Android的誇進程間通信

Android studio 使用NDK工具實現JNI編程

Android M新控件之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用

Android Context 是什麼？

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結