Android Drawable 那些不为人知的高效使用方法

转载请标明出处： http://blog.csdn.net/lmj623565791/article/details/43752383 ，本文出自： 【张鸿洋的博客】

1、概述

Drawable在我们平时的开发中。基本都会用到，并且给大家很的实用。那么什么是Drawable呢？可以在canvas上绘制的一个玩意。并且相比于View，并不须要去考虑measure、layout，只只要去考虑怎样draw（canavs）。

当然了，对于Drawable传统的使用方法。大家肯定不陌生 。今天主要给大家带来下面几个Drawable的使用方法：

1、自己定义Drawable。相比View来说，Drawable属于轻量级的、使用也非常easy。

以后自己定义实现一个效果的时候。能够改变View first的思想。尝试下Drawable first。

2、自己定义状态，相信大家对于State Drawable都不陌生，可是有没有尝试过去自己定义一个状态呢？

3、利用Drawable提升我们的UI Perfermance 。 怎样利用Drawable去提升我们的UI的性能。

2、Drawable基本概念

普通情况下，除了直接使用放在Drawable下的图片，事实上的Drawable的使用方法都和xml相关。我们能够使用shape、layer-list等标签绘制一些背景。还能够通过selector标签定义View的状态的效果等。当然了基本每一个标签都相应于一个真正的实体类。关系例如以下：（图片来自：Cyril Mottier ：master_android_drawables）

常见的使用方法这里就不举例了，以下開始看本文的重点。

2、自己定义Drawable

关于自己定义Drawable，能够通过写一个类，然后继承自Drawable ， 类似于自己定义View，当然了自己定义Drawable的核心方法仅仅有一个，那就是draw。

那么自己定义Drawable究竟有什么实际的作用呢？能干什么呢？

相信大家对于圆角、圆形图片都不陌生。而且我以前写过通过自己定义View实现的方式，详细可參考：

Android BitmapShader 实战 实现圆形、圆角图片

Android Xfermode 实战 实现圆形、圆角图片

那我今天要告诉你，不须要自己定义View。自己定义Drawable也能实现。并且更加简单、高效、使用范围更广（你能够作为不论什么View的背景）。

1、RoundImageDrawable

代码比較简单。以下看下RoundImageDrawable

[java]  view plain  copy

 

1. package com.zhy.view;  
2.   
3. import android.graphics.Bitmap;  
4. import android.graphics.BitmapShader;  
5. import android.graphics.Canvas;  
6. import android.graphics.ColorFilter;  
7. import android.graphics.Paint;  
8. import android.graphics.PixelFormat;  
9. import android.graphics.RectF;  
10. import android.graphics.Shader.TileMode;  
11. import android.graphics.drawable.Drawable;  
12.   
13. public class RoundImageDrawable extends Drawable  
14. {  
15.   
16.     private Paint mPaint;  
17.     private Bitmap mBitmap;  
18.   
19.     private RectF rectF;  
20.   
21.     public RoundImageDrawable(Bitmap bitmap)  
22.     {  
23.         mBitmap = bitmap;  
24.         BitmapShader bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP,  
25.                 TileMode.CLAMP);  
26.         mPaint = new Paint();  
27.         mPaint.setAntiAlias(true);  
28.         mPaint.setShader(bitmapShader);  
29.     }  
30.   
31.     @Override  
32.     public void setBounds(int left, int top, int right, int bottom)  
33.     {  
34.         super.setBounds(left, top, right, bottom);  
35.         rectF = new RectF(left, top, right, bottom);  
36.     }  
37.   
38.     @Override  
39.     public void draw(Canvas canvas)  
40.     {  
41.         canvas.drawRoundRect(rectF, 30, 30, mPaint);  
42.     }  
43.   
44.     @Override  
45.     public int getIntrinsicWidth()  
46.     {  
47.         return mBitmap.getWidth();  
48.     }  
49.   
50.     @Override  
51.     public int getIntrinsicHeight()  
52.     {  
53.         return mBitmap.getHeight();  
54.     }  
55.   
56.     @Override  
57.     public void setAlpha(int alpha)  
58.     {  
59.         mPaint.setAlpha(alpha);  
60.     }  
61.   
62.     @Override  
63.     public void setColorFilter(ColorFilter cf)  
64.     {  
65.         mPaint.setColorFilter(cf);  
66.     }  
67.   
68.     @Override  
69.     public int getOpacity()  
70.     {  
71.         return PixelFormat.TRANSLUCENT;  
72.     }  
73.   
74. }  

核心代码就是draw了。but。我们仅仅须要一行~~~~setAlpha、setColorFilter、getOpacity、draw这几个方法是必须实现的，只是除了draw以为，其它都非常easy。

getIntrinsicWidth、getIntrinsicHeight主要是为了在View使用wrap_content的时候，提供一下尺寸，默觉得-1可不是我们希望的。

setBounds就是去设置下绘制的范围。

ok，圆角图片就这么实现了，easy 不~~

看下使用方法：

[java]  view plain  copy

 

1. Bitmap bitmap = BitmapFactory.decodeResource(getResources(),  
2.                 R.drawable.mv);  
3.         ImageView iv = (ImageView) findViewById(R.id.id_one);  
4.         iv.setImageDrawable(new RoundImageDrawable(bitmap));  

ok，贴一下我们的效果图。两个ImageView和一个TextView

能够看到，不只用于ImageView去实现圆角图片，而且能够作为不论什么View的背景。在ImageView中的拉伸的情况。配下ScaleType就可以。在其它View作为背景时，假设出现拉伸情况。请參考：Android BitmapShader 实战 实现圆形、圆角图片 。 足够具体了。

2、CircleImageDrawable

那么下来，我们再看看自己定义圆形Drawable的写法:

[java]  view plain  copy

 

1. package com.zhy.view;  
2.   
3. import android.graphics.Bitmap;  
4. import android.graphics.BitmapShader;  
5. import android.graphics.Canvas;  
6. import android.graphics.ColorFilter;  
7. import android.graphics.Paint;  
8. import android.graphics.PixelFormat;  
9. import android.graphics.RectF;  
10. import android.graphics.Shader.TileMode;  
11. import android.graphics.drawable.Drawable;  
12.   
13. public class CircleImageDrawable extends Drawable  
14. {  
15.   
16.     private Paint mPaint;  
17.     private int mWidth;  
18.     private Bitmap mBitmap ;   
19.   
20.     public CircleImageDrawable(Bitmap bitmap)  
21.     {  
22.         mBitmap = bitmap ;   
23.         BitmapShader bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP,  
24.                 TileMode.CLAMP);  
25.         mPaint = new Paint();  
26.         mPaint.setAntiAlias(true);  
27.         mPaint.setShader(bitmapShader);  
28.         mWidth = Math.min(mBitmap.getWidth(), mBitmap.getHeight());  
29.     }  
30.   
31.     @Override  
32.     public void draw(Canvas canvas)  
33.     {  
34.         canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mPaint);  
35.     }  
36.   
37.     @Override  
38.     public int getIntrinsicWidth()  
39.     {  
40.         return mWidth;  
41.     }  
42.   
43.     @Override  
44.     public int getIntrinsicHeight()  
45.     {  
46.         return mWidth;  
47.     }  
48.   
49.     @Override  
50.     public void setAlpha(int alpha)  
51.     {  
52.         mPaint.setAlpha(alpha);  
53.     }  
54.   
55.     @Override  
56.     public void setColorFilter(ColorFilter cf)  
57.     {  
58.         mPaint.setColorFilter(cf);  
59.     }  
60.   
61.     @Override  
62.     public int getOpacity()  
63.     {  
64.         return PixelFormat.TRANSLUCENT;  
65.     }  
66.   
67. }  

一样出奇的简单，再看一眼效果图：

ok。关于自己定义Drawable的样例over~~~接下来看自己定义状态的。

上述參考了：Romain Guy's Blog

3、自己定义Drawable State

关于Drawable State，state_pressed神马的，相信大家都掌握的特别熟练了。

那么接下来。我们有个需求，类似于邮箱，邮件以ListView形式展示。可是我们须要一个状态去标识出未读和已读：so，我们自己定义一个状态state_message_readed。

效果图：

能够看到，假设是已读的邮件。我们的图标是打开状态，且有个淡红色的背景。那么怎样通过自己定义drawable state 实现呢？

自己定义drawable state 须要分为下面几个步骤：

1、res/values/新建一个xml文件：drawable_status.xml

[html]  view plain  copy

 

1. <?
   xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <declare-styleable name="MessageStatus">  
4.         <attr name="state_message_readed" format="boolean" />  
5.     </declare-styleable>  
6. </resources>  

2、继承Item的容器

我们这里Item选择RelativeLayout实现，我们须要继承它，然后复写它的onCreateDrawableState方法。把我们自己定义的状态在合适的时候加入进去。

[java]  view plain  copy

 

1. package com.zhy.view;  
2.   
3. import com.zhy.sample.drawable.R;  
4.   
5. import android.content.Context;  
6. import android.util.AttributeSet;  
7. import android.widget.RelativeLayout;  
8.   
9. public class MessageListItem extends RelativeLayout  
10. {  
11.   
12.     private static final int[] STATE_MESSAGE_READED = { R.attr.state_message_readed };  
13.     private boolean mMessgeReaded = false;  
14.   
15.     public MessageListItem(Context context, AttributeSet attrs)  
16.     {  
17.         super(context, attrs);  
18.     }  
19.   
20.     public void setMessageReaded(boolean readed)  
21.     {  
22.         if (this.mMessgeReaded != readed)  
23.         {  
24.             mMessgeReaded = readed;  
25.             refreshDrawableState();  
26.         }  
27.     }  
28.   
29.     @Override  
30.     protected int[] onCreateDrawableState(int extraSpace)  
31.     {  
32.         if (mMessgeReaded)  
33.         {  
34.             final int[] drawableState = super  
35.                     .onCreateDrawableState(extraSpace + 1);  
36.             mergeDrawableStates(drawableState, STATE_MESSAGE_READED);  
37.             return drawableState;  
38.         }  
39.         return super.onCreateDrawableState(extraSpace);  
40.     }  
41.   
42. }  

代码不复杂，声明了一个STATE_MESSAGE_READED。然后在mMessgeReaded=true的情况下，通过onCreateDrawableState方法。增加我们自己定义的状态。

类似的代码，大家能够看看CompoundButton（CheckBox父类）的源代码。它有个checked状态：

[java]  view plain  copy

 

1. @Override  
2.    protected int[] onCreateDrawableState(int extraSpace) {  
3.        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);  
4.        if (isChecked()) {  
5.            mergeDrawableStates(drawableState, CHECKED_STATE_SET);  
6.        }  
7.        return drawableState;  
8.    }  

3、使用

布局文件：

[html]  view plain  copy

 

1. <com.zhy.view.MessageListItem xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="50dp"  
5.     android:background="@drawable/message_item_bg" >  
6.   
7.     <ImageView  
8.         android:id="@+id/id_msg_item_icon"  
9.         android:layout_width="30dp"  
10.         android:src="@drawable/message_item_icon_bg"  
11.         android:layout_height="wrap_content"  
12.         android:duplicateParentState="true"  
13.         android:layout_alignParentLeft="true"  
14.         android:layout_centerVertical="true"  
15.       />  
16.   
17.     <TextView  
18.         android:id="@+id/id_msg_item_text"  
19.         android:layout_width="match_parent"  
20.         android:layout_height="wrap_content"  
21.         android:layout_centerVertical="true"  
22.         android:layout_toRightOf="@id/id_msg_item_icon" />  
23.   
24. </com.zhy.view.MessageListItem>  

非常easy，一个图标，一个文本；

Activity

[java]  view plain  copy

 

1. package com.zhy.sample.drawable;  
2.   
3. import com.zhy.view.MessageListItem;  
4.   
5. import android.app.ListActivity;  
6. import android.os.Bundle;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10. import android.widget.ArrayAdapter;  
11. import android.widget.TextView;  
12.   
13. public class CustomStateActivity extends ListActivity  
14. {  
15.     private Message[] messages = new Message[] {  
16.             new Message("Gas bill overdue", true),  
17.             new Message("Congratulations, you've won!", true),  
18.             new Message("I love you!", false),  
19.             new Message("Please reply!", false),  
20.             new Message("You ignoring me?

    "

    , false),  
21.             new Message("Not heard from you", false),  
22.             new Message("Electricity bill", true),  
23.             new Message("Gas bill", true), new Message("Holiday plans", false),  
24.             new Message("Marketing stuff", false), };  
25.   
26.     @Override  
27.     protected void onCreate(Bundle savedInstanceState)  
28.     {  
29.         super.onCreate(savedInstanceState);  
30.   
31.         getListView().setAdapter(new ArrayAdapter<Message>(this, -1, messages)  
32.         {  
33.             private LayoutInflater mInflater = LayoutInflater  
34.                     .from(getContext());  
35.   
36.             @Override  
37.             public View getView(int position, View convertView, ViewGroup parent)  
38.             {  
39.                 if (convertView == null)  
40.                 {  
41.                     convertView = mInflater.inflate(R.layout.item_msg_list,  
42.                             parent, false);  
43.                 }  
44.                 MessageListItem messageListItem = (MessageListItem) convertView;  
45.                 TextView tv = (TextView) convertView  
46.                         .findViewById(R.id.id_msg_item_text);  
47.                 tv.setText(getItem(position).message);  
48.                 messageListItem.setMessageReaded(getItem(position).readed);  
49.                 return convertView;  
50.             }  
51.   
52.         });  
53.   
54.     }  
55. }  

代码非常easy。可是能够看到，我们须要在getView里面中去使用调用setMessageReaded方法，当然了其它的一些状态。肯定也要手动触发，比方在ACTION_DOWN中触发pressed等。

请勿纠结咋没有使用ViewHolder什么的。自己加入下即可。

本例參考自：Example from github 

4、提升我们的UI Perfermance 

如今大家越来越注重性能问题，事实上不是必需那么在乎，可是既然大家在乎了。这里通过Cyril Mottier ：master_android_drawables ppt中的一个样例来说明假设利用Drawable来提升我们的UI的性能。

大家看这样一个效果图：

布局文件：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@color/app_background"  
6.     android:padding="8dp" >  
7.   
8.     <ImageView  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_gravity="center"  
12.         android:layout_marginBottom="24dp"  
13.         android:src="@drawable/logo" />  
14.   
15.     <LinearLayout  
16.         android:layout_width="match_parent"  
17.         android:layout_height="48dp"  
18.         android:layout_gravity="bottom"  
19.         android:orientation="horizontal" >  
20.   
21.         <Button  
22.             android:layout_width="0dp"  
23.             android:layout_height="fill_parent"  
24.             android:layout_weight="1"  
25.             android:text="@string/sign_up" />  
26.   
27.         <Button  
28.             android:layout_width="0dp"  
29.             android:layout_height="fill_parent"  
30.             android:layout_weight="1"  
31.             android:text="@string/sign_in" />  
32.     </LinearLayout>  
33.   
34. </FrameLayout>  

能够看到最外层是FrameLayout不过为了设置背景图和padding。这种布局相信非常多人也写过。

再看看这个布局作为APP启动时。用户的直观效果：

用户首先看到一个白板，然后显示出我们的页面。接下来，我们将利用Drawable改善我们的UI性能以及用户体验。

1、首先，我们去除我们最外层的FrameLayout。然后自己定义一个drawable的xml，叫做logo.xml

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item>  
4.   
5.         <shape android:shape="rectangle" >  
6.             <solid android:color="@color/app_background" />  
7.         </shape>  
8.     </item>  
9.   
10.     <item android:bottom="48dp">  
11.         <bitmap  
12.             android:gravity="center"  
13.             android:src="@drawable/logo" />  
14.     </item>  
15. </layer-list>  

ok，这个drawable是设置了我们的背景和logo。

2、将其作为我们当前Activity的windowBackground

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <style  
4.         name="Theme.Default.NoActionBar"  
5.         parent="@android:style/Theme.Holo.Light.NoActionBar" >  
6.         <item name="android:windowBackground">@drawable/login</item>  
7.     </style>  
8. </resources>  

3、设置到Activity上：

[html]  view plain  copy

 

1. <activity  
2. android:name="LoginActivity"  
3. android:theme="@style/Theme.Default.NoActionBar">  

Ok，这样不仅最小化了我们的layout，如今我们的layout里面仅仅有一个LinearLayout和两个button；而且提升了用户体验，如今用户的直观效果时：

是不是体验好非常多，个人非常喜欢这个样例~~

ok，到此我们的文章就over了~~~大多数内容參考自一些牛人写的样例。样例还是棒棒哒，大家看完本文的同一时候。也能够去挖掘挖掘一些东西~~

源代码点击下载