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 實戰 實現圓形、圓角圖片
Android
Xfermode 實戰 實現圓形、圓角圖片
那我今天要告訴你,不需要自定義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了~~~大多數內容參考自一些牛人寫的例子,例子還是棒棒噠,大家看完本文的同時,也可以去挖掘挖掘一些東西~~