前面三期学习了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文件,在其中填充如下代码片段:
上面的界面布局文件中只是定义了一个ViewSwitcher组件和两个按钮,这两个按钮分别用于控制该ViewSwitcher显示上一屏、下一屏的程序列表。
Launcher界面由GridView完成,创建布局文件slide_gridview.xml,代码如下:
创建GridView中每个Item的布局文件slide_gridview_item.xml,代码如下:
为了方便操作,将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 ListmItemDatas = null; public ViewSwitcherBaseAdapter(Context context, List 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 ListmItemDatas = new ArrayList (); @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动画资源对应的代码如下:
R.anim.slide_out_left动画资源对应的代码如下:
至此,关于ViewSwitcher视图切换组件学习完毕,如果还有不清楚的地方建议回头再多做练习。
今天就先到这里,如果有问题欢迎留言一起探讨,也欢迎加入Android零基础入门技术讨论微信群,共同成长!
此文章版权为微信公众号分享达人秀(ShareExpert)——鑫鱻所有,若需转载请联系作者授权,特此声明!
往期总结分享:
Android零基础入门第1节:
Android零基础入门第2节:
Android零基础入门第3节:
Android零基础入门第4节:
Android零基础入门第5节:
Android零基础入门第6节:
Android零基础入门第7节:
Android零基础入门第8节:
Android零基础入门第9节:
Android零基础入门第10节:
Android零基础入门第11节:
Android零基础入门第12节:
Android零基础入门第13节:
Android零基础入门第14节:
Android零基础入门第15节:
Android零基础入门第16节:
Android零基础入门第17节:
Android零基础入门第18节:
Android零基础入门第19节:
Android零基础入门第20节:
Android零基础入门第21节:
Android零基础入门第22节:
Android零基础入门第23节:
Android零基础入门第24节:
Android零基础入门第25节:
Android零基础入门第26节:
Android零基础入门第27节:
Android零基础入门第28节:
Android零基础入门第29节:
Android零基础入门第30节:
Android零基础入门第31节:
Android零基础入门第32节:
Android零基础入门第33节:
Android零基础入门第34节:
Android零基础入门第35节:
Android零基础入门第36节:
Android零基础入门第37节:
Android零基础入门第38节:
Android零基础入门第39节:
Android零基础入门第40节:
Android零基础入门第41节:
Android零基础入门第42节:
Android零基础入门第43节:
Android零基础入门第44节:
Android零基础入门第45节:
Android零基础入门第46节:
Android零基础入门第47节:
Android零基础入门第48节:
Android零基础入门第49节:
Android零基础入门第50节:
Android零基础入门第51节:
Android零基础入门第52节:
Android零基础入门第53节: