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等方法控制帧动画的播放,停止等;具体其他操作我就不多说了,大家可以在其它资料上找到详细的说明。


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭