android中的 shape,selector,layer-list,drawable

shape 可以实现一些你想要的效果, 比如有时候 你在一个  button 获得焦点,按下 ,时要改变图片 以让客户有更好的体验感觉。

shape 就可以改变这些  控件的一些 属性, 可以说 让你在一个小项目中实现 获得焦点,按下 统一的效果和 风格吧, 而且这样超级方便呢。

在 你的 drawable文件夹下面    建立1个xml文件,比如    selector.xml 


shape里面有这么几个属性,其实很简单:

 1.Shape

简介
作用:XML中定义的几何形状
位置:res/drawable/文件的名称.xml
使用的方法:
Java代码中:R.drawable.文件的名称
XML中:Android:background="@drawable/文件的名称"
属性:
<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"]
其中rectagle矩形,oval椭圆,line水平直线,ring环形


 2.Selector
简介
根据不同的选定状态来定义不同的现实效果
分为四大属性:

android:state_selected是选中
android:state_focused是获得焦点
android:state_pressed是点击
android:state_enabled是设置是否响应事件,指所有事件
android:state_window_focused默认时的背景图片
引用位置:res/drawable/文件的名称.xml
使用的方法:
Java代码中:R.drawable.文件的名称
XML中:Android:background="@drawable/文件的名称"
<shape>   
            <solid android:color=""/>    实心属性: 什么颜色
            <gradient
                android:startColor=""    渐变属性: 1.开始颜色         
                android:endColor=""                2.结束颜色   
                android:angle="90" />                    3.angle: 渐变的角度 必须为45度的倍数
         //渐变平常默认是 线性渐变    android:type="linear",
        // 想要变成 径向渐变    android:type="radial",径向渐变需要指定半径android:gradientRadius="30"。

            <stroke                              描边属性: 
                android:width="3dp"                        1.描边的宽度
                android:dashWidth="6dp"                    2.表示横线的宽度
                android:dashGap="3dp"                      3.表示隔开的距离
                android:color="" />                        4.描边的颜色
        
             <corners                             圆角属性:
                android:topRightRadius="20dp"                右上角
                android:bottomLeftRadius="20dp"              右下角
                android:topLeftRadius="1dp"                  左上角
                android:bottomRightRadius="0dp"              左下角
                  />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
  </shape>


<selector
    <item android:state_pressed="true" >
        <shape>
        </shape>
    </item>
    <item android:state_focused="true" >
        <shape>
        </shape>
    </item>

</selector>
3. layer-list  就是一种叠加的效果,你可以将图片 或者各种效果叠加起来
<?xml version="1.0" encoding="UTF-8"?>  
 <layer-list  
   xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!--图片1-->
     <item android:id="@+id/user_faceback_drawable"
           android:drawable="@drawable/faceback" />  
    <!--图片2-->
     <item android:id="@+id/user_face_drawable" 
           android:drawable=""   
           android:left="0dip" 
           android:top="0dip" 
           android:right="30dip" 
           android:bottom="30dip" />  
 </layer-list> 
<!--2个图片的叠加-->


 Android  Drawable ColorDrawable (代码方式用的多)

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

ColorDrawable  colorDrawable = new ColorDrawable(0xffff0000);

有一点要注意:在代码中一定要指出透明度,如果省略了就代表完全透明了

当然上面这些用法,其实用得不多,更多的时候我们是在res/values目录下创建一个color.xml 文件,然后把要用到的颜色值写到里面,需要的时候通过@color获得相应的值,比如:
<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <color name="red">#ffff0000</color>
    <color name="green">#ff00ff00</color>
    <color name="blue">#ff0000ff</color>
</resources>



如果是在Java中:
int mycolor = getResources().getColor(R.color.green);    
imageview.setBackgroundColor(mycolor);
此外系统也定义了很多颜色供我们使用,可以直接调用
 imageview.setBackgroundColor(Color.BLUE);
当然,也可以获得系统颜色再设置
int color= getResources().getColor(android.R.color.holo_blue_light);
imageview.setBackgroundColor(color);

利用静态方法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));


Android Drawable之 BitmapDrawable (代码方式用的多)

BitmapDrawable也有两种实现方式
xml布局方式以bitmap作为根节点
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_launcher"
    android:antialias="true"  //是否抗锯齿
    filter ="ture/false"  //是否支持位图过滤,显示更平滑
    dither ="true/false"   //是否对位图进行抖动处理
    gravity =""           //当容器大于图时,可以设置图片位置
    android:tileMode="repeat"(disable,clamp,repeat,mirror) /> //填充模式

使用java方式也很容易
BitmapDrawable bd = (BitmapDrawable) getResources().getDrawable(R.drawable.ic_launcher);
                bd.setGravity(Gravity.CENTER);
                bd.setAntiAlias(true);Android Drawable之InsetDrawable

InsetDrawable 表示一个drawable根据指定的距离嵌入到另外一个drawable内部。(我们看到的其实还是同一张图片,只是会空出一些边距)当控件需要

的背景比实际的边框小的时候比较适合使用InsetDrawable。


Android Drawable之TransitionDrawable 

从Drawable的类继承图上可以看到TransitionDrawable是LayerDrawable的子类,但是不像LayerDrawable可以有多层drawable,
TransitionDrawable只能管理两层drawable,并且提供了一个透明度变化的动画,可以控制从一层drawable过度到另外一层drawable的渐变动画效果。

在xml文件中使用<transition>作为根节点来定义TransitionDrawable,通过item子节点定义两层使用的drawable。

TransitionDrawable同样可以使用xml文件或直接在代码中创建,但推荐使用xml文件的方式,除非你有特别的需求,需要在代码中设置或修改TransitionDrawable的属性等。 

<transition> 必须作为根节点,包含一个或多个<item>元素。
我们上面介绍了TransitionDrawable只能管理两层drawable,这里又说一个或多个是否矛盾了。在<transition>节点下确实可以有多个<item>元素,
但是只会显示前面的两个<item>,
后面添加的<item>虽然不会出错,但不会显示。 


<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</transition>


<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/onboarding_slide1"/>
    <item android:drawable="@drawable/onboarding_slide2"/>
</transition>

使用方式1:

<ImageView
       android:id="@+id/imageview" 
       android:scaleType="centerCrop"
       android:src="@drawable/transition"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

ImageView mImageView = (ImageView) findViewById(R.id.imageview);
TransitionDrawable trans = (TransitionDrawable) mImageView.getDrawable();
trans.startTransition(5000);

可重复渐变的TransitionDrawable

TransitionDrawable一般只能设置两张背景图片,而且动画效果不能重复。但是我们可以通过Handler+Thread实现TransitionDrawable循环渐变的效果。

public class MainActivity extends Activity {
    private ImageView mImageView;
    private TransitionDrawable trans;
    private int count;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTheme(android.R.style.Theme_NoTitleBar_Fullscreen);
        setContentView(R.layout.activity_main);
        mImageView = (ImageView) findViewById(R.id.imageview);
        trans = (TransitionDrawable) mImageView.getDrawable();
        mHandler.post(splashThread);
    }
    Handler mHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            if (msg.arg1 % 2 == 0) {
                trans.reverseTransition(msg.arg2);  // 反转动画,即从第二张过渡到第一张
            }else{
                trans.startTransition(msg.arg2); // 再从第一次过渡到第二张
            }
            mHandler.postDelayed(splashThread, msg.arg2);
            return false;
        }
    });
    Thread splashThread = new Thread(new Runnable() {
        @Override
        public void run() {
            Message msg = mHandler.obtainMessage();
            count++;
            msg.arg1 = count;
            msg.arg2 = 8000;  // 过渡时间为8秒
            mHandler.sendMessage(msg);
        }
    });
}

Android Drawable之LayerDrawable

一个LayerDrawable是一个可以管理一组drawable对象的drawable。在LayerDrawable的drawable资源按照列表的顺序绘制,所以列表的最后一个drawable绘制在最上层。 
在xml文件中使用<layer-list>作为根节点来定义LayerDrawable,通过item子节点定义每一层的drawable,layer-list没有属性节点,只包含item子节点。

<?xml version="1.0" encoding="utf-8"?>  
<layer-list  
    xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item  
        android:drawable="@[package:]drawable/drawable_resource"  
        android:id="@[+][package:]id/resource_name"  
        android:top="dimension"  
        android:right="dimension"  
        android:bottom="dimension"  
        android:left="dimension" />  
</layer-list>

元素: 
<layer-list>:作为根节点。 包含一个或者多个元素。 
<item>:定义一个drawable放置在layer drawable中。

<item>又具有如下属性:

android:id 资源ID,为这个item定义的唯一的资源ID,通过View.findViewById() 检索。
android:drawable 引用的drawable资源。
android:bottom/top/left/right/start/end 设置与相应方向的距离
android:gravity 在容器中的对齐方式
android:height 该层的高度。默认为图层的固有高度.
android:width 该层的宽度。默认为图层的固有宽度.
android:paddingBottom/End/Left/Right/Start/Top 设置相应方向的padding
android:paddingMode 表示层填充应该如何影响后续层的边界.取值为0:nest 1:stack


另外,在默认的情况下,每个drawable item都会缩放到合适的大小来适应视图。我们可以再<item>节点里加上<bitmap>元素来指定一个drawable,从而避免被缩放。除了<bitmap>元素,item节点里还可以使用<shape>等元素。

//bitmap
<item>
  <bitmap android:src="@drawable/image" android:gravity="center"/>
</item>

//shape
<item>
  <shape android:shape="rectangle">
       <solid android:color="#50000000"/>
  </shape>
</item>


  Drawable[] layers = new Drawable[3];
        layers[0] = getResources().getDrawable(R.drawable.ic_launcher);
        layers[1] = getResources().getDrawable(R.drawable.ic_launcher);
        layers[2] = getResources().getDrawable(R.drawable.ic_launcher);
        LayerDrawable layerDrawable = new LayerDrawable(layers);
        layerDrawable.setLayerInset(1, 10, 10, 0, 0);
        layerDrawable.setLayerInset(2, 20, 20, 0, 0);
        ((ImageView) findViewById(R.id.imageview)).setImageDrawable(layerDrawable);


其中setLayerInset方法原型为public void setLayerInset (int index, int l, int t, int r, int b)第一个参数为层的索引号,后面的四个参数分别为left、top、right和bottom。



Android Drawable之ClipDrawable

ClipDrawable可以根据设置的level值和方向对当前Drawable剪切后显示。它根据level的属性值,决定剪切区域的大小,
level的取值范围从0到10000,level为0时完全不显示,为10000时完全显示。
(The drawable is clipped completely and not visible when the level is 0 and fully revealed when the level is 10,000。) 
ClipDrawable常用来实现进度条,通过设置不同的level显示不同的进度。

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:clipOrientation=["horizontal" | "vertical"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />



		     元素: 
<clip>定义这是个ClipDrawable,必须作为根元素。

android:drawable Drawable资源。 必须。表示该ClipDrawable引用的drawable资源。
android:clipOrientation 裁剪的方向。 horizontal:水平方向 vertical:垂直方向
android:gravity 指定从哪个地方裁剪。必须是下面一个或多个值(多个值之间用”|”分隔) 
top 将这个对象放在容器的顶部,不改变其大小,当clipOrientation 是”vertical”,从底部(bottom)开始裁剪
bottom 将这个对象放在容器的底部,不改变其大小。当clipOrientation 是 “vertical”,从顶部(top)开始裁剪
left 将这个对象放在容器的左部,不改变其大小。当clipOrientation 是 “horizontal”,从右边(right)开始裁剪。这也是默认情况。
right 将这个对象放在容器的右部,不改变其大小。当clipOrientation 是 “horizontal”,从左边(left)开始裁剪。
center_vertical 将对象放在垂直中间,不改变其大小。裁剪的情况和”center“一样。
fill_vertical 垂直方向上不发生裁剪。(除非drawable的level是 0,才会不可见,表示全部裁剪完)
center_horizontal 将对象放在水平中间,不改变其大小。裁剪的情况和”center“一样。
fill_horizontal 水平方向上不发生裁剪。(除非drawable的level是 0,才会不可见,表示全部裁剪完)
center 将这个对象放在水平垂直坐标的中间,不改变其大小。当clipOrientation 是 “horizontal”裁剪发生在左右。当clipOrientation是”vertical”,裁剪发生在上下。
fill 填充整个容器,不会发生裁剪。(除非drawable的level是 0,才会不可见,表示全部裁剪完)。
clip_vertical 额外的选项,它能够把它的容器的上下边界,设置为子对象的上下边缘的裁剪边界。裁剪要基于对象垂直重力设置:如果重力设置为top,则裁剪下边,如果设置为bottom,则裁剪上边,否则则上下两边都要裁剪。
clip_horizontal 额外的选项,它能够把它的容器的左右边界,设置为子对象的左右边缘的裁剪边界。裁剪要基于对象垂直重力设置:如果重力设置为right,则裁剪左边,如果设置为left,则裁剪右边,否则则左右两边都要裁剪。
android:gravity需要和android:clipOrientation配合使用,不同的组合,裁剪的效果也不同。
示例: 
文件保存在 res/drawable/clip.xml:

//效果是设置level后,从左到右慢慢展示出来
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/android"
    android:clipOrientation="horizontal"
    android:gravity="left" />

在layout xml文件中使用:

<ImageView
    android:id="@+id/image"
    android:background="@drawable/clip"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" />

下面的代码实现了从左到右逐渐显示完整图片的功能:

public class MainActivity extends Activity {
    private ImageView imageview;
    private ClipDrawable drawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTheme(android.R.style.Theme_NoTitleBar_Fullscreen);
        setContentView(R.layout.activity_main);
        imageview = (ImageView) findViewById(R.id.image);
        drawable = (ClipDrawable) imageview.getDrawable();
        mHandler.post(mRunnable);
    }
    private Handler mHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            if (msg.what == 0x01) {
                drawable.setLevel(drawable.getLevel() + 200);
            }
            return true;
        }
    });
    private Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            if (drawable.getLevel() >= 10000) {
                mHandler.removeCallbacks(mRunnable);
            } else {
                mHandler.postDelayed(mRunnable, 200);
            }
            mHandler.sendEmptyMessage(0x01);
        }
    };
}


默认的level是0,表示全部裁剪掉了,图片不可见,但依然会占据位置。然后慢慢增加level,当level是10000,图片相当于没裁剪 


Android Drawable之ScaleDrawable

ScaleDrawable与ClipDrawable类似,可以根据设置的level值对drawable进行缩放,
但与ClipDrawable不同的是,ScaleDrawable还可以根据设置android:scaleWidth和android:scaleHeight进行相应百分比的缩放。

 元素: 
<scale>定义一个ScaleDrawable,必须作为根元素。

android:drawable Drawable 资源。必须的。引用一个drawable资源。
android:scaleHeight 缩放的高度,以百分比的方式表示drawable的缩放。形式例如:100%,12.5%。
android:scaleWidth 缩放的宽度,以百分比的方式表示drawable的缩放。形式例如:100%,12.5%。
android:scaleGravity 指定缩放后的gravity的位置。必须是下面的一个或多个值(多个值之间用”|”分隔) 
top 将这个对象放在容器的顶部,不改变其大小。
bottom 将这个对象放在容器的底部,不改变其大小。
left 将这个对象放在容器的左部,不改变其大小。默认值。
right 将这个对象放在容器的右部,不改变其大小。
center_vertical 将对象放在垂直中间,不改变其大小。
fill_vertical 如果需要的话,该对象的垂直尺寸将增加,以便完全填充它的容器。
center_horizontal 将对象放在水平中间,不改变其大小。
fill_horizontal 如果需要的话,该对象的水平尺寸将增加,以便完全填充它的容器。
center 将对象放置在其容器的中心和水平轴的中心位置,而不改变它的大小。
fill 如果需要的话,该对象的水平和垂直方向的大小将增加,使得完全填充它的容器。
clip_vertical 可以设置为在其容器边界上的顶部和/或底部边缘的附加选项。该剪辑是基于垂直gravity:一个顶部gravity剪辑的底部边缘,底部重力剪辑的顶部边缘,既不剪辑两个边。
clip_horizontal 与clip_vertical类似,只是剪辑是基于水平gravity。



<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                          "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                          "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:scaleHeight="percentage"
    android:scaleWidth="percentage" />



<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image"
    android:scaleGravity="center_vertical|center_horizontal"
    android:scaleHeight="50%"
    android:scaleWidth="50%" />


<ImageView   
    android:id="@+id/imgView"  
    android:src="@drawable/scale"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"/>

    但是如果我们直接运行,发现并没有显示图片,查看ScaleDrawable的源码,
    发现draw()方法有判断getLevel() != 0才绘制。而我们在没有setLevel()时,默认getLevel()都是0。

android/platform/frameworks/base/graphics/java/android/graphics/drawable/ScaleDrawable.java:

    @Override
    public void draw(Canvas canvas) {
        final Drawable d = getDrawable();
        if (d != null && d.getLevel() != 0) {
            d.draw(canvas);
        }
    }

所以如果我们想正常显示图片,还需要设置drawable的level。

    ImageView imageview = (ImageView) findViewById(R.id.image);
    ScaleDrawable drawable = (ScaleDrawable) imageview.getDrawable();
    drawable.setLevel(1);

那么为什么设置了level之后就会显示图片呢,而且我们应该设置多大呢?我们继续看源码,当设置level之后会触发onLevelChange事件:,

    @Override
    protected boolean onLevelChange(int level) {
        super.onLevelChange(level);
        onBoundsChange(getBounds());
        invalidateSelf();
        return true;
    }

我们可以看到在onLevelChange中又调用了onBoundsChange():

@Override
    protected void onBoundsChange(Rect bounds) {
        final Drawable d = getDrawable();
        final Rect r = mTmpRect;
        final boolean min = mState.mUseIntrinsicSizeAsMin;
        final int level = getLevel();
        int w = bounds.width();
        if (mState.mScaleWidth > 0) {
            final int iw = min ? d.getIntrinsicWidth() : 0;
            w -= (int) ((w - iw) * (MAX_LEVEL - level) * mState.mScaleWidth / MAX_LEVEL);
        }
        int h = bounds.height();
        if (mState.mScaleHeight > 0) {
            final int ih = min ? d.getIntrinsicHeight() : 0;
            h -= (int) ((h - ih) * (MAX_LEVEL - level) * mState.mScaleHeight / MAX_LEVEL);
        }
        final int layoutDirection = getLayoutDirection();
        Gravity.apply(mState.mGravity, w, h, bounds, r, layoutDirection);
        if (w > 0 && h > 0) {
            d.setBounds(r.left, r.top, r.right, r.bottom);
        }
    }


我们注意到在计算图片长宽的表达式中有几个变量,final int iw = min ? d.getIntrinsicWidth() : 0;这行中的min = mState.mUseIntrinsicSizeAsMin;
其实也是从xml文件中读取的:

state.mUseIntrinsicSizeAsMin = a.getBoolean( R.styleable.ScaleDrawable_useIntrinsicSizeAsMinimum, state.mUseIntrinsicSizeAsMin); 
但是我们一般没有设置这个值,默认为false,所以iw和ih也默认为0,MAX_LEVEL为10000.那么上面的表达式就可以简化为 

w -= (int) (w * (10000 - level) * mState.mScaleWidth / 10000); 
h -= (int) (h * (10000 - level) * mState.mScaleHeight / 10000); 

如果我们设置level=10000,即为:

w -= 0 
h -= 0

也就是图片原始大小,没有缩放效果。当level=0时图片又没有显示,所以我们一般设置level为1,
这样,图片就会根据xml中的android:scaleWidth和android:scaleHeight进行相应的缩放了。
例如我们设置长宽缩放比例为50%,那么图片长和宽都是缩小了一倍,图片大小实际是原来大小的四分之一。 


level ------------->  0  -- 1000   




https://blog.csdn.net/brian512/article/details/52224178   Android Drawable
https://blog.csdn.net/xuemengrui12/article/details/51366935 Android Drawable



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空白的泡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值