Android GradientDrawable

GradientDrawable 是一个具有渐变区域的 Drawable,可以实现线性渐变,发散渐变和平铺渐变效果

GradientDrawable 的根节点是 <gradient>

GradientDrawable 属性

属性 说明
android:startColor 渐变的起始颜色
android:centerColor 渐变的中间颜色
android:endColor 渐变的结束颜色
android:type 渐变类型,可选值有
linear 线性渐变(可设置渐变角度)
radial 发散渐变(中间向四周发散)
sweep 平铺渐变
android:centerX 渐变中间颜色的 X 坐标,取值范围为: 0~1
android:centerY 渐变中间颜色的 Y 坐标,取值范围为: 0~1
android:angle 只有 linear 类型的渐变才有效,表示渐变角度,必须为 45 的倍数
android:gradientRadius 只有 radial 和 sweep 类型的渐变才有效, radial必须设置,表示渐变效果的半径
android:useLevel 判断是否根据 level 绘制渐变效果

范例

  1. 创建一个 空的 Android 项目 cn.twle.android.GradientDrawable

  2. 创建三个 GradientDrawable 资源

    线性渐变 res/drawable/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>
    

    (发散渐变) res/drawable/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>
    

    (平铺渐变) res/drawable/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>
    
  3. 修改 activity_main.xml 使用三个渐变资源

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <TextView
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:background="@drawable/gradient_linear" />
    
        <TextView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/gradient_radial" />
    
        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/gradient_sweep" />
    
    </LinearLayout>
    

范例 2

如果要绘制复杂的渐变的话,只用 xml 文件不远远不足的,需要使用 Java 代码来完成

  1. 创建一个 空的 Android 项目 cn.twle.android.GradientDrawableMore

  2. 修改 MainActivity.java

    package cn.twle.android.gradientdrawablemore;
    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapShader;
    import android.graphics.Canvas;
    import android.graphics.ComposePathEffect;
    import android.graphics.CornerPathEffect;
    import android.graphics.DiscretePathEffect;
    import android.graphics.LinearGradient;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.graphics.PathEffect;
    import android.graphics.RectF;
    import android.graphics.Shader;
    import android.graphics.SweepGradient;
    import android.graphics.drawable.Drawable;
    import android.graphics.drawable.ShapeDrawable;
    import android.graphics.drawable.shapes.ArcShape;
    import android.graphics.drawable.shapes.OvalShape;
    import android.graphics.drawable.shapes.PathShape;
    import android.graphics.drawable.shapes.RectShape;
    import android.graphics.drawable.shapes.RoundRectShape;
    import android.graphics.drawable.shapes.Shape;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    
    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;
                }
            }
        }
    }
    

ShapeDrawable 是对普通图形的包装;包括

ArcShape
OvalShape
PathShape
RectShape
RoundRectShape

PathEffect 则是路径特效,可以制作复杂的图形边框,包括

CornerPathEffect
DashPathEffect
DiscretePathEffect

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.