布局demo三：viewPager实现翻页效果

使用ViewPager实现高仿launcher拖动效果

 

         今天用ViewPager 这个类实现了同样的效果，这样代码更少，但是效果是一样的。ViewPager是实现左右两个屏幕平滑地切换的一个类，它是Google提供的。

       使用ViewPager首先需要引入android-support-v4.jar这个jar包。具体ViewPager的用法，这里不做介绍，自己从网上搜索吧！

 

首先是layout下面的main.xml

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <android.support.v4.view.ViewPager  
8.         android:id="@+id/viewPager"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content" />  
11.   
12.     <RelativeLayout  
13.         android:layout_width="fill_parent"  
14.         android:layout_height="wrap_content"  
15.         android:orientation="vertical" >  
16.   
17.         <LinearLayout  
18.             android:id="@+id/viewGroup"  
19.             android:layout_width="fill_parent"  
20.             android:layout_height="wrap_content"  
21.             android:layout_alignParentBottom="true"  
22.             android:layout_marginBottom="30dp"  
23.             android:gravity="center_horizontal"  
24.             android:orientation="horizontal" >  
25.         </LinearLayout>  
26.     </RelativeLayout>  
27.   
28. </FrameLayout>  

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/viewGroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

接下来为每一个切换界面设置布局item1.xml

[html] view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <ImageView  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:background="@drawable/guide01" >  
11.     </ImageView>  
12.   
13. </LinearLayout>  

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/guide01" >
    </ImageView>

</LinearLayout>

其他的几个界面布局和这个一样 ，就是修改下背景图片，所以不再复述，

最后是核心代码：

[html] view plain copy print ?

1. import java.util.ArrayList;  
2.   
3.   
4. import android.app.Activity;  
5. import android.os.Bundle;  
6. import android.os.Parcelable;  
7. import android.support.v4.view.PagerAdapter;  
8. import android.support.v4.view.ViewPager;  
9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
10. import android.view.LayoutInflater;  
11. import android.view.View;  
12. import android.view.ViewGroup;  
13. import android.view.ViewGroup.LayoutParams;  
14. import android.view.Window;  
15. import android.widget.ImageView;  
16.   
17. public class MainActivity extends Activity {  
18.     ViewPager viewPager;  
19.     ArrayList<View> list;  
20.     ViewGroup main, group;  
21.     ImageView imageView;  
22.     ImageView[] imageViews;  
23.   
24.     @Override  
25.     public void onCreate(Bundle savedInstanceState) {  
26.         super.onCreate(savedInstanceState);  
27.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
28.         LayoutInflater inflater = getLayoutInflater();  
29.         list = new ArrayList<View>();  
30.         list.add(inflater.inflate(R.layout.item1, null));  
31.         list.add(inflater.inflate(R.layout.item2, null));  
32.         list.add(inflater.inflate(R.layout.item3, null));  
33.         list.add(inflater.inflate(R.layout.item4, null));  
34.         list.add(inflater.inflate(R.layout.item5, null));  
35.   
36.         imageViews = new ImageView[list.size()];  
37.         ViewGroup main = (ViewGroup) inflater.inflate(R.layout.main, null);  
38.         // group是R.layou.main中的负责包裹小圆点的LinearLayout.  
39.         ViewGroup group = (ViewGroup) main.findViewById(R.id.viewGroup);  
40.   
41.         viewPager = (ViewPager) main.findViewById(R.id.viewPager);  
42.   
43.         for (int i = 0; i < list.size(); i++) {  
44.             imageView = new ImageView(MainActivity.this);  
45.             imageView.setLayoutParams(new LayoutParams(10,10));  
46.             imageView.setPadding(10, 0, 10, 0);  
47.             imageViews[i] = imageView;  
48.             if (i == 0) {  
49.                 // 默认进入程序后第一张图片被选中;  
50.                 imageViews[i].setBackgroundResource(R.drawable.guide_dot_white);  
51.             } else {  
52.                 imageViews[i].setBackgroundResource(R.drawable.guide_dot_black);  
53.             }  
54.             group.addView(imageView);  
55.         }  
56.   
57.         setContentView(main);  
58.   
59.         viewPager.setAdapter(new MyAdapter());  
60.         viewPager.setOnPageChangeListener(new MyListener());  
61.     }  
62.   
63.     class MyAdapter extends PagerAdapter {  
64.   
65.         @Override  
66.         public int getCount() {  
67.             return list.size();  
68.         }  
69.   
70.         @Override  
71.         public boolean isViewFromObject(View arg0, Object arg1) {  
72.             return arg0 == arg1;  
73.         }  
74.   
75.         @Override  
76.         public int getItemPosition(Object object) {  
77.             // TODO Auto-generated method stub  
78.             return super.getItemPosition(object);  
79.         }  
80.   
81.         @Override  
82.         public void destroyItem(View arg0, int arg1, Object arg2) {  
83.             // TODO Auto-generated method stub  
84.             ((ViewPager) arg0).removeView(list.get(arg1));  
85.         }  
86.   
87.         @Override  
88.         public Object instantiateItem(View arg0, int arg1) {  
89.             // TODO Auto-generated method stub  
90.             ((ViewPager) arg0).addView(list.get(arg1));  
91.             return list.get(arg1);  
92.         }  
93.   
94.         @Override  
95.         public void restoreState(Parcelable arg0, ClassLoader arg1) {  
96.             // TODO Auto-generated method stub  
97.   
98.         }  
99.   
100.         @Override  
101.         public Parcelable saveState() {  
102.             // TODO Auto-generated method stub  
103.             return null;  
104.         }  
105.   
106.         @Override  
107.         public void startUpdate(View arg0) {  
108.             // TODO Auto-generated method stub  
109.   
110.         }  
111.   
112.         @Override  
113.         public void finishUpdate(View arg0) {  
114.             // TODO Auto-generated method stub  
115.   
116.         }  
117.     }  
118.   
119.     class MyListener implements OnPageChangeListener {  
120.   
121.         @Override  
122.         public void onPageScrollStateChanged(int arg0) {  
123.             // TODO Auto-generated method stub  
124.   
125.         }  
126.   
127.         @Override  
128.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
129.             // TODO Auto-generated method stub  
130.   
131.         }  
132.   
133.         @Override  
134.         public void onPageSelected(int arg0) {  
135.             for (int i = 0; i < imageViews.length; i++) {  
136.                 imageViews[arg0]  
137.                         .setBackgroundResource(R.drawable.guide_dot_white);  
138.                 if (arg0 != i) {  
139.                     imageViews[i]  
140.                             .setBackgroundResource(R.drawable.guide_dot_black);  
141.                 }  
142.             }  
143.   
144.         }  
145.   
146.     }  
147. }  

import java.util.ArrayList;


import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;

public class MainActivity extends Activity {
	ViewPager viewPager;
	ArrayList<View> list;
	ViewGroup main, group;
	ImageView imageView;
	ImageView[] imageViews;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		LayoutInflater inflater = getLayoutInflater();
		list = new ArrayList<View>();
		list.add(inflater.inflate(R.layout.item1, null));
		list.add(inflater.inflate(R.layout.item2, null));
		list.add(inflater.inflate(R.layout.item3, null));
		list.add(inflater.inflate(R.layout.item4, null));
		list.add(inflater.inflate(R.layout.item5, null));

		imageViews = new ImageView[list.size()];
		ViewGroup main = (ViewGroup) inflater.inflate(R.layout.main, null);
		// group是R.layou.main中的负责包裹小圆点的LinearLayout.
		ViewGroup group = (ViewGroup) main.findViewById(R.id.viewGroup);

		viewPager = (ViewPager) main.findViewById(R.id.viewPager);

		for (int i = 0; i < list.size(); i++) {
			imageView = new ImageView(MainActivity.this);
			imageView.setLayoutParams(new LayoutParams(10,10));
			imageView.setPadding(10, 0, 10, 0);
			imageViews[i] = imageView;
			if (i == 0) {
				// 默认进入程序后第一张图片被选中;
				imageViews[i].setBackgroundResource(R.drawable.guide_dot_white);
			} else {
				imageViews[i].setBackgroundResource(R.drawable.guide_dot_black);
			}
			group.addView(imageView);
		}

		setContentView(main);

		viewPager.setAdapter(new MyAdapter());
		viewPager.setOnPageChangeListener(new MyListener());
	}

	class MyAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return list.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public int getItemPosition(Object object) {
			// TODO Auto-generated method stub
			return super.getItemPosition(object);
		}

		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
			// TODO Auto-generated method stub
			((ViewPager) arg0).removeView(list.get(arg1));
		}

		@Override
		public Object instantiateItem(View arg0, int arg1) {
			// TODO Auto-generated method stub
			((ViewPager) arg0).addView(list.get(arg1));
			return list.get(arg1);
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
			// TODO Auto-generated method stub

		}

		@Override
		public Parcelable saveState() {
			// TODO Auto-generated method stub
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
			// TODO Auto-generated method stub

		}

		@Override
		public void finishUpdate(View arg0) {
			// TODO Auto-generated method stub

		}
	}

	class MyListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub

		}

		@Override
		public void onPageSelected(int arg0) {
			for (int i = 0; i < imageViews.length; i++) {
				imageViews[arg0]
						.setBackgroundResource(R.drawable.guide_dot_white);
				if (arg0 != i) {
					imageViews[i]
							.setBackgroundResource(R.drawable.guide_dot_black);
				}
			}

		}

	}
}

最后在提醒一句，不要忘记加入android-support-v4.jar这个jar包。