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

分类：【Android 自定义控件实战】【Android 源码解析】 2015-02-26 09:21 22935人阅读评论(49) 收藏举报 Android Drawable Custom State RoundImageView

目录(?)[+]

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

1、概述

Drawable在我们平时的开发中，基本都会用到，而且给大家非常的有用。那么什么是Drawable呢？能够在canvas上绘制的一个玩意，而且相比于View，并不需要去考虑measure、layout，仅仅只要去考虑如何draw（canavs）。当然了，对于Drawable传统的用法，大家肯定不陌生，今天主要给大家带来以下几个Drawable的用法：

1、自定义Drawable，相比View来说，Drawable属于轻量级的、使用也很简单。以后自定义实现一个效果的时候，可以改变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）

Android Drawable 那些不为人知的高效用法_第1张图片

常见的用法这里就不举例了，下面开始看本文的重点。

2、自定义Drawable

关于自定义Drawable，可以通过写一个类，然后继承自Drawable ，类似于自定义View，当然了自定义Drawable的核心方法只有一个，那就是draw。那么自定义Drawable到底有什么实际的作用呢？能干什么呢？

相信大家对于圆角、圆形图片都不陌生，并且我曾经写过通过自定义View实现的方式，具体可参考：

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

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

那我今天要告诉你，不需要自定义View，自定义Drawable也能实现，而且更加简单、高效、使用范围更广（你可以作为任何View的背景）。

1、RoundImageDrawable

代码比较简单，下面看下RoundImageDrawable

[java] view plain copy

packagecom.zhy.view;
importandroid.graphics.Bitmap;
importandroid.graphics.BitmapShader;
importandroid.graphics.Canvas;
importandroid.graphics.ColorFilter;
importandroid.graphics.Paint;
importandroid.graphics.PixelFormat;
importandroid.graphics.RectF;
importandroid.graphics.Shader.TileMode;
importandroid.graphics.drawable.Drawable;
publicclassRoundImageDrawableextendsDrawable
{
privatePaintmPaint;
privateBitmapmBitmap;
privateRectFrectF;
publicRoundImageDrawable(Bitmapbitmap)
{
mBitmap=bitmap;
BitmapShaderbitmapShader=newBitmapShader(bitmap,TileMode.CLAMP,
TileMode.CLAMP);
mPaint=newPaint();
mPaint.setAntiAlias(true);
mPaint.setShader(bitmapShader);
}
@Override
publicvoidsetBounds(intleft,inttop,intright,intbottom)
{
super.setBounds(left,top,right,bottom);
rectF=newRectF(left,top,right,bottom);
}
@Override
publicvoiddraw(Canvascanvas)
{
canvas.drawRoundRect(rectF,30,30,mPaint);
}
@Override
publicintgetIntrinsicWidth()
{
returnmBitmap.getWidth();
}
@Override
publicintgetIntrinsicHeight()
{
returnmBitmap.getHeight();
}
@Override
publicvoidsetAlpha(intalpha)
{
mPaint.setAlpha(alpha);
}
@Override
publicvoidsetColorFilter(ColorFiltercf)
{
mPaint.setColorFilter(cf);
}
@Override
publicintgetOpacity()
{
returnPixelFormat.TRANSLUCENT;
}
}

核心代码就是draw了，but，我们只需要一行~~~~setAlpha、setColorFilter、getOpacity、draw这几个方法是必须实现的，不过除了draw以为，其他都很简单。getIntrinsicWidth、getIntrinsicHeight主要是为了在View使用wrap_content的时候，提供一下尺寸，默认为-1可不是我们希望的。setBounds就是去设置下绘制的范围。

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

看下用法：

[java] view plain copy

Bitmapbitmap=BitmapFactory.decodeResource(getResources(),
R.drawable.mv);
ImageViewiv=(ImageView)findViewById(R.id.id_one);
iv.setImageDrawable(newRoundImageDrawable(bitmap));

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

Android Drawable 那些不为人知的高效用法_第2张图片

可以看到，不仅仅用于ImageView去实现圆角图片，并且可以作为任何View的背景，在ImageView中的拉伸的情况，配下ScaleType即可。在其他View作为背景时，如果出现拉伸情况，请参考：Android BitmapShader 实战实现圆形、圆角图片。足够详细了。

2、CircleImageDrawable

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

[java] view plain copy

packagecom.zhy.view;
importandroid.graphics.Bitmap;
importandroid.graphics.BitmapShader;
importandroid.graphics.Canvas;
importandroid.graphics.ColorFilter;
importandroid.graphics.Paint;
importandroid.graphics.PixelFormat;
importandroid.graphics.RectF;
importandroid.graphics.Shader.TileMode;
importandroid.graphics.drawable.Drawable;
publicclassCircleImageDrawableextendsDrawable
{
privatePaintmPaint;
privateintmWidth;
privateBitmapmBitmap;
publicCircleImageDrawable(Bitmapbitmap)
{
mBitmap=bitmap;
BitmapShaderbitmapShader=newBitmapShader(bitmap,TileMode.CLAMP,
TileMode.CLAMP);
mPaint=newPaint();
mPaint.setAntiAlias(true);
mPaint.setShader(bitmapShader);
mWidth=Math.min(mBitmap.getWidth(),mBitmap.getHeight());
}
@Override
publicvoiddraw(Canvascanvas)
{
canvas.drawCircle(mWidth/2,mWidth/2,mWidth/2,mPaint);
}
@Override
publicintgetIntrinsicWidth()
{
returnmWidth;
}
@Override
publicintgetIntrinsicHeight()
{
returnmWidth;
}
@Override
publicvoidsetAlpha(intalpha)
{
mPaint.setAlpha(alpha);
}
@Override
publicvoidsetColorFilter(ColorFiltercf)
{
mPaint.setColorFilter(cf);
}
@Override
publicintgetOpacity()
{
returnPixelFormat.TRANSLUCENT;
}
}

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

Android Drawable 那些不为人知的高效用法_第3张图片

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

上述参考了：Romain Guy's Blog

3、自定义Drawable State

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

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

效果图：

Android Drawable 那些不为人知的高效用法_第4张图片

可以看到，如果是已读的邮件，我们的图标是打开状态，且有个淡红色的背景。那么如何通过自定义drawable state 实现呢？

自定义drawable state 需要分为以下几个步骤：

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

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<declare-styleablename="MessageStatus">
<attrname="state_message_readed"format="boolean"/>
</declare-styleable>
</resources>

2、继承Item的容器

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

[java] view plain copy

packagecom.zhy.view;
importcom.zhy.sample.drawable.R;
importandroid.content.Context;
importandroid.util.AttributeSet;
importandroid.widget.RelativeLayout;
publicclassMessageListItemextendsRelativeLayout
{
privatestaticfinalint[]STATE_MESSAGE_READED={R.attr.state_message_readed};
privatebooleanmMessgeReaded=false;
publicMessageListItem(Contextcontext,AttributeSetattrs)
{
super(context,attrs);
}
publicvoidsetMessageReaded(booleanreaded)
{
if(this.mMessgeReaded!=readed)
{
mMessgeReaded=readed;
refreshDrawableState();
}
}
@Override
protectedint[]onCreateDrawableState(intextraSpace)
{
if(mMessgeReaded)
{
finalint[]drawableState=super
.onCreateDrawableState(extraSpace+1);
mergeDrawableStates(drawableState,STATE_MESSAGE_READED);
returndrawableState;
}
returnsuper.onCreateDrawableState(extraSpace);
}
}

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

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

[java] view plain copy

@Override
protectedint[]onCreateDrawableState(intextraSpace){
finalint[]drawableState=super.onCreateDrawableState(extraSpace+1);
if(isChecked()){
mergeDrawableStates(drawableState,CHECKED_STATE_SET);
}
returndrawableState;
}

3、使用

布局文件：

[html] view plain copy

<com.zhy.view.MessageListItemxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/message_item_bg">
<ImageView
android:id="@+id/id_msg_item_icon"
android:layout_width="30dp"
android:src="@drawable/message_item_icon_bg"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<TextView
android:id="@+id/id_msg_item_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/id_msg_item_icon"/>
</com.zhy.view.MessageListItem>

很简单，一个图标，一个文本；

Activity

[java] view plain copy

packagecom.zhy.sample.drawable;
importcom.zhy.view.MessageListItem;
importandroid.app.ListActivity;
importandroid.os.Bundle;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ArrayAdapter;
importandroid.widget.TextView;
publicclassCustomStateActivityextendsListActivity
{
privateMessage[]messages=newMessage[]{
newMessage("Gasbilloverdue",true),
newMessage("Congratulations,you'vewon!",true),
newMessage("Iloveyou!",false),
newMessage("Pleasereply!",false),
newMessage("Youignoringme?",false),
newMessage("Notheardfromyou",false),
newMessage("Electricitybill",true),
newMessage("Gasbill",true),newMessage("Holidayplans",false),
newMessage("Marketingstuff",false),};
@Override
protectedvoidonCreate(BundlesavedInstanceState)
{
super.onCreate(savedInstanceState);
getListView().setAdapter(newArrayAdapter<Message>(this,-1,messages)
{
privateLayoutInflatermInflater=LayoutInflater
.from(getContext());
@Override
publicViewgetView(intposition,ViewconvertView,ViewGroupparent)
{
if(convertView==null)
{
convertView=mInflater.inflate(R.layout.item_msg_list,
parent,false);
}
MessageListItemmessageListItem=(MessageListItem)convertView;
TextViewtv=(TextView)convertView
.findViewById(R.id.id_msg_item_text);
tv.setText(getItem(position).message);
messageListItem.setMessageReaded(getItem(position).readed);
returnconvertView;
}
});
}
}

代码很简单，但是可以看到，我们需要在getView里面中去使用调用setMessageReaded方法，当然了其他的一些状态，肯定也要手动触发，比如在ACTION_DOWN中触发pressed等。请勿纠结咋没有使用ViewHolder什么的，自己添加下就行。

本例参考自：Example from github

4、提升我们的UI Perfermance

现在大家越来越注重性能问题，其实没必要那么在乎，但是既然大家在乎了，这里通过Cyril Mottier ：master_android_drawables ppt中的一个例子来说明如果利用Drawable来提升我们的UI的性能。

大家看这样一个效果图：

Android Drawable 那些不为人知的高效用法_第5张图片

布局文件：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/app_background"
android:padding="8dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="24dp"
android:src="@drawable/logo"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="@string/sign_up"/>
<Button
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="@string/sign_in"/>
</LinearLayout>
</FrameLayout>

可以看到最外层是FrameLayout仅仅是为了设置背景图和padding，这样的布局相信很多人也写过。

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

Android Drawable 那些不为人知的高效用法_第6张图片

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

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

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shapeandroid:shape="rectangle">
<solidandroid:color="@color/app_background"/>
</shape>
</item>
<itemandroid:bottom="48dp">
<bitmap
android:gravity="center"
android:src="@drawable/logo"/>
</item>
</layer-list>

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

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

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<style
name="Theme.Default.NoActionBar"
parent="@android:style/Theme.Holo.Light.NoActionBar">
<itemname="android:windowBackground">@drawable/login</item>
</style>
</resources>

3、设置到Activity上：

[html] view plain copy

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

Ok，这样不仅最小化了我们的layout，现在我们的layout里面只有一个LinearLayout和两个按钮；并且提升了用户体验，现在用户的直观效果时：

Android Drawable 那些不为人知的高效用法_第7张图片

是不是体验好很多，个人很喜欢这个例子~~

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

源码点击下载

---------------------------------------------------------------------------------

群号：423372824

博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：

视频目录地址：本人录制的视频教程

微信公众号请扫描：

Android Drawable 那些不为人知的高效用法_第8张图片

--------------------------------------------------------------------------------------------------------

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

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

1、概述

2、Drawable基本概念

2、自定义Drawable

1、RoundImageDrawable

2、CircleImageDrawable

3、自定义Drawable State

4、提升我们的UI Perfermance

更多相关文章

随机推荐