Android UI集錦——1.Android Drawable分類匯總(3/3)，1.androiddrawable

Android UI集錦——1.Android Drawable分類匯總(3/3)，1.androiddrawable

Android UI集錦——1.Android Drawable分類匯總(3/3)

　　　　　　　　　　　　　　　～轉載請註明出處coder-pig

本節引言:

前面兩節我們已經瞭解了Android中的2/3的Drawable,在本節中我們就把剩下的

1/3給學習了吧~他們分別是:

LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable,

好了,開始本節內容~

本節本文:

Android各種Drawable的大綱圖:

1.LayerDrawable:

其實就是層繪圖物件,包含一個Drawable數組,然後按照數組對應的順序來繪製他們,索引

值最大的Drawable會被繪製在最上層!雖然這些Drawable會有交叉或者重疊的地區,但

他們位於不同的層,所以並不會相互影響,以<layer-list../>作為根節點！

相關屬性:

drawable:引用的位元影像資源,如果為空白徐璈有一個Drawable類型的子節點

left:層相對於容器的左邊距

right:層相對於容器的右邊距

top:層相對於容器的上邊距

bottom:層相對於容器的下邊距

id:層的id

程式碼範例:

自訂拖動條外觀(seekbar)與層疊的圖片:

先看下吧:

,一個自訂的進度條和三張層疊的圖片！

代碼也是很簡單的,關於seekbar的屬性就不講解了~

seekbar用到的layerlist_one.xml:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item        android:id="@android:id/background"        android:drawable="@drawable/seek_bkg"/>    <item        android:id="@android:id/progress"        android:drawable="@drawable/bar"/></layer-list>

層疊圖片的layerlist_two.xml:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item>        <bitmap android:src="@drawable/pig" android:gravity="center"/>    </item>    <item android:top="25dp" android:left="25dp">        <bitmap android:src="@drawable/pig" android:gravity="center"/>    </item>    <item android:top="50dp" android:left="50dp">        <bitmap android:src="@drawable/pig" android:gravity="center"/>    </item></layer-list>

引用他們的main_activity.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical"    tools:context="com.jay.example.drawabletest.MainActivity" >    <SeekBar        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal"        android:indeterminateOnly="false"        android:maxHeight="8dp"        android:minHeight="8dp"        android:progressDrawable="@drawable/layerlist_one"        android:thumb="@drawable/woniu"        android:thumbOffset="10dp" />    <ImageView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/layerlist_two"/>    </LinearLayout>

好了,LayerDrawable就這麼簡單~

2.TransitionDrawable:

這個Drawable是前者LayerDrawable的一個子類,但是他值管理2層!!!Drawable,並且提供了

透明度變化的動畫,可以控制一層Drawable過度到另一層Drawable的動畫效果,根節點

為<transition../>,記住只能有2個item哦!多了也沒用=-=,屬性和前者差不多,

我們需要調用startTransition方法才能啟動兩層間的切換動畫;我們也可以反過來播放

動畫:reverseTransition方法!

一個簡單的例子:

代碼很簡單,建立一個TransitionDrawable的xml檔案:

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

接著main_activity弄個ImageView設定下src指向上述drawable,接著MainActivity中:

package com.jay.example.drawabletest;import android.app.Activity;import android.graphics.drawable.AnimationDrawable;import android.graphics.drawable.TransitionDrawable;import android.os.Bundle;import android.os.Handler;import android.widget.ImageView;public class MainActivity extends Activity {private ImageView imgShow;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imgShow = (ImageView) findViewById(R.id.imgShow);TransitionDrawable td = (TransitionDrawable) imgShow.getDrawable();td.startTransition(3000);//你可以可以反過來播放，使用reverseTransition即可~//td.reverseTransition(3000);}}

好了,就這麼簡單,就一次,讀者也覺得沒意思吧,美女沒看夠對吧~

好吧,這裡找到別人寫的一個代碼,這裡給大家貼下,有興趣的可以研究下,不算複雜~

原文連結:http://blog.csdn.net/lonelyroamer/article/details/8243606

詳細代碼如下:(核心就是hanler定時,修改Transition中兩個圖片~)

package com.jay.example.drawabletest;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.graphics.drawable.TransitionDrawable;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.widget.ImageView;public class MainActivity extends Activity {private int change = 0;private ImageView imgShow;private Drawable[] drawables;private int[] ids = new int[] { R.drawable.meinv1, R.drawable.meinv2,R.drawable.meinv3, R.drawable.meinv4, R.drawable.meinv5 };// 處理transition的改變private Handler handler = new Handler(new Handler.Callback() {public boolean handleMessage(Message msg) {int duration = msg.arg1;TransitionDrawable transitionDrawable = null;transitionDrawable = new TransitionDrawable(new Drawable[] {drawables[change % ids.length],drawables[(change + 1) % ids.length] });change++;imgShow.setImageDrawable(transitionDrawable);transitionDrawable.startTransition(duration);return false;}});@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imgShow = (ImageView) findViewById(R.id.imgShow);// 根據資源id,把圖片都載入成Drawable~BitmapFactory.Options opts = new BitmapFactory.Options();opts.inJustDecodeBounds = true;BitmapFactory.decodeResource(getResources(), R.drawable.meinv1, opts);opts.inSampleSize = computeSampleSize(opts, -1, 720 * 1280);opts.inJustDecodeBounds = false;drawables = new Drawable[ids.length];try {for (int i = 0; i < ids.length; i++) {// for迴圈，載入5個drawable資源Bitmap bmp = BitmapFactory.decodeResource(getResources(),ids[i], opts);drawables[i] = new BitmapDrawable(bmp);}} catch (Exception e) {e.printStackTrace();}// 開啟線程，改變transitionnew Thread(new MyRunnable()).start();}// 線程，去發送訊息，讓transition一直改變private class MyRunnable implements Runnable {public void run() {while (true) {int duration = 3000;// 改變的間隔Message message = handler.obtainMessage();message.arg1 = duration;handler.sendMessage(message);try {Thread.sleep(duration);} catch (InterruptedException e) {e.printStackTrace();}}}}// 計算合適的圖片大小public static int computeSampleSize(BitmapFactory.Options options,int minSideLength, int maxNumOfPixels) {int initialSize = computeInitialSampleSize(options, minSideLength,maxNumOfPixels);int roundedSize;if (initialSize <= 8) {roundedSize = 1;while (roundedSize < initialSize) {roundedSize <<= 1;}} else {roundedSize = (initialSize + 7) / 8 * 8;}return roundedSize;}// 計算合適的圖片大小private static int computeInitialSampleSize(BitmapFactory.Options options,int minSideLength, int maxNumOfPixels) {double w = options.outWidth;double h = options.outHeight;int lowerBound = (maxNumOfPixels == -1) ? 1 : (int) Math.ceil(Math.sqrt(w * h / maxNumOfPixels));int upperBound = (minSideLength == -1) ? 128 : (int) Math.min(Math.floor(w / minSideLength), Math.floor(h / minSideLength));if (upperBound < lowerBound) {// return the larger one when there is no overlapping zone.return lowerBound;}if ((maxNumOfPixels == -1) && (minSideLength == -1)) {return 1;} else if (minSideLength == -1) {return lowerBound;} else {return upperBound;}}}

運行:

3.LevelListDrawable:

這個是用來管理一組Drawable的,我們可以為裡面的drawable設定不同的level,

當他們繪製的時候,會根據level屬性值擷取對應的drawable繪製到畫布上,根節點

為:<level-list.../>他並沒有屬性節點哦,就是說我們能做的只是設定每個<item>

item可設定的相關屬性:

drawable:引用的位元影像資源,如果為空白徐璈有一個Drawable類型的子節點

minlevel:level對應的最小值

maxlevel:level對應的最大值

程式碼範例:

我們動態地修改level值,實現下述效果:

代碼實現:

首先,我們編寫一個LevelListDrawable的xml資源檔:

<?xml version="1.0" encoding="utf-8"?><level-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:drawable="@drawable/cir1" android:maxLevel="2000"/>    <item android:drawable="@drawable/cir2" android:maxLevel="4000"/>    <item android:drawable="@drawable/cir3" android:maxLevel="6000"/>    <item android:drawable="@drawable/cir4" android:maxLevel="8000"/>    <item android:drawable="@drawable/cir5" android:maxLevel="10000"/></level-list>

接下來就到MainActivity,一個Timer定時器,handler修改level值即可~

package com.jay.example.drawabletest;import java.util.Timer;import java.util.TimerTask;import android.app.Activity;import android.graphics.drawable.LevelListDrawable;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.widget.ImageView;public class MainActivity extends Activity {private ImageView imgShow;private LevelListDrawable ld;private Handler handler = new Handler(){public void handleMessage(Message msg) {if(msg.what == 0x123){if(ld.getLevel() > 10000)ld.setLevel(0);else imgShow.setImageLevel(ld.getLevel()+2000);}};};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imgShow = (ImageView) findViewById(R.id.imgShow);ld = (LevelListDrawable) imgShow.getDrawable();imgShow.setImageLevel(0);new Timer().schedule(new TimerTask() {@Overridepublic void run() {handler.sendEmptyMessage(0x123);}}, 0,1000);}}

4.StateListDrawable:

終於來到最後一個Drawable了,看上去不熟悉吧,其實他就是我們平時為按鈕設定動態點擊背景的

selector,哈哈,再熟不過了吧~比如按鈕有按下,選中,點擊,不可用等等狀態,另外今天群裡有個朋友

問題布局弄這個selecotr可以,當然可以啦,不過要先為布局設定一個Clickable = "true"即可!

我們可以設定的屬性如下:

可設定的屬性:

drawable:引用的Drawable位元影像,我們可以把他放到最前面,就表示組件的正常狀態~

state_focused:是否獲得焦點

state_window_focused:是否獲得視窗焦點

state_enabled:控制項是否可用

state_checkable:控制項可否被勾選,eg:checkbox

state_checked:控制項是否被勾選

state_selected:控制項是否被選擇,針對有滾輪的情況

state_pressed:控制項是否被按下

state_active:控制項是否處於活動狀態,eg:slidingTab

state_single:控制項包含多個子控制項時,確定是否只顯示一個子控制項

state_first:控制項包含多個子控制項時,確定第一個子控制項是否處於顯示狀態

state_middle:控制項包含多個子控制項時,確定中間一個子控制項是否處於顯示狀態

state_last:控制項包含多個子控制項時,確定最後一個子控制項是否處於顯示狀態

代碼示範:

就弄個最簡單的selector,按鈕按下與非按下的,這個是筆者一個工程裡直接扣出來的:

內容可以直接無視,主要是看登入按鈕的點擊效果哈~

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_pressed="false" android:drawable="@drawable/ic_btn_select_add_course_normal"/><item android:state_pressed="true" android:drawable="@drawable/ic_btn_select_add_course_pressed"/></selector>

接著background設定下,你懂的,如下:

最後說兩句:

好的,一連三篇介紹Android中的Drawable,不知不覺已經到了尾聲了,讀者們有沒有get到新姿勢呢?

下一Part我們就來學一些圖形處理的基礎,Bitmap,paint,canvas,path等等,敬請期待~

如果你覺得本文不錯的話,給個贊讓更多的朋友看到如何?