ViewFlipper and ViewAnimator

最新推荐文章于 2021-12-24 13:26:49 发布

xak

最新推荐文章于 2021-12-24 13:26:49 发布

阅读量656

点赞数

分类专栏： Android开发文章标签： ViewFlipper ViewAnimator

Android开发专栏收录该内容

114 篇文章 0 订阅

订阅专栏

今天我们再一起学习另一个功能更强大的视图切换组件 ViewFlipper，它可以在任意视图和视图组合之间切换。在学习之前我们有必要看一下ViewAnimator 对象。

我们制作视图动画时会发现有个ViewAnimator类，这个类的价值我画一个图给大家看就行了：
ViewFlipper <wbr>and <wbr>ViewAnimator
下面我们来看例子：

1、新建一个项目Lesson46_ViewFlipper

2、在main.xml写入下面代码：

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

<linearlayoutandroid:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">

<viewflipper android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/viewFlipper1">

<include android:id="@+id/layout1"layout="@layout/layout1"></include>

<include android:id="@+id/layout2"layout="@layout/layout2"></include>

</viewflipper>

</linearlayout>

这里用到了include标签，学过javaweb的同学很容易理解，这和jsp页面里的include没啥区别。使用include我们可以把一个大的布局文件拆成多个小的文件，使用include，我们可以复用一些常用布局组合

3、另外两个layout1.xml 和 layout2.xml的代码分别如下：

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

<linearlayoutandroid:layout_height="wrap_content" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/linearLayout1">

<textview android:layout_height="wrap_content"android:layout_width="fill_parent"android:id="@+id/textView2"android:gravity="center"android:text="apple"android:textsize="20sp">

</textview>

</linearlayout>

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

<linearlayoutandroid:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/linearLayout2">

<imageview android:layout_height="wrap_content"android:layout_width="fill_parent"android:id="@+id/imageView1"android:src="@drawable/apple"></imageview>

<textview android:layout_height="wrap_content"android:layout_width="fill_parent"android:id="@+id/textView2"android:gravity="center"android:text="苹果" android:textsize="20sp">

</textview>

</linearlayout>

4、MainActivity.java的代码如下：

package basic.android.lesson46;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.AnimationUtils;

import android.widget.ViewFlipper;

public class MainActivity extends Activity {

@Override

public void onCreate(BundlesavedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// 定义ViewFlipper

final ViewFlipper vf = (ViewFlipper)findViewById(R.id.viewFlipper1);

// 设置点击监听器

vf.setOnClickListener(newView.OnClickListener(){

@Override

public void onClick(Viewv){

// 点击读取下一个视图元素

vf.showNext();

}

});

// 设置切入动画

vf.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(),android.R.anim.slide_in_left));

// 设置切出动画

vf.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(),android.R.anim.slide_out_right));

}

5、编译并运行代码，查看结果：
ViewFlipper <wbr>and <wbr>ViewAnimator

附：

ImageSwitcher AndTextSwitcher

packagecom.example.android.apis.view;

importcom.example.android.apis.R;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
importandroid.view.animation.AnimationUtils;
importandroid.widget.AdapterView;
importandroid.widget.BaseAdapter;
import android.widget.Gallery;
importandroid.widget.Gallery.LayoutParams;
importandroid.widget.ImageSwitcher;
import android.widget.ImageView;
importandroid.widget.ViewSwitcher;

public class ImageSwitcher1 extends Activityimplements
       AdapterView.OnItemSelectedListener, ViewSwitcher.ViewFactory{

   @Override
    public voidonCreate(Bundle savedInstanceState){
       super.onCreate(savedInstanceState);
       requestWindowFeature(Window.FEATURE_NO_TITLE);

       setContentView(R.layout.image_switcher_1);

       mSwitcher = (ImageSwitcher)findViewById(R.id.switcher);
       //提供显示图片的地方
        mSwitcher.setFactory(this);

      //系统的anim中的fade_in.xml
       mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
               android.R.anim.fade_in));
       //系统的anim中的fade_out.xml
       mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
               android.R.anim.fade_out));

       Gallery g = (Gallery)findViewById(R.id.gallery);
       g.setAdapter(newImageAdapter(this));
       g.setOnItemSelectedListener(this);
   }

    public voidonItemSelected(AdapterView parent, View v, int position, long id){
       mSwitcher.setImageResource(mImageIds[position]);
   }

    public voidonNothingSelected(AdapterView parent){
   }

//设置ImgaeSwitcher的为IamgeView的变化并且设置其属性，除此之外可以设置第一次加载的时候ImageSwitcher显示的图片默认第一张
    public ViewmakeView() {
       ImageView i = newImageView(this);
       i.setBackgroundColor(0xFF000000);
       i.setScaleType(ImageView.ScaleType.FIT_CENTER);
       i.setLayoutParams(newImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,
               LayoutParams.FILL_PARENT));
       return i;
   }

    privateImageSwitcher mSwitcher;

    public classImageAdapter extends BaseAdapter{
       public ImageAdapter(Context c) {
           mContext = c;
       }

       public int getCount() {
           return mThumbIds.length;
       }

       public Object getItem(int position){
           return position;
       }

       public long getItemId(int position){
           return position;
       }

       public View getView(int position, View convertView, ViewGroupparent) {
           ImageView i = newImageView(mContext);

           i.setImageResource(mThumbIds[position]);
           i.setAdjustViewBounds(true);
           i.setLayoutParams(newGallery.LayoutParams(
                   LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
           i.setBackgroundResource(R.drawable.picture_frame);
           return i;
       }

       private Context mContext;

   }

    privateInteger[] mThumbIds = {
           R.drawable.sample_thumb_0,R.drawable.sample_thumb_1,
           R.drawable.sample_thumb_2,R.drawable.sample_thumb_3,
           R.drawable.sample_thumb_4,R.drawable.sample_thumb_5,
           R.drawable.sample_thumb_6,R.drawable.sample_thumb_7};

    privateInteger[] mImageIds = {
           R.drawable.sample_0, R.drawable.sample_1,R.drawable.sample_2,
           R.drawable.sample_3, R.drawable.sample_4,R.drawable.sample_5,
           R.drawable.sample_6,R.drawable.sample_7};

}

//frameworks\base\core\res\res\anim\fade_in.xml

     Java代码  
    " quality="high"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer">  
     
     
   
 <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/accelerate_interpolator"   
     android:fromAlpha="1.0"  
     android:toAlpha="0.0"  
     android:duration="@android:integer/config_mediumAnimTime"   
 />  

//frameworks\base\core\res\res\anim\fade_out.xml

     Java代码  
     " quality="high"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer">  
     
     
   
 <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
         android:interpolator="@anim/decelerate_interpolator"  
         android:fromAlpha="0.0" android:toAlpha="1.0"  
         android:duration="@android:integer/config_longAnimTime" />  

显示效果

总结
TextSwitcher与ImageSwitcher差不多，不过ImageSwitcher规定的view为ImageView,而TextSwitcher为TextView。(这个在publicViewmakeView()这个里面设置）。若是ImageSwitcher则在makeView()里面定义的是IamgeView并且将其返回给IamgeSwitcher,而TextSwitcher则在makeView里面定义的是TextView并且将其返回给TextSwitcher.