Andrid自定義組件之垂直SeekBar以及播放幀動畫

     一個優秀的Android應用程序少不了一個好的用戶界面,下面說說我在“肥胖測試”程序中所遇到的幾個界面問題。

1.      自定義組件

     Android開發環境中已經自帶了很多標準的組件,可以讓我們輕鬆的設計出一個不錯的界面,但有時候這些標準組件無法滿足我們的個性化需求,這是就需要我們自己製作自定義組件。

     我們這個程序中需要用戶輸入自己的身高和體重,我沒有用EditText 讓用戶輸入,而是讓用戶調節SeekBar 來輸入數據。體重用水平SeekBar 調節,身高用垂直SeekBar 調節,一開始感覺很容易實現,可是正真開發時卻發現一個頭疼的問題:SeekBar 不能設置成垂直的。那就只有自己重寫SeekBar了,找到Android自帶SeekBar的源碼,研究調試了幾天,終於實現了垂直SeekBar,下面是我的代碼,經測試可以直接使用,希望對大家有幫助:

public class myBar extends SeekBar       //繼承SeekBar

{

//重寫onSizeChanged,因爲從水平變成垂直,所以要交換Width和Height

    protected void onSizeChanged(int w, int h, int oldw, int oldh)

    {

          super.onSizeChanged(h, w, oldw, oldh);

    }

     //重寫onDraw,關鍵旋轉,這裏可以自定義在原來水平的基礎上旋轉角度

    protected void onDraw(Canvas c)

    {

        // 旋轉

        c.rotate(-90);

        //控制左右位置,要自己調試,如果SeekBar有偏差可以在這裏調整

         c.translate(-this.getHeight(), 0);

        super.onDraw(c);

    }

//重寫trackTouchEvent,主要是對旋轉後的座標進行交換修正

    private voidtrackTouchEvent(MotionEvent event)

    {

        final int height = getHeight();

        int mPaddingBottom = this.getBottom();      

        int y = (int)event.getY();                 

        float scale = 0;

        float progress = 0;

        if(y > height)//mPaddingBottom)

        {

            scale = 0.0f;

        }

        else if( y>0 )

        {

            scale = 1-(float)y / (float)height;       

        }

        else

        {

        scale= 1.0f;

        }

        final int max = getMax();

        progress = scale * max;                         

        setProgress(Math.round(progress));                  

        setThumbPos(getHeight(), mThumb, scale, 0) ;    

    }

}


    SeekBar 的重寫 主要是旋轉,還有對座標的重新計算操作,具體的大家可以研究一下源碼,實現自己的特殊功能。

    下面就要把重寫後的垂直SeekBar 部署到我們的界面裏了,和其他標準組件一樣,在layout的XML文件中鍵入下面語句:

<com.bill.fatTest.myBar

android:id="@+id/billfatTestSlideBar1" android:thumb="@drawable/thumb2"

android:paddingTop="10dip"

android:layout_below="@+id/btn_ok" android:layout_alignLeft="@+id/btn_ok"android:layout_alignRight="@+id/btn_ok"

android:layout_width="30dip"

android:layout_height="fill_parent" >

</com.bill.fatTest.SlideBar>

具體設置按自己的需要,和正常SeekBar設置一樣,要注意的就是需要把自己重寫的SeekBar 的完整包路徑名加上去com.bill.fatTest.myBar,下面是我的一個界面,左邊那個垂直的SeekBar 即重寫後的效果


2. Gif動畫

Android不是對Gif動畫的支持不是很好嗎?不要奇怪,其實我這裏的Gif動畫使用Android 幀動畫實現的。幀動畫大家一定都很熟悉,就是把多張圖片快速連續切換播放,形成動畫的效果。

其實Gif動畫也是由幀組成的,只要我們將其中的幀全提取出來就可以用Android 的幀動畫播放了。具體怎麼提取大家就開動腦筋吧!我按網上的一個說法,用PhotoShop,可惜沒成功,誰PhotoShop 功底強可以自己試試。我使用了一個叫EASY GIF Animator的軟件直接提取,可惜該軟件不是免費的,只有20次試用,大家可以找找其他軟件,FireWork 好像也可以。如果還有動畫大牛的話,可以自己製作。。。

有了動畫的幀後就可以開始在Android 上使用了。首先將所有獲得的圖片都放到res\drawable裏,然後在res下建立一個文件夾anim,再在anim下建立一個XML格式的動畫文件如gif.xml,在XML文件中輸入:

<?xml version="1.0" encoding="utf-8"?>

<animation-list    xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false">

<item android:drawable="@drawable/toofat0"          android:duration="300"/>

<item android:drawable="@drawable/toofat1"    android:duration="300"/>

<item android:drawable="@drawable/toofat2" android:duration="300"/>

<item android:drawable="@drawable/toofat3" android:duration="300"/>

<item android:drawable="@drawable/toofat4"android:duration="300"/>

</animation-list>

   其中每個drawable就是動畫中的一幀,要按幀的播放順序寫drawable;duration是圖片的播放時間,drawable 和 duration 多不可省略。

   編寫完動畫文件後,就需要裝在動畫文件,並創建AnimationDrawable對象。AnimationDrawable是Drawable 的子類,並在Drawable的基礎上提供了控制動畫的功能。可以使用如下代碼創建AnimationDrawable對象:

  AnimationDrawable animationDrawable =(AnimationDrawable)getResources().getDrawable(R.anim.gif);

在創建完AnimationDrawable對象後,可以使用下面的代碼將AnimationDrawable 對象作爲ImageView 組件的背景:

ImageViewimgView = (ImageView)findViewById(R.id.imgView);

imgView.setBackgroundDrawable(animationDrawable);

然後使用AnimationDrawable類的start,stop等方法控制幀動畫的播放,停止等;具體其他操作我就不多說了,大家可以在其它資料上找到詳細的說明。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章