首页 > 其他分享 >Android基础入门教程——8.1.1 Android中的13种Drawable小结 Part 1

Android基础入门教程——8.1.1 Android中的13种Drawable小结 Part 1

时间：2023-09-12 14:38:08浏览次数：39  
标签：8.1 xml 13 ShapeDrawable 渐变 mDrawables new Android Drawable


本节引言：

从本节开始我们来学习Android中绘图与动画中的一些基础知识，为我们进阶部分的自定义 
打下基础！而第一节我们来扣下Android中的Drawable！Android中给我们提供了多达13种的 
Drawable，本节我们就来一个个撸一遍！

Drawable资源使用注意事项

  • Drawable分为两种： 
    一种是我们普通的图片资源，在Android Studio中我们一般放到res/mipmap目录下， 
    和以前的Eclipse不一样哦！另外我们如果把工程切换成Android项目模式，我们直接 
    往mipmap目录下丢图片即可，AS会自动分hdpi，xhdpi…！ 
    另一种是我们编写的XML形式的Drawable资源，我们一般把他们放到res/drawable目录 
    下，比如最常见的按钮点击背景切换的Selctor！
  • 在XML我们直接通过@mipmap或者@drawable设置Drawable即可 
    比如: android:background = “@mipmap/iv_icon_zhu” / “@drawable/btn_back_selctor” 
    而在Java代码中我们可以通过Resource的getDrawable(R.mipmap.xxx)可以获得drawable资源 
    如果是为某个控件设置背景，比如ImageView，我们可以直接调用控件.getDrawale()同样 
    可以获得drawable对象！
  • Android中drawable中的资源名称有约束，必须是：[a-z0-9_.]（即：只能是字母数字及_和.）， 
    而且不能以数字开头，否则编译会报错： Invalid file name: must contain only [a-z0-9_.]！ 
    小写啊！！！！小写！！！小写！——重要事情说三遍~

好的，要注意的地方大概就这些，下面我们来对Android中给我们提供的13种Drawable进行学习！

1.ColorDrawable

最简单的一种Drawable，当我们将ColorDrawable绘制到Canvas(画布)上的时候, 
会使用一种固定的颜色来填充Paint,然后在画布上绘制出一片单色区域!

1).Java中定义ColorDrawable:

ColorDrawable drawable = new ColorDrawable(0xffff2200);  
txtShow.setBackground(drawable);

2).在xml中定义ColorDrawable:

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

当然上面这些用法,其实用得不多,更多的时候我们是在res/values目录下创建一个color.xml 
文件,然后把要用到的颜色值写到里面,需要的时候通过@color获得相应的值，比如：

3).建立一个color.xml文件

比如：

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

然后如果是在xml文件中话我们可以通过@color/xxx获得对应的color值 
如果是在Java中:

int mycolor = getResources().getColor(R.color.mycolor);    
btn.setBackgroundColor(mycolor);

ps:另外有一点要注意,如果我们在Java中直接定义颜色值的话,要加上0x,而且不能把透明度漏掉:

int mycolor = 0xff123456;    
btn.setBackgroundColor(mycolor);

4).使用系统定义好的color:

比如:BLACK(黑色),BLUE(蓝色),CYAN(青色),GRAY(灰色),GREEN(绿色),RED(红色),WRITE(白色),YELLOW(黄色)! 
用法： btn.setBackgroundColor(Color.BLUE); 
也可以获得系统颜色再设置：

int getcolor = Resources.getSystem().getColor(android.R.color.holo_green_light);  
btn.setBackgroundColor(getcolor);

xml中使用:android:background=”@android:color/black”

5).利用静态方法argb来设置颜色:

Android使用一个int类型的数据表示颜色值,通常是十六进制,即0x开头， 
颜色值的定义是由透明度alpha和RGB(红绿蓝)三原色来定义的,以“#”开始,后面依次为: 
透明度-红-绿-蓝;eg:#RGB #ARGB #RRGGBB #AARRGGBB 
每个要素都由一个字节(8 bit)来表示,所以取值范围为0~255,在xml中设置颜色可以忽略透明度, 
但是如果你是在Java代码中的话就需要明确指出透明度的值了,省略的话表示完全透明,这个时候 
就没有效果了哦~比如:0xFF0000虽然表示红色,但是如果直接这样写,什么的没有,而应该这样写: 
0xFFFF0000,记Java代码设置颜色值,需要在前面添加上透明度~ 
示例:(参数依次为:透明度,红色值,绿色值,蓝色值) 
txtShow.setBackgroundColor(Color.argb(0xff, 0x00, 0x00, 0x00));

2.NiewPatchDrawable

就是.9图咯，在前面我们Android基础入门教程——1.6 .9(九妹)图片怎么玩已经详细 
的给大家讲解了一下如何制作.9图片了！Android FrameWork在显示点九图时使用了高效的 
图形优化算法,我们不需要特殊的处理，就可以实现图片拉伸的自适应~ 
另外在使用AS的时候要注意以下几点：

  • 1.点9图不能放在mipmap目录下，而需要放在drawable目录下！
  • 2.AS中的.9图，必须要有黑线，不然编译都不会通过，今早我的阿君表哥在群里说 
    他司的美工给了他一个没有黑线的.9图，说使用某软件制作出来的，然后在Eclipse上 
    是可以用的，没错是没黑线的.9，卧槽，然而我换到AS上，直接编译就不通过了！ 
    感觉是AS识别.9图的其中标准是需要有黑店或者黑线！另外表哥给出的一个去掉黑线的： 
    9patch(.9)怎么去掉自己画上的黑点/黑线 
    具体我没试，有兴趣可以自己试试，但是黑线真的那么碍眼么…我没强迫症不觉得！ 
    另外还有一点就是解压别人apk，拿.9素材的时候发现并没有黑线，同样也会报错！ 
    想要拿出有黑线的.9素材的话，需要反编译apk而非直接解压！！！反编译前面也 
    介绍过了，这里就不详述了！

接着介绍两个没什么卵用的东东：

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

使用Bitmap包装.9图片:

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

形状的Drawable咯,定义基本的几何图形,如(矩形,圆形,线条等),根元素是

4.GradientDrawable

一个具有渐变区域的Drawable，可以实现线性渐变,发散渐变和平铺渐变效果 
核心节点：<gradient/>，有如下可选属性：

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

代码示例：(三种渐变效果的演示)：

运行效果图：

先在drawable下创建三个渐变xml文件：

(线性渐变)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>

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

(平铺渐变)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>

调用三个drawable的activity_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>

好的，就是那么简单~当然，如果想绘制更加复杂的图形的话,只用xml文件不远远不足的, 
更复杂的效果则需要通过Java代码来完成,下面演示的是摘自网上的一个源码:

运行效果图：

实现代码：

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;
            }
        }
    }
}

代码使用了ShapeDrawable和PathEffect,前者是对普通图形的包装;包括: 
ArcShape,OvalShape,PathShape,RectShape,RoundRectShape! 
而PathEffect则是路径特效,包括:CornerPathEffect,DashPathEffect和DiscretePathEffect 
可以制作复杂的图形边框… 
关于这个GradoemtDrawable渐变就讲到这里,如果你对最后面这个玩意有兴趣的话,可以到: 
appium/android-apidemos

本节小结：

 好的，本节就先学习ColorDrawable，NiewPatchDrawable，ShapeDrawable，GradientDrawable 


四个Drawable先，当然这些都是炒冷饭，以前已经写过了，不过为了教程的完整性，还是决定 


在写一遍~另外，在写完基础教程后，以前写过的一些blog会删掉！

标签：8.1,xml,13,ShapeDrawable,渐变,mDrawables,new,Android,Drawable
From： https://blog.51cto.com/u_14523369/7445199

相关文章

  • 关于intent之android.intent.action.USER_PRESENT的接收与使用
    在做解锁监听程序时，一开始采用监听屏幕SCREEN_ON和SCREEN_OFF这两个action。但奇怪的是，这两个action只能通过代码动态的形式注册，才能被监听到，使用AndroidManifest.xml完全监听不到。百度后发现这是PowerManager那边在发这个广播的时候做了限制，限制只能有register到代......
  • Android之ListView详解
    前文ListView作为Android最常用的控件之一,同时也是最难的控件之一,其难点主要在意用法的多变性,因此让众多的初学者都比较难掌握,包括我自己,也是在反复需要使用时,总会卡住.而在网上找了众多的ListView的实例,案例等,讲解得不尽人意,甚至让许多初学者有迷惑.所以才觉得写此文,将......
  • android 很棒的UI合集 都是git地址很不错的需要makedown配合使用
    MaterialNameLicenseDemoMaterialDesignLibraryApacheLicenseV2DrawerArrowDrawableApacheLicenseV2MaterialTabsApacheLicenseV2PagerSlidingTabStripApacheLicenseV2material-rippleApacheLicenseV2RippleEffectMITLDrawerApacheLicenseV2material-design-icons......
  • 1309. 最多能倒多少杯水
     题解：#include<iostream>usingnamespacestd;intmain(intargc,charconst*argv[]){intn,x;//nL水和xml水杯cin>>n>>x;//统一单位n=n*1000;//转化为ml//双分支if(n%x==0){cout<<n/x&......
  • Android静默安装实现方案
    之前有很多朋友都问过我，在Android系统中怎样才能实现静默安装呢？所谓的静默安装，就是不用弹出系统的安装界面，在不影响用户任何操作的情况下不知不觉地将程序装好。虽说这种方式看上去不打搅用户，但是却存在着一个问题，因为Android系统会在安装界面当中把程序所声明的权限展示给用户看，......
  • 1137 Final Grading（测试点3段错误、答案错误）
    题目：Forastudenttakingtheonlinecourse"DataStructures"onChinaUniversityMOOC(http://www.icourse163.org/),tobequalifiedforacertificate,he/shemustfirstobtainnolessthan200pointsfromtheonlineprogrammingassignments,and......
  • poj 4604 Deque-----2013多校联合赛第一场--1005
    做了一天，终于做出来了。。结题报告：考虑题目的一个简化版本：使双端队列单调上升。对于序列A和队列Q，找到队列中最早出现的数字Ax，则Ax将Q分成的两个部分分别是原序列中以Ax开始的最长上升和最长下降序列，答案即为这两者之和的最大值。而对于本题，由于存在相同元素，所以只要找到以Ax......
  • poj 4607 Park Visit --2013多校联合赛第一场---1008
    解题报告：首先如果k小于等于直径长度，那么答案为k−1。如果k大于直径长度，设直径长度为r，那么答案为r−1+(k−r)∗2。 先找树的最长路；找树中任意一点，dfs找该点所能达到的最远的点vv，然后从vv点dfs找树的最长路。。#include<stdio.h>#include<string.h>#include<vector>#includ......
  • poj 1325 Machine Schedule---二分图求最小顶点覆盖
    二分图求最小顶点覆盖。。注意本题说，机器开始在0开始，所以就是默认和0相连的job已经被完成了，所以我是从1开始扫的点正常的话，要将edge【】【】和0相连的边值赋为0，表示该job已经被完成。。。#include<stdio.h>#include<string.h>booledge[110][110],visited[110];intcx[110],cy......
  • Android开发中常见的设计模式
    Android开发中常见的设计模式对于开发人员来说，设计模式有时候就是一道坎，但是设计模式又非常有用，过了这道坎，它可以让你水平提高一个档次。而在android开发中，必要的了解一些设计模式又是非常有必要的。对于想系统的学习设计模式的同学，这里推荐2本书。一本是HeadFirst系列的HeadH......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99