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属于轻量级的、使用也很简单。以后自定义实现一个效果的时候,可以改变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 实战 实现圆形、圆角图片
那我今天要告诉你,不需要自定义View,自定义Drawable也能实现,而且更加简单、高效、使用范围更广(你可以作为任何View的背景)。
1、RoundImageDrawable
代码比较简单,下面看下RoundImageDrawable
- package com.zhy.view;
- import android.graphics.Bitmap;
- import android.graphics.BitmapShader;
- import android.graphics.Canvas;
- import android.graphics.ColorFilter;
- import android.graphics.Paint;
- import android.graphics.PixelFormat;
- import android.graphics.RectF;
- import android.graphics.Shader.TileMode;
- import android.graphics.drawable.Drawable;
- public class RoundImageDrawable extends Drawable
- {
- private Paint mPaint;
- private Bitmap mBitmap;
- private RectF rectF;
- public RoundImageDrawable(Bitmap bitmap)
- {
- mBitmap = bitmap;
- BitmapShader bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP,
- TileMode.CLAMP);
- mPaint = new Paint();
- mPaint.setAntiAlias(true);
- mPaint.setShader(bitmapShader);
- }
- @Override
- public void setBounds(int left, int top, int right, int bottom)
- {
- super.setBounds(left, top, right, bottom);
- rectF = new RectF(left, top, right, bottom);
- }
- @Override
- public void draw(Canvas canvas)
- {
- canvas.drawRoundRect(rectF, 30, 30, mPaint);
- }
- @Override
- public int getIntrinsicWidth()
- {
- return mBitmap.getWidth();
- }
- @Override
- public int getIntrinsicHeight()
- {
- return mBitmap.getHeight();
- }
- @Override
- public void setAlpha(int alpha)
- {
- mPaint.setAlpha(alpha);
- }
- @Override
- public void setColorFilter(ColorFilter cf)
- {
- mPaint.setColorFilter(cf);
- }
- @Override
- public int getOpacity()
- {
- return PixelFormat.TRANSLUCENT;
- }
- }
核心代码就是draw了,but,我们只需要一行~~~~setAlpha、setColorFilter、getOpacity、draw这几个方法是必须实现的,不过除了draw以为,其他都很简单。getIntrinsicWidth、getIntrinsicHeight主要是为了在View使用wrap_content的时候,提供一下尺寸,默认为-1可不是我们希望的。setBounds就是去设置下绘制的范围。
ok,圆角图片就这么实现了,easy 不~~
看下用法:
- Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
- R.drawable.mv);
- ImageView iv = (ImageView) findViewById(R.id.id_one);
- iv.setImageDrawable(new RoundImageDrawable(bitmap));
ok,贴一下我们的效果图,两个ImageView和一个TextView
可以看到,不仅仅用于ImageView去实现圆角图片,并且可以作为任何View的背景,在ImageView中的拉伸的情况,配下ScaleType即可。在其他View作为背景时,如果出现拉伸情况,请参考:Android BitmapShader 实战 实现圆形、圆角图片 。 足够详细了。
2、CircleImageDrawable
那么下来,我们再看看自定义圆形Drawable的写法:
- package com.zhy.view;
- import android.graphics.Bitmap;
- import android.graphics.BitmapShader;
- import android.graphics.Canvas;
- import android.graphics.ColorFilter;
- import android.graphics.Paint;
- import android.graphics.PixelFormat;
- import android.graphics.RectF;
- import android.graphics.Shader.TileMode;
- import android.graphics.drawable.Drawable;
- public class CircleImageDrawable extends Drawable
- {
- private Paint mPaint;
- private int mWidth;
- private Bitmap mBitmap ;
- public CircleImageDrawable(Bitmap bitmap)
- {
- mBitmap = bitmap ;
- BitmapShader bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP,
- TileMode.CLAMP);
- mPaint = new Paint();
- mPaint.setAntiAlias(true);
- mPaint.setShader(bitmapShader);
- mWidth = Math.min(mBitmap.getWidth(), mBitmap.getHeight());
- }
- @Override
- public void draw(Canvas canvas)
- {
- canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mPaint);
- }
- @Override
- public int getIntrinsicWidth()
- {
- return mWidth;
- }
- @Override
- public int getIntrinsicHeight()
- {
- return mWidth;
- }
- @Override
- public void setAlpha(int alpha)
- {
- mPaint.setAlpha(alpha);
- }
- @Override
- public void setColorFilter(ColorFilter cf)
- {
- mPaint.setColorFilter(cf);
- }
- @Override
- public int getOpacity()
- {
- return PixelFormat.TRANSLUCENT;
- }
- }
一样出奇的简单,再看一眼效果图:
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
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <declare-styleable name="MessageStatus">
- <attr name="state_message_readed" format="boolean" />
- </declare-styleable>
- </resources>
2、继承Item的容器
我们这里Item选择RelativeLayout实现,我们需要继承它,然后复写它的onCreateDrawableState方法,把我们自定义的状态在合适的时候添加进去。
- package com.zhy.view;
- import com.zhy.sample.drawable.R;
- import android.content.Context;
- import android.util.AttributeSet;
- import android.widget.RelativeLayout;
- public class MessageListItem extends RelativeLayout
- {
- private static final int[] STATE_MESSAGE_READED = { R.attr.state_message_readed };
- private boolean mMessgeReaded = false;
- public MessageListItem(Context context, AttributeSet attrs)
- {
- super(context, attrs);
- }
- public void setMessageReaded(boolean readed)
- {
- if (this.mMessgeReaded != readed)
- {
- mMessgeReaded = readed;
- refreshDrawableState();
- }
- }
- @Override
- protected int[] onCreateDrawableState(int extraSpace)
- {
- if (mMessgeReaded)
- {
- final int[] drawableState = super
- .onCreateDrawableState(extraSpace + 1);
- mergeDrawableStates(drawableState, STATE_MESSAGE_READED);
- return drawableState;
- }
- return super.onCreateDrawableState(extraSpace);
- }
- }
代码不复杂,声明了一个STATE_MESSAGE_READED,然后在mMessgeReaded=true的情况下,通过onCreateDrawableState方法,加入我们自定义的状态。
类似的代码,大家可以看看CompoundButton(CheckBox父类)的源码,它有个checked状态:
- @Override
- protected int[] onCreateDrawableState(int extraSpace) {
- final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
- if (isChecked()) {
- mergeDrawableStates(drawableState, CHECKED_STATE_SET);
- }
- return drawableState;
- }
3、使用
布局文件:
- <com.zhy.view.MessageListItem xmlns: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
- package com.zhy.sample.drawable;
- import com.zhy.view.MessageListItem;
- import android.app.ListActivity;
- import android.os.Bundle;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.ArrayAdapter;
- import android.widget.TextView;
- public class CustomStateActivity extends ListActivity
- {
- private Message[] messages = new Message[] {
- new Message("Gas bill overdue", true),
- new Message("Congratulations, you've won!", true),
- new Message("I love you!", false),
- new Message("Please reply!", false),
- new Message("You ignoring me?", false),
- new Message("Not heard from you", false),
- new Message("Electricity bill", true),
- new Message("Gas bill", true), new Message("Holiday plans", false),
- new Message("Marketing stuff", false), };
- @Override
- protected void onCreate(Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- getListView().setAdapter(new ArrayAdapter<Message>(this, -1, messages)
- {
- private LayoutInflater mInflater = LayoutInflater
- .from(getContext());
- @Override
- public View getView(int position, View convertView, ViewGroup parent)
- {
- if (convertView == null)
- {
- convertView = mInflater.inflate(R.layout.item_msg_list,
- parent, false);
- }
- MessageListItem messageListItem = (MessageListItem) convertView;
- TextView tv = (TextView) convertView
- .findViewById(R.id.id_msg_item_text);
- tv.setText(getItem(position).message);
- messageListItem.setMessageReaded(getItem(position).readed);
- return convertView;
- }
- });
- }
- }
代码很简单,但是可以看到,我们需要在getView里面中去使用调用setMessageReaded方法,当然了其他的一些状态,肯定也要手动触发,比如在ACTION_DOWN中触发pressed等。请勿纠结咋没有使用ViewHolder什么的,自己添加下就行。
本例参考自:Example from github
4、提升我们的UI Perfermance
现在大家越来越注重性能问题,其实没必要那么在乎,但是既然大家在乎了,这里通过Cyril Mottier :master_android_drawables ppt中的一个例子来说明如果利用Drawable来提升我们的UI的性能。
大家看这样一个效果图:
布局文件:
- <?xml version="1.0" encoding="utf-8"?>
- <FrameLayout xmlns: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启动时,用户的直观效果:
用户首先看到一个白板,然后显示出我们的页面。接下来,我们将利用Drawable改善我们的UI性能以及用户体验。
1、首先,我们去除我们最外层的FrameLayout,然后自定义一个drawable的xml,叫做logo.xml
- <?xml version="1.0" encoding="utf-8"?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
- <item>
- <shape android:shape="rectangle" >
- <solid android:color="@color/app_background" />
- </shape>
- </item>
- <item android:bottom="48dp">
- <bitmap
- android:gravity="center"
- android:src="@drawable/logo" />
- </item>
- </layer-list>
ok,这个drawable是设置了我们的背景和logo;
2、将其作为我们当前Activity的windowBackground
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <style
- name="Theme.Default.NoActionBar"
- parent="@android:style/Theme.Holo.Light.NoActionBar" >
- <item name="android:windowBackground">@drawable/login</item>
- </style>
- </resources>
3、设置到Activity上:
- <activity
- android:name="LoginActivity"
- android:theme="@style/Theme.Default.NoActionBar">
Ok,这样不仅最小化了我们的layout,现在我们的layout里面只有一个LinearLayout和两个按钮;并且提升了用户体验,现在用户的直观效果时:
是不是体验好很多,个人很喜欢这个例子~~
ok,到此我们的文章就over了~~~大多数内容参考自一些牛人写的例子,例子还是棒棒哒,大家看完本文的同时,也可以去挖掘挖掘一些东西~~
Android Drawable 那些不为人知的高效用法的更多相关文章
- Android Drawable 那些不为人知的高效使用方法
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43752383,本文出自:[张鸿洋的博客] 1.概述 Drawable在我们平时的 ...
- android中Handle类的用法
android中Handle类的用法 当我们在处理下载或是其他需要长时间执行的任务时,如果直接把处理函数放Activity的OnCreate或是OnStart中,会导致执行过程中整个Activity无 ...
- Android Drawable 与 LayerList综合汇总
先看需求.要求这样的效果 上代码 <?xml version="1.0" encoding="utf-8"? > <layer-list xm ...
- Android Support Library 23.2用法简析
写在前面的几句话 前几天谷歌发布了android-support-library-23.2支持库,这一次23.2版本增加了一些新的支持库以及新的功能.接下来这篇文章,就是对这些新功能部分做简单的用法介 ...
- Android Selector和Shape的用法
一.Shape的用法 :shape用于设定形状,可以在selector,layout等里面使用,有6个子标签,各属性如下: 填充:设置填充的颜色 间隔:设置四个方向上的间隔 大小:设置大小 圆角:同时 ...
- Android View.setId(int id) 用法
Android View.setId(int id) 用法 当要在代码中动态的添加View并且为其设置id时,如果直接用一个int值时,Studio会警告. 经过查询,动态设置id的方法有两种; 1. ...
- Android Intent的几种用法全面总结
Android Intent的几种用法全面总结 Intent, 用法 Intent应该算是Android中特有的东西.你可以在Intent中指定程序要执行的动作(比如:view,edit,dial), ...
- Android Drawable的9种子类 介绍
原文: Android Drawable的9种子类 介绍 Drawable 在android里面 就是代表着图像,注意是图像 而不是图片. 图片是图像的子集.图像除了可以包含图片以外 还可以包含颜 ...
- 【转】Android Drawable Resource学习(十一)、RotateDrawable
对另一个drawable资源,基于当前的level,进行旋转的drawable. 文件位置: res/drawable/filename.xml文件名即资源名 编译数据类型: 指向 RotateDra ...
随机推荐
- LeetCode 389. Find the Difference
Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...
- JQUERY UI Datepicker Demo
datepicker_demo.htm <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...
- 识别快递单号(2) - 加载图片到canvas
传送门: 识别快递单号(1) - 图像处理 转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/load-image-to-canvas.html 上篇说到我 ...
- 如何在Windows上从源码编译Chromium (CEF3) 加入mp3支持
一.什么是CEF CEF即Chromium Embeded Framework,由谷歌的开源浏览器项目Chromium扩展而来,可方便地嵌入其它程序中以得到浏览器功能. CEF包括CEF1和CEF3两 ...
- 浏览器的兼容问题 判断IE方法
下面是一些判断ie的常用方法: <!-[if IE 6]> 此处是IE6才会执行的代码 <![endif]-> 还可以给他加个条件,比如判断IE6以下的浏览器: <!-[ ...
- STM32_RTC君
五一假期已过,大家是否还像五一五二五三那样快乐呢??答案就交给你们自己寻找了哈..说到五一..就从五一开始的那一刻起..就开始计时着..到五一假期结束..呵呵..在这里,智商和情商比我高的人估计又猜到 ...
- java web(六)多个请求对应一个Servlet
概要: 提交请求的常用方式有两种,get/post , 运行程序后被请求,在加载执行web.xml文件时通过该文件中的映射关系找到即将要执行的Servlet; 而在要执行的Servlet文件中可通过反 ...
- >xx.hbm.xml的一些简单配置
1.在hibernate-mapping的属性里有一个package,它的意思是以下的类都是在这个包下的,下面写类路径的时候,可以不写包名 2.class标签 name属性指的是类 table属性指的 ...
- VIPM 发布功能总结
前言 上一篇中,我们分析介绍了LabVIEW自带的安装发布功能,今天总结一下VIPM的发布功能. VIPM 提到LabVIEW,不能不提VI Package Manager (VIPM)这个工具包 ...
- linux下ftp配置文件详解
# 匿名用户配置 anonymous_enable=YES # 是否允许匿名ftp,如否则选择NO anon_upload_enable=YES # 匿名用户是否能上传 anon_mkdir_writ ...