android使用ViewSwitcher实现视图切换

activity类：

[java] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. package com.zzj.ui.viewanimatordemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.Activity;  
  7. import android.graphics.drawable.Drawable;  
  8. import android.os.Bundle;  
  9. import android.util.Log;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.view.ViewGroup;  
  13. import android.widget.BaseAdapter;  
  14. import android.widget.GridView;  
  15. import android.widget.ImageView;  
  16. import android.widget.TextView;  
  17. import android.widget.ViewSwitcher;  
  18. import android.widget.ViewSwitcher.ViewFactory;  
  19.   
  20. import com.zzj.ui.R;  
  21.   
  22. public class MainActivity extends Activity {  
  23.     private ViewSwitcher switcher;  
  24.     private LayoutInflater inflater;  
  25.     private List<DataItem> dataItems = new ArrayList<DataItem>();  
  26.     private int currentScreenNo = -1;// 当前屏数  
  27.     private int screenCount = 0;// 总屏数  
  28.     private final int perScreenCount = 12;// 每一屏显示数量  
  29.   
  30.     private BaseAdapter adapter = new GridViewAdapter();  
  31.   
  32.     int[] images = { R.drawable.ic_launcher, R.drawable.ic_launcher,  
  33.             R.drawable.ic_launcher, R.drawable.ic_launcher,  
  34.             R.drawable.ic_launcher, R.drawable.ic_launcher,  
  35.             R.drawable.ic_launcher, R.drawable.ic_launcher,  
  36.             R.drawable.ic_launcher, R.drawable.ic_launcher,  
  37.             R.drawable.ic_launcher, R.drawable.ic_launcher,  
  38.             R.drawable.ic_launcher, R.drawable.ic_launcher,  
  39.             R.drawable.ic_launcher, R.drawable.ic_launcher,  
  40.             R.drawable.ic_launcher, };  
  41.   
  42.     @Override  
  43.     protected void onCreate(Bundle savedInstanceState) {  
  44.         super.onCreate(savedInstanceState);  
  45.         setContentView(R.layout.viewanimator_activity);  
  46.         inflater = LayoutInflater.from(this);  
  47.   
  48.         switcher = (ViewSwitcher) findViewById(R.id.viewSwitcher1);  
  49.         // 设置每一屏显示的视图，这里设置为GridView  
  50.         switcher.setFactory(new ViewFactory() {  
  51.   
  52.             @Override  
  53.             public View makeView() {  
  54.                 return inflater.inflate(R.layout.viewanimator_gridview, null);  
  55.             }  
  56.         });  
  57.   
  58.         for (int i = 0; i < images.length; i++) {  
  59.             DataItem dataItem = new DataItem();  
  60.             dataItem.lable = "lable" + i;  
  61.             dataItem.drawable = getResources().getDrawable(images[i]);  
  62.             dataItems.add(dataItem);  
  63.         }  
  64.   
  65.         // 计算总屏数  
  66.         if (dataItems.size() % perScreenCount == 0) {  
  67.             screenCount = dataItems.size() / perScreenCount;  
  68.         } else {  
  69.             screenCount = dataItems.size() / perScreenCount + 1;  
  70.         }  
  71.   
  72.         Log.d("screenCount", String.valueOf(screenCount));  
  73.   
  74.         next(null);// 页面加载时显示第一页  
  75.     }  
  76.   
  77.     // 下一屏  
  78.     public void next(View view) {  
  79.         if (currentScreenNo < screenCount - 1) {  
  80.             currentScreenNo++;  
  81.             // 设置视图切换动画  
  82.             switcher.setInAnimation(this, R.anim.slide_in_right);// 自定义动画效果  
  83.             switcher.setOutAnimation(this, R.anim.slide_out_left);// 自定义动画效果  
  84.             // 获取下一屏GridView（通过ViewFactory设置），并且设置数据适配器  
  85.             ((GridView) switcher.getNextView()).setAdapter(adapter);  
  86.             switcher.showNext();  
  87.         }  
  88.     }  
  89.   
  90.     // 上一屏  
  91.     public void prev(View view) {  
  92.         if (currentScreenNo > 0) {  
  93.             currentScreenNo--;  
  94.             // 设置视图切换动画  
  95.             switcher.setInAnimation(this, android.R.anim.slide_in_left);// android系统自带的动画效果  
  96.             switcher.setOutAnimation(this, android.R.anim.slide_out_right);// android系统自带的动画效果  
  97.             // 获取下一屏GridView（通过ViewFactory设置），并且设置数据适配器  
  98.             ((GridView) switcher.getNextView()).setAdapter(adapter);  
  99.             switcher.showNext();  
  100.         }  
  101.     }  
  102.   
  103.     static class DataItem {  
  104.         String lable;  
  105.         Drawable drawable;  
  106.     }  
  107.   
  108.     class GridViewAdapter extends BaseAdapter {  
  109.   
  110.         /** 
  111.          * 当前屏的数量 
  112.          */  
  113.         @Override  
  114.         public int getCount() {  
  115.             if (currentScreenNo < screenCount - 1) {  
  116.                 return perScreenCount;  
  117.             }  
  118.             return dataItems.size() - (screenCount - 1) * perScreenCount;  
  119.         }  
  120.   
  121.         /** 
  122.          * 数据 
  123.          */  
  124.         @Override  
  125.         public Object getItem(int position) {  
  126.             int index = currentScreenNo * perScreenCount + position;  
  127.             return dataItems.get(index);  
  128.         }  
  129.   
  130.         @Override  
  131.         public long getItemId(int position) {  
  132.             return position;  
  133.         }  
  134.   
  135.         @Override  
  136.         public View getView(int position, View convertView, ViewGroup parent) {  
  137.             if (convertView == null) {  
  138.                 convertView = inflater.inflate(R.layout.lable_icon, null);  
  139.             }  
  140.             ImageView imageView = (ImageView) convertView  
  141.                     .findViewById(R.id.imageView1);  
  142.             DataItem dataItem = (DataItem) getItem(position);  
  143.             imageView.setImageDrawable(dataItem.drawable);  
  144.             TextView textView = (TextView) convertView  
  145.                     .findViewById(R.id.textView1);  
  146.             textView.setText(dataItem.lable);  
  147.             return convertView;  
  148.         }  
  149.   
  150.     }  
  151.   
  152. }  

主布局文件viewanimator_activity.xml：

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <ViewSwitcher  
  7.         android:id="@+id/viewSwitcher1"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent" >  
  10.     </ViewSwitcher>  
  11.   
  12.     <Button  
  13.         android:id="@+id/button_prev"  
  14.         android:layout_width="wrap_content"  
  15.         android:layout_height="wrap_content"  
  16.         android:layout_alignParentBottom="true"  
  17.         android:layout_alignParentLeft="true"  
  18.         android:onClick="prev"  
  19.         android:text="<" />  
  20.   
  21.     <Button  
  22.         android:id="@+id/button_next"  
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_alignParentBottom="true"  
  26.         android:layout_alignParentRight="true"  
  27.         android:onClick="next"  
  28.         android:text=">" />  
  29.   
  30. </RelativeLayout>  

 

布局文件viewanimator_gridview.xml：

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:numColumns="3" />  

布局文件lable_icon.xml：

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     android:gravity="center" >  
  7.   
  8.     <ImageView  
  9.         android:id="@+id/imageView1"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content" />  
  12.   
  13.     <TextView  
  14.         android:id="@+id/textView1"  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content" />  
  17.   
  18. </LinearLayout>  

 

自定义动画效果res/anim/slide_in_right.xml：

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <translate android:fromXDelta="100%p"  
  4.         android:toXDelta="0"  
  5.         android:duration="@android:integer/config_mediumAnimTime"/>  
  6.   
  7. </set>  

自定义动画效果res/anim/slide_out_left.xml：

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <translate android:fromXDelta="0"  
  4.         android:toXDelta="-100%p"  
  5.         android:duration="@android:integer/config_mediumAnimTime"/>  
  6.   
  7. </set>  

运行效果：

 

下一屏：

 

posted @ 2016-11-28 11:39  天涯海角路  阅读(319)  评论(0)    收藏  举报