Android零基础入门第54节：视图切换组件ViewSwitcher

原文:Android零基础入门第54节：视图切换组件ViewSwitcher

前面三期学习了ProgressBar系列组件，那本期开始一起来学习ViewAnimator组件。

一、ViewAnimator组件概述

ViewAnimator是一个基类，它继承了 FrameLayout，因此它表现出FrameLayout的特征，可以将多个View组件叠在一起。 ViewAnimator额外增加的功能正如它的名字所暗示的一样，ViewAnimator可以在View切换时表现出动画效果。

ViewAnimator及其子类的继承关系图如下图所示。

ViewAnimator及其子类也是一组非常重要的UI组件，这种组件的主要功能是增加动画效果，从而使界面更加炫。使用ViewAnimator 时可以指定如下常见XML属性。

• android:animateFirstView：设置ViewAnimator显示第一个View组件时是否使用动画。

• android:inAnimation：设置ViewAnimator显示组件时所使用的动画。

• android:outAnimation：设置ViewAnimator隐藏组件时所使用的动画。

在实际项目中往往会使用ViewAnimator的几个子类。

二、ViewSwitcher使用

ViewSwitcher代表了视图切换组件，它本身继承了 FrameLayout,因此可以将多个View 层叠在一起，每次只显示一个组件。当程序控制从一个View切换到另一个View时， ViewSwitcher支持指定动画效果。

为了给ViewSwitcher添加多个组件，一般通过调用ViewSwitcher的setFactory (ViewSwitcherViewFactory)方法为之设置 ViewFactory，并由该 ViewFactory 为之创建 View 即可。

接下来通过一个简单的示例程序来学习ViewSwitcher的使用，主要是实现Android 5.0的Launcher界面的分屏、左右滚动效果。

继续使用WidgetSample工程的advancedviewsample模块，在app/main/res/layout/目录下创建viewswitcher_layout.xml文件，在其中填充如下代码片段：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <!-- 定义一个ViewSwitcher组件 -->
    <ViewSwitcher
        android:id="@+id/viewSwitcher"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 定义滚动到上一屏的按钮 -->
    <Button
        android:id="@+id/prev_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="&lt;" />
    <!-- 定义滚动到下一屏的按钮 -->
    <Button
        android:id="@+id/next_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="&gt;" />
</RelativeLayout>

上面的界面布局文件中只是定义了一个ViewSwitcher组件和两个按钮，这两个按钮分别用于控制该ViewSwitcher显示上一屏、下一屏的程序列表。

Launcher界面由GridView完成，创建布局文件slide_gridview.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:numColumns="4"
          android:layout_height="match_parent">
</GridView>

创建GridView中每个Item的布局文件slide_gridview_item.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- 定义一个垂直的LinearLayout，该容器中放置一个ImageView和一个TextView -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center"
              android:orientation="vertical"
              android:padding="10dp">

    <ImageView
        android:id="@+id/icon_img"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <TextView
        android:id="@+id/name_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" />
</LinearLayout>

为了方便操作，将GridView内使用的内容定义为实体类ViewSwitcherItemData，代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample.entity;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class ViewSwitcherItemData {
    private String name; // 应用程序名称
    private int icon;  // 应用程序图标

    public ViewSwitcherItemData(String name, int icon) {
        this.name = name;
        this.icon = icon;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }
}

接下来创建GridView的适配器ViewSwitcherBaseAdapter，继承BaseAdapter类，代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.jinyu.cqkxzsxy.android.advancedviewsample.R;
import com.jinyu.cqkxzsxy.android.advancedviewsample.ViewSwitcherActivity;
import com.jinyu.cqkxzsxy.android.advancedviewsample.entity.ViewSwitcherItemData;

import java.util.List;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class ViewSwitcherBaseAdapter extends BaseAdapter {
    private Context mContext = null;
    private List<ViewSwitcherItemData> mItemDatas = null;

    public ViewSwitcherBaseAdapter(Context context, List<ViewSwitcherItemData> itemDatas) {
        this.mContext = context;
        this.mItemDatas = itemDatas;
    }

    @Override
    public int getCount() {
        // 如果已经到了最后一屏，且应用程序的数量不能整除NUMBER_PER_SCREEN
        if (ViewSwitcherActivity.screenNo == ViewSwitcherActivity.screenCount - 1
                && mItemDatas.size() % ViewSwitcherActivity.NUMBER_PER_SCREEN != 0) {
            // 最后一屏显示的程序数为应用程序的数量对NUMBER_PER_SCREEN求余
            return mItemDatas.size() % ViewSwitcherActivity.NUMBER_PER_SCREEN;
        }
        // 否则每屏显示的程序数量为NUMBER_PER_SCREEN
        return ViewSwitcherActivity.NUMBER_PER_SCREEN;
    }

    @Override
    public ViewSwitcherItemData getItem(int position) {
        // 根据screenNo计算第position个列表项的数据
        return mItemDatas.get(
                ViewSwitcherActivity.screenNo * ViewSwitcherActivity.NUMBER_PER_SCREEN + position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (null == convertView) {
            // 加载R.layout.item布局文件
            convertView = LayoutInflater.from(mContext).inflate(R.layout.slide_gridview_item, null);
            holder = new ViewHolder();
            holder.iconImg = (ImageView)convertView.findViewById(R.id.icon_img);
            holder.nameTv = (TextView)convertView.findViewById(R.id.name_tv);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.iconImg.setImageResource(getItem(position).getIcon());
        holder.nameTv.setText(getItem(position).getName());
        return convertView;
    }

    private class ViewHolder{
        ImageView iconImg;
        TextView nameTv;
    }
}

使用扩展BaseAdapter的方式为GridView提供Adapter，关键就是根据用户单击的按钮来动态计算该BaseAdapter应该显示哪些程序列表。

使用Activity类的screenNo保存当前正在显示第几屏的程序列表，BaseAdapter会根据screenNo 动态计算该Adapter总共包含多少个列表项（如getCount()方法所示），会根据screenNo计算每个列表项的数据（如getltem(int position)方法所示）。

新建ViewSwitcherActivity.java文件，加载上面新建的布局文件，具体代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ViewSwitcher;

import com.jinyu.cqkxzsxy.android.advancedviewsample.adapter.ViewSwitcherBaseAdapter;
import com.jinyu.cqkxzsxy.android.advancedviewsample.entity.ViewSwitcherItemData;

import java.util.ArrayList;
import java.util.List;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class ViewSwitcherActivity extends AppCompatActivity implements View.OnClickListener {
    // 定义一个常量，用于显示每屏显示的应用程序数
    public static final int NUMBER_PER_SCREEN = 12;
    // 记录当前正在显示第几屏的程序
    public static int screenNo = -1;
    // 保存程序所占的总屏数
    public static int screenCount;

    private ViewSwitcher mViewSwitcher = null;
    private Button mPrevBtn = null;
    private Button mNextBtn = null;
    private ViewSwitcherBaseAdapter mAdapter = null;
    // 保存系统所有应用程序的List集合
    private List<ViewSwitcherItemData> mItemDatas = new ArrayList<ViewSwitcherItemData>();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewswitcher_layout);

        // 获取界面组件
        mViewSwitcher = (ViewSwitcher) findViewById(R.id.viewSwitcher);
        mPrevBtn = (Button) findViewById(R.id.prev_btn);
        mNextBtn = (Button) findViewById(R.id.next_btn);

        mViewSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            // 实际上就是返回一个GridView组件
            @Override
            public View makeView() {
                // 加载R.layout.slide_gridview组件，实际上就是一个GridView组件
                return ViewSwitcherActivity.this.getLayoutInflater()
                        .inflate(R.layout.slide_gridview, null);
            }
        });

        // 创建一个包含40个元素的List集合，用于模拟包含40个应用程序
        for (int i = 0; i < 40; i++) {
            ViewSwitcherItemData item =
                    new ViewSwitcherItemData("item" + i, R.mipmap.ic_launcher);
            mItemDatas.add(item);
        }

        // 计算应用程序所占的总屏数
        // 如果应用程序的数量能整除NUMBER_PER_SCREEN，除法的结果就是总屏数
        // 如果不能整除，总屏数应该是除法的结果再加1
        screenCount = mItemDatas.size() % NUMBER_PER_SCREEN == 0 ?
                mItemDatas.size() / NUMBER_PER_SCREEN :
                mItemDatas.size() / NUMBER_PER_SCREEN + 1;

        mAdapter = new ViewSwitcherBaseAdapter(this, mItemDatas);

        mPrevBtn.setOnClickListener(this);
        mNextBtn.setOnClickListener(this);

        // 页面加载时先显示第一屏
        next();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.prev_btn:
                prev();
                break;
            case R.id.next_btn:
                next();
                break;
            default:
                break;
        }
    }

    private void next() {
        if (screenNo < screenCount - 1) {
            screenNo++;
            // 为ViewSwitcher的组件显示过程设置动画
            mViewSwitcher.setInAnimation(this, R.anim.slide_in_right);
            // 为ViewSwitcher的组件隐藏过程设置动画
            mViewSwitcher.setOutAnimation(this, R.anim.slide_out_left);
            // 控制下一屏将要显示的GridView对应的Adapter
            ((GridView) mViewSwitcher.getNextView()).setAdapter(mAdapter);
            // 单击右边按钮，显示下一屏
            // 学习手势检测后，也可通过手势检测实现显示下一屏
            mViewSwitcher.showNext();
        }
    }

    private void prev() {
        if (screenNo > 0) {
            screenNo--;
            // 为ViewSwitcher的组件显示过程设置动画
            mViewSwitcher.setInAnimation(this, android.R.anim.slide_in_left);
            // 为ViewSwitcher的组件隐藏过程设置动画
            mViewSwitcher.setOutAnimation(this, android.R.anim.slide_out_right);
            // 控制下一屏将要显示的GridView对应的 Adapter
            ((GridView) mViewSwitcher.getNextView()).setAdapter(mAdapter);
            // 单击左边按钮，显示上一屏，当然可以采用手势
            // 学习手势检测后，也可通过手势检测实现显示上一屏
            mViewSwitcher.showPrevious();
        }
    }
}

重点在于为ViewSwitcher设置ViewFactory对象，并且当用户单击“<”和“>”两个按钮时控制ViewSwitcher显示“上一屏”和“下一屏”的应用程序。

当用户单击按钮时，程序的事件处理方法将会控制ViewSwitcher调用showNext() 方法显示下一屏的程序列表。而且此时screenNo被加1，因而Adapter将会动态计算下一屏的程序列表，再将该Adapter传给ViewSwitcher接下来要显示的GridView。

运行程序，点击“<”和“>”两个按钮时可以看到下图所示界面切换效果。

为了实现ViewSwitcher切换View时的动画效果，程序的事件处理方法中调用了 ViewSwitcher的setInAnimation()、setOutAnimation()方法来设置动画效果。本程序由于 Android系统只提供的两个slide_in_left、slide_out_right动画资源，需要自行提供slide_in_right、slide_out_left动画资源，详细会在Android高级部分进行讲解。

其中R.anim.slide_in_right动画资源对应的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置从右边拖进来的动画
    android:duration指定动画持续时间  -->
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

R.anim.slide_out_left动画资源对应的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置从左边拖出去的动画
    android:duration指定动画持续时间 -->
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

至此，关于ViewSwitcher视图切换组件学习完毕，如果还有不清楚的地方建议回头再多做练习。

今天就先到这里，如果有问题欢迎留言一起探讨，也欢迎加入Android零基础入门技术讨论微信群，共同成长！

此文章版权为微信公众号分享达人秀（ShareExpert）——鑫鱻所有，若需转载请联系作者授权，特此声明！

往期总结分享：

Android零基础入门第1节：Android的前世今生

Android零基础入门第2节：Android 系统架构和应用组件那些事

Android零基础入门第3节：带你一起来聊一聊Android开发环境

Android零基础入门第4节：正确安装和配置JDK, 高富帅养成第一招

Android零基础入门第5节：善用ADT Bundle, 轻松邂逅女神

Android零基础入门第6节：配置优化SDK Manager, 正式约会女神

Android零基础入门第7节：搞定Android模拟器，开启甜蜜之旅

Android零基础入门第8节：HelloWorld，我的第一趟旅程出发点

Android零基础入门第9节：Android应用实战，不懂代码也可以开发

Android零基础入门第10节：开发IDE大升级，终于迎来了Android Studio

Android零基础入门第11节：简单几步带你飞，运行Android Studio工程

Android零基础入门第12节：熟悉Android Studio界面，开始装逼卖萌

Android零基础入门第13节：Android Studio配置优化，打造开发利器

Android零基础入门第14节：使用高速Genymotion，跨入火箭时代

Android零基础入门第15节：掌握Android Studio项目结构，扬帆起航

Android零基础入门第16节：Android用户界面开发概述

Android零基础入门第17节：文本框TextView

Android零基础入门第18节：输入框EditText

Android零基础入门第19节：按钮Button

Android零基础入门第20节：复选框CheckBox和单选按钮RadioButton

Android零基础入门第21节：开关组件ToggleButton和Switch

Android零基础入门第22节：图像视图ImageView

Android零基础入门第23节：图像按钮ImageButton和缩放按钮ZoomButton

Android零基础入门第24节：自定义View简单使用，打造属于你的控件

Android零基础入门第25节：简单且最常用的LinearLayout线性布局

Android零基础入门第26节：两种对齐方式，layout_gravity和gravity大不同

Android零基础入门第27节：正确使用padding和margin

Android零基础入门第28节：轻松掌握RelativeLayout相对布局

Android零基础入门第29节：善用TableLayout表格布局

Android零基础入门第30节：两分钟掌握FrameLayout帧布局

Android零基础入门第31节：少用的AbsoluteLayout绝对布局

Android零基础入门第32节：新推出的GridLayout网格布局

Android零基础入门第33节：Android事件处理概述

Android零基础入门第34节：Android中基于监听的事件处理

Android零基础入门第35节：Android中基于回调的事件处理

Android零基础入门第36节：Android系统事件的处理

Android零基础入门第37节：初识ListView

Android零基础入门第38节：初识Adapter

Android零基础入门第39节：ListActivity和自定义列表项

Android零基础入门第40节：自定义ArrayAdapter

Android零基础入门第41节：使用SimpleAdapter

Android零基础入门第42节：自定义BaseAdapter

Android零基础入门第43节：ListView优化和列表首尾使用

Android零基础入门第44节：ListView数据动态更新

Android零基础入门第45节：网格视图GridView

Android零基础入门第46节：列表选项框Spinner

Android零基础入门第47节：自动完成文本框AutoCompleteTextView

Android零基础入门第48节：可折叠列表ExpandableListView

Android零基础入门第49节：AdapterViewFlipper图片轮播

Android零基础入门第50节：StackView卡片堆叠

Android零基础入门第51节：进度条ProgressBar

Android零基础入门第52节：自定义ProgressBar炫酷进度条

Android零基础入门第53节：拖动条SeekBar和星级评分条RatingBar