第5组UI "让你的界面酷炫到底"-ViewAniMator之ViewSwitcher、ImageSwitcher(图像切换器)、TextSwitcher(文本切换器)、ViewFlipper

最新推荐文章于 2018-01-02 22:32:24 发布

AnnaIT

最新推荐文章于 2018-01-02 22:32:24 发布

阅读量1.3k

点赞数

分类专栏： Android 文章标签：界面继承动画

本文链接：https://blog.csdn.net/womengmengyan/article/details/48109223

版权

Android 专栏收录该内容

153 篇文章 1 订阅

订阅专栏

ViewAniMator是一个基类，它继承了FrameLayout,因此它表现了FrameLayout的一些特征，可以将多个View组件“叠”在一起。额外的功能是：在View切换时表现出动画效果。
ViewAnimator及其子类的继承关系：
这里写图片描述
支持的xml属性：
animateFirstView=”” //设置显示的第一个View组件时是否使用动画
inAnimation=”“//设置显示组件时使用的动画
putAnimation=”“//是指隐藏组件时使用的动画

ViewSwitcher（视图切换）

1.概述：

当程序控制从一个View切换到另一个View时，ViewSwitcher支持指定动画效果。
为了给ViewSwitcher添加多个组件，一般通过调用ViewSwitcher的setFactory（ViewSwitcher.ViewFatory factory）的方法为之设置ViewFactory,并由该ViewFactory为之创建View即可。

ImageSwitcher(图像切换器)

1.概述：

ImageSwitcher继承了ViewSwitcher,并重写了ViewSwitcher的showNext()和showPrevios()方法。因此ImageSwitcher使用起来更简单一些。
区别在于：ImageSwitcher更炫，可以指定图片切换时的动画效果。

2.步骤：

1>为ImageSwitcher提供一个ViewFactory,该ViewFactory生成的View必须是ImageView.
2>需要切换图片时，只要调用ImageSwitcher的setImageDrawable(Drawable drawable),setImageResource(int resid)和setImageURL(Uri uri)的方法更换图片即可。

3.范例：

功能：结合gallery，点击列表项时，显示图片
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"
    tools:context=".MainActivity" 
    android:orientation="vertical">
    <GridView 
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:numColumns="4"
        android:gravity="center"></GridView>
    <ImageSwitcher 
        android:id="@+id/imageSwitcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:inAnimation="@android:anim/fade_in"
        android:outAnimation="@android:anim/fade_out"
        ></ImageSwitcher>


</LinearLayout>

java:

public class MainActivity extends Activity {
    private GridView mGridView;
    private ImageSwitcher mImageSwitcher;
    List<Map<String, Object>> mListItems;
    private int[] imageIds;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mGridView = (GridView) findViewById(R.id.gridView);
        mImageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
        mListItems = new ArrayList<Map<String,Object>>();

        init();
        /**
         * 设置图片切换的动画效果
         * */
        mImageSwitcher.setFactory(new ViewFactory() {

            @Override
            public View makeView() {//重写方法makeView
                //创建ImageView对象
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);//设置图片居中显示
                //imageView.setLayoutParams(new ImageSwitcher(getApplicationContext().))
                return imageView;//返回imageView对象。
            }
        });

        /**创建一个SimpleAdapter适配器
         * 
         * */
        SimpleAdapter adapter = new SimpleAdapter(this, mListItems, R.layout.item_cell, new String[]{"image"}, new int[]{R.id.imageView});

        mGridView.setAdapter(adapter);
        /**添加列表项被选中的监听器
         * 
         * */
        mGridView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View view, int positon,
                    long id) {
              //列表项被选中后，显示当前被选中的图片
                mImageSwitcher.setImageResource(imageIds[positon]);

            }
        });


    }



    /**对数据进行初始化
     * 
     * */
    private void init() {
        imageIds = new int[]{
                R.drawable.baby, R.drawable.fanbingbing2,R.drawable.kero,R.drawable.liuyifei,
                R.drawable.zhaowei,R.drawable.liminhao2,R.drawable.fanbingbing1,R.drawable.liminhao,
                R.drawable.liuyifei,R.drawable.liyifeng,R.drawable.zhengshuang,R.drawable.yangmi2,
                R.drawable.xxietingfeng

        };
        for (int i = 0; i < imageIds.length; i++) {


        Map<String, Object> listItem = new HashMap<String, Object>();//注：要建立多个对象。
        listItem.put("image", imageIds[i]);
        mListItems.add(listItem);
        }

    }

}

结果演示：

这里写图片描述

TextSwitcher(文本切换器)

1.概述：

与ImageSwitcher不同的是，它所需的ViewFactory的makeView()方法必须返回一个TextView组件。
与TextViewr的区别：都可以显示文本内容，但效果更炫，可以指定文本切换时的动画效果。

2.范例：

点击gallery，显示名字：（在上面例子的基础上更改）

//上面java代码更改：
strs = new String[]{
                "baby","fanbingbing2","kero","liuyifei","zhaowei","liminhao2",
                "fanbingbing1","liminhao","liuyifei","liyifeng","zhengshuang",
                "yangmi2","xxietingfeng"
        };

        mTextSwitcher.setFactory(new ViewSwitcher.ViewFactory() {

            @Override
            public View makeView() {//创建返回的图片对象，并进行设置。
                TextView textview = new TextView(MainActivity.this);
                textview.setTextSize(40);
                textview.setTextColor(Color.MAGENTA);
                return textview;
            }
        });



-------------------------------------------------------
//列表项中更改：
mGridView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View view, int position,
                    long id) {
              //列表项被选中后，显示当前被选中的图片
            //  mImageSwitcher.setImageResource(imageIds[position]);
                mTextSwitcher.setText(strs[position]);
            }
        });

结果演示：
这里写图片描述

ViewFlipper

1.概述：

可以使用动画控制多个组件之间的切换。

2.用法：

xml中，需要在ViewFlipper之间添加多个控件；
可以利用addView(View v)添加组件。

范例：

功能：通过按钮控制上下播放，或者自动播放
xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ViewFlipper 
        android:id="@+id/viewFlipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:flipInterval="1000"
        android:layout_gravity="center_vertical"
        >
        <ImageView 
            android:id="@+id/imageview1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/liminhao"
            />
        <ImageView 
            android:id="@+id/imageview2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/zhaowei"
            />
        <ImageView 
            android:id="@+id/imageview3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/baby"
            />
    </ViewFlipper>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button 
            android:id="@+id/buttonPrev"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="上一张"/>
        <Button 
            android:id="@+id/buttonAuto"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="自动播放"/>
        <Button 
            android:id="@+id/buttonNext"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="下一张"/>
    </LinearLayout>


</LinearLayout>

java：

public class SecondActivity extends Activity implements OnClickListener {
    private Button mButtonPrev;
    private Button mButtonAuto;
    private Button mButtonNext;
    private ViewFlipper mViewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        mButtonPrev = (Button) findViewById(R.id.buttonPrev);
        mButtonAuto = (Button) findViewById(R.id.buttonAuto);
        mButtonNext = (Button) findViewById(R.id.buttonNext);
        mViewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        mButtonPrev.setOnClickListener(this);
        mButtonAuto.setOnClickListener(this);
        mButtonNext.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.buttonPrev:
            prev(v);
            break;
        case R.id.buttonAuto:
            auto(v);
            break;
        case R.id.buttonNext:
            next(v);
            break;

        default:
            break;
        }

    }

    public void prev(View source) {
        mViewFlipper.setInAnimation(this, android.R.anim.slide_in_left);// 设置播放效果
        mViewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);
        mViewFlipper.showPrevious();// 显示上一组件
        mViewFlipper.stopFlipping();// 停止自动播放

    }

    public void next(View source) {
        mViewFlipper.setInAnimation(this, android.R.anim.slide_in_left);// 设置播放效果
        mViewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);
        mViewFlipper.showNext();// 显示下一组件
        mViewFlipper.stopFlipping();// 停止自动播放

    }

    public void auto(View source) {
        mViewFlipper.setInAnimation(this, android.R.anim.slide_in_left);// 设置播放效果
        mViewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);
        mViewFlipper.showNext();// 显示下一组件
        mViewFlipper.startFlipping();// 开始自动播放

    }

}

结果演示：
这里写图片描述

AnnaIT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第5组UI "让你的界面酷炫到底"-ViewAniMator之ViewSwitcher、ImageSwitcher(图像切换器)、TextSwitcher(文本切换器)、ViewFlipper

ViewAniMator是一个基类，它继承了FrameLayout,因此它表现了FrameLayout的一些特征，可以将多个View组件“叠”在一起。额外的功能是：在View切换时表现出动画效果。 ViewAnimator及其子类的继承关系：支持的xml属性： animateFirstView=”” //设置显示的第一个View组件时是否使用动画 inAnimation=”“
复制链接

扫一扫

专栏目录