前言

凡事不必太在意，一切随缘随心，缘深多聚聚，缘浅随它去。

ViewSwitcher的功能与用法

ViewSwitcher代表了视图切换组件，它本身继承了FrameLayout，因此可以将多个View层叠在一起，每次只显示一个组件。当程序控制从一个View切换到另一个View时，ViewSwitcher支持指定的动画。下面来看看仿Android系统Launcher界面示例。假设一共有100个应用程序，每个页面显示20个，每行4个。

代码示例

activity_main.xml

<RelativeLayout 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" ><!-- 定义个一个ViewSwitcher组件 --><ViewSwitcherandroid:id="@+id/viewSwitcher"android:layout_width="match_parent"android:layout_height="match_parent"/><!-- 定义滚动到上一屏的按钮 --><Buttonandroid:id="@+id/button_prev"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"android:onClick="prev"android:text="<"/><!-- 定义滚动到下一屏的按钮 --><Buttonandroid:id="@+id/button_next"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:onClick="next"android:text=">"/>
</RelativeLayout>

labelicon.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><ImageViewandroid:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content"/><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"/>
</LinearLayout>

slidelistview.xml

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

slide_in_left.xml

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

slide_out_right.xml

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

slide_in_right.xml

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

slide_out_left.xml

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

MainActivity.java

public class MainActivity extends Activity {//定义一个常量，用于显示每屏显示的应用程序数public static final int NUMER_PER_SCREEN = 20;//代表应用程序的内部类public static class DataItem{//应用程序名称public String dataName;//应用程序图片public Drawable drawable;}//保存系统所有应用程序的List集合private ArrayList<DataItem> items = new ArrayList<DataItem>();//记录当前正在显示第几屏的程序private int screenNo = -1;//保存程序所占的总屏数private int screenCount;ViewSwitcher switcher;//创建LayoutInflater对象LayoutInflater inflater;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);inflater = LayoutInflater.from(MainActivity.this);//创建一个包含100个元素的list集合，用于模拟包含100个应用程序for (int i = 0; i < 100; i++) {String label = "" + i;Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);DataItem item = new DataItem();item.dataName = label;item.drawable = drawable;items.add(item);}//计算应用程序所占的总屏数//如果应用程序的数量能整除NUMBER_PER_SCREEN，除法的结果就是总屏数//如果不能整除，总屏数应该是除法的结果加1screenCount = items.size() % NUMER_PER_SCREEN == 0 ?items.size() / NUMER_PER_SCREEN :items.size() / NUMER_PER_SCREEN + 1;switcher = (ViewSwitcher) findViewById(R.id.viewSwitcher);switcher.setFactory(new ViewFactory() {//实际上是返回一个GridView组件@Overridepublic View makeView() {//加载R.Layout。slidelistview组件，实际上就是一个GridViewreturn inflater.inflate(R.layout.slidelistview, null);}});next(null);}public void next(View v){if(screenNo < screenCount - 1){screenNo++;//为ViewSwitcher的组件显示过程设置动画switcher.setInAnimation(this,R.anim.slide_in_right);//为ViewSwitcher的组件隐藏过程设置动画switcher.setInAnimation(this,R.anim.slide_out_left);//控制下一屏将要显示的GridView对应的Adapter((GridView)switcher.getNextView()).setAdapter(adapter);//单击右边按钮，显示下一屏switcher.showNext();}}public void prev(View v){if(screenNo > 0){screenNo--;//为ViewSwitcher的组件显示过程设置动画switcher.setInAnimation(this,R.anim.slide_in_left);//为ViewSwitcher的组件隐藏过程设置动画switcher.setInAnimation(this,R.anim.slide_out_right);//控制下一屏将要显示的GridView对应的Adapter((GridView)switcher.getNextView()).setAdapter(adapter);//单击右边按钮，显示下一屏switcher.showPrevious();}}//该BaseAdapter负责为每屏显示的GridView提供列表项private BaseAdapter adapter = new BaseAdapter() {@Overridepublic View getView(int position, View convertView, ViewGroup parent) {View view =convertView;if(convertView == null){//加载R.layout.labelicon布局文件view = inflater.inflate(R.layout.labelicon, null);}//获取R.layout.labelicon布局文件中的ImageView组件,并为之设置图标ImageView imageView = (ImageView) view.findViewById(R.id.imageView);imageView.setImageDrawable(getItem(position).drawable);//获取R.layout.labelicon布局文件中的TextView组件,并为之设置文本TextView textView = (TextView) view.findViewById(R.id.textView);textView.setText(getItem(position).dataName);return view;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic DataItem getItem(int position) {//根据screenNo计算第position个列表项的数据return items.get(screenNo * NUMER_PER_SCREEN + position);}@Overridepublic int getCount() {//如果已经到了最后一屏，且应用程序的数量不能整除NUMBER_PER_SCREENif(screenNo == screenCount - 1 && items.size() % NUMER_PER_SCREEN != 0){//最后一屏显示的程序数为应用程序的数量对NUMBER_PER_SCREEN求余return items.size() % NUMER_PER_SCREEN;}//否则每屏显示的程序数量为NUMER_PER_SCREENreturn NUMER_PER_SCREEN;}};
}

效果

Screenshot_20171020-151447.png

提示

也许你会对这个程序的一些代码感到疑惑，比如说这段代码。

    View view =convertView;if(convertView == null){//加载R.layout.labelicon布局文件view = inflater.inflate(R.layout.labelicon, null);}

其实它只不过是ListView缓存的一种手段，这样在你快速滑动的时候可以防止内存溢出。

点击按钮会切换到另一个页面，这可不是跳转到另一Activity。以后我会写关于手势操作的文章，这样就可以通过手势来进行页面切换。

ImageSwitcher

ImageSwitcher继承了ViewSwitcher，因此它具有与ViewSwitcher相同的特征：可以在切换View组件时使用动画效果。ImageSwitcher的操作很简单，只需要如下两步即可。

• 为ImageSwitcher提供一个ViewFactory，该ViewFactory生成的View组件必须是ImageView。

• 需要切换图片时，只要调用ImageSwitcher的setImageDrawable(Drawable drawable)、setImageResource(int resid)和setImageURI(Uri uri)方法更换图片即可。

代码示例

imageswitch.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center_horizontal"><!-- 定义一个GridView组件 --><GridViewandroid:id="@+id/grid01"android:layout_width="match_parent"android:layout_height="wrap_content"android:horizontalSpacing="2dp"android:verticalSpacing="2dp"android:numColumns="4"android:gravity="center"/><!-- 定义一个ImageSwitcher --><ImageSwitcherandroid:id="@+id/switcher"android:layout_width="300dp"android:layout_height="300dp"android:layout_gravity="center_horizontal"android:inAnimation="@android:anim/fade_in"android:outAnimation="@android:anim/fade_out"/>
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {int []imageIds = new int[]{R.drawable.baxianhua,R.drawable.dengta,R.drawable.ic_launcher,R.drawable.juhua,R.drawable.kaola,R.drawable.qie,R.drawable.shamo,R.drawable.shuimo,R.drawable.yujinx,R.drawable.baxianhua,R.drawable.dengta,R.drawable.ic_launcher,R.drawable.juhua,R.drawable.kaola,R.drawable.qie,R.drawable.shamo};ImageSwitcher switcher;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.imageswitch);List<Map<String,Object>> listItems = new ArrayList<Map<String,Object>>();for (int i = 0; i < imageIds.length; i++) {Map<String,Object> listItem = new HashMap<String, Object>();listItem.put("image", imageIds[i]);listItems.add(listItem);}//获取显示图片的ImageSwitcherswitcher = (ImageSwitcher) findViewById(R.id.switcher);//为ImageSwitcher设置图片切换的动画效果switcher.setFactory(new ViewFactory() {@Overridepublic View makeView() {//创建ImageView对象ImageView imageView = new ImageView(MainActivity.this);imageView.setScaleType(ScaleType.FIT_CENTER);imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));return imageView;}});SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems, R.layout.cell,new String[] {"image"}, new int[] {R.id.image1});GridView grid = (GridView) findViewById(R.id.grid01);grid.setAdapter(simpleAdapter);//添加列表项被选中的监听器grid.setOnItemSelectedListener(new GridView.OnItemSelectedListener() {@Overridepublic void onNothingSelected(AdapterView<?> parent) {}@Overridepublic void onItemSelected(AdapterView<?> parent, View view, int position, long id) {//显示被选中的图片switcher.setImageResource(imageIds[position]);}});grid.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {//显示被选中的图片switcher.setImageResource(imageIds[position]);}});}
}

效果

Screenshot_20171020-161723.png

提示

TextSwitcher组件

TextSwitcher组件继承了ViewSwitcher组件，与上面的ImageSwitcher组件的用法相似，唯一不同的是TextSwitcher所需的ViewFactory的makeView()方法必须返回一个TextView组件。

代码示例

textswitcher.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 定义一个TextSwitcher，并指定了文本切换时的动画效果 --><TextSwitcherandroid:id="@+id/textSwitcher"android:layout_width="match_parent"android:layout_height="wrap_content"android:inAnimation="@android:anim/slide_in_left"android:outAnimation="@android:anim/slide_out_right"android:onClick="next"/>
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {TextSwitcher textSwitcher;String[] strs = new String[]{"水浒传","三国演义","红楼梦","西游记"};int curStr;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.textswitcher);textSwitcher = (TextSwitcher) findViewById(R.id.textSwitcher);textSwitcher.setFactory(new ViewFactory() {@Overridepublic View makeView() {TextView tv = new TextView(MainActivity.this);tv.setTextSize(40);tv.setTextColor(Color.MAGENTA);return tv;}});//调用next方法显示一个字符串next(null);}public void next(View v) {textSwitcher.setText(strs[curStr++ % strs.length]);}
}

效果

Screenshot_20171023-092903.png

点击文本会出现切换效果

提示

TextSwitcher与TextView的功能有点相似，它们都可用于显示文本内容，区别在于TextSwitcher的效果更炫，它可以指定文本切换时的动画效果。

ViewFlipper组件

ViewFlipper组件继承了ViewAnimator，它可以调用addView(View v)方法添加多个组件，一旦向ViewFlipper中添加多个组件之后，ViewFlipper就可使动画控制多个组件之间的切换效果。它与前边介绍的AdapterViewFlipper有较大的相似性，区别就是ViewFlipper需要开发者通过addView(View v)添加多个View，而AdapterViewFlipper只要传入一个Adapter，Adapter将会负责提供多个View。

代码示例

viewflipper.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"><ViewFlipperandroid:id="@+id/details"android:layout_width="match_parent"android:layout_height="match_parent"android:flipInterval="1000"><ImageViewandroid:src="@drawable/baxianhua"android:layout_width="match_parent"android:layout_height="wrap_content"/><ImageViewandroid:src="@drawable/dengta"android:layout_width="match_parent"android:layout_height="wrap_content"/><ImageViewandroid:src="@drawable/juhua"android:layout_width="match_parent"android:layout_height="wrap_content"/></ViewFlipper><Buttonandroid:text="<"android:onClick="prev"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"/><Buttonandroid:text="自动播放"android:onClick="auto"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerInParent="true"/><Buttonandroid:text=">"android:onClick="next"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"/>
</RelativeLayout>

MainAcitivity.java

public class MainActivity extends Activity {private ViewFlipper viewFlipper;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.viewflipper);viewFlipper = (ViewFlipper) findViewById(R.id.details);}public void prev(View v) {viewFlipper.setInAnimation(this, R.anim.slide_in_right);viewFlipper.setOutAnimation(this, R.anim.slide_out_left);// 显示上一个组件viewFlipper.showPrevious();// 停止自动播放viewFlipper.stopFlipping();}public void next(View v) {viewFlipper.setInAnimation(this, R.anim.slide_in_left);viewFlipper.setOutAnimation(this, R.anim.slide_out_right);// 显示下一个组件viewFlipper.showNext();// 停止自动播放viewFlipper.stopFlipping();}public void auto(View v) {viewFlipper.setInAnimation(this, R.anim.slide_in_left);viewFlipper.setOutAnimation(this, R.anim.slide_out_right);//开始自动播放viewFlipper.startFlipping();}
}

效果

Screenshot_20171023-100803.png

提示

ViewFlipper可以指定与AdapterViewFlipper相同的XML属性。