第八十六讲：Android之ViewPager的用法（1）_Android

第八十六讲：Android之ViewPager的用法（一）

活在昨天的人失去过去，活在明天的人失去未来，活在今天的人拥有过去和未来。

本讲内容：ViewPager控件的用法

使用这个控件，需要用到google提到的一个包——android-support-v4.jar（放在libs里面）

示例一(实现欢迎引导介面)

下面是res/layout/activity_main.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <include            android:id="@+id/item_header"            layout="@layout/item_header" />        <android.support.v4.view.ViewPager            android:id="@+id/myviewpager"            android:layout_width="match_parent"            android:layout_height="wrap_content" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <LinearLayout                android:id="@+id/mybottomviewgroup"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_alignParentBottom="true"                android:layout_marginBottom="40dp"                android:gravity="center_horizontal"                android:orientation="horizontal" >            </LinearLayout>        </RelativeLayout>    </LinearLayout></FrameLayout>

include标签可以多次引用一个布局片段而不用重复的复制、粘贴。通过include标签也可以覆写一些属性的值，例如上面的示例就覆写了引用的layout中的id值。

下面是res/layout/item_header.xml 布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/top_navigate"    android:layout_width="fill_parent"    android:layout_height="66px"    android:background="@drawable/top_back_image"    android:orientation="horizontal" >    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentLeft="true"        android:layout_centerVertical="true"        android:layout_gravity="center_vertical"        android:layout_marginLeft="5dip"        android:gravity="center"        android:orientation="vertical" >        <TextView            android:id="@+id/NavigateBack"            android:layout_width="71px"            android:layout_height="45px"            android:background="@drawable/btn_back_bg"            android:clickable="true"            android:gravity="center"            android:paddingLeft="4px"            android:text="返回"            android:textColor="#ffffffff"            android:textSize="13.5sp" />    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_gravity="center_vertical"        android:layout_marginRight="5dip"        android:gravity="center"        android:orientation="vertical" >        <TextView            android:id="@+id/NavigateHome"            android:layout_width="71px"            android:layout_height="45px"            android:background="@drawable/btn_home_bg"            android:clickable="true"            android:gravity="center"            android:text="首页"            android:textColor="#ffffffff"            android:textSize="13.5sp" />    </LinearLayout></RelativeLayout>

下面是res/layout/item01.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" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/divider_horizontal_line"        android:orientation="vertical" >    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <ImageView            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="@drawable/feature_guide_0" >        </ImageView>    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/bg"        android:orientation="vertical" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="30px"            android:background="@drawable/divider_horizontal_line"            android:orientation="vertical" >        </LinearLayout>        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:paddingLeft="30px"                android:paddingRight="30px"                android:text="@string/text1"                android:textColor="#000000"                android:textSize="18sp" />        </LinearLayout>    </LinearLayout></LinearLayout>

下面是res/layout/item02.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" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/divider_horizontal_line"        android:orientation="vertical" >    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <ImageView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@drawable/feature_guide_1" >        </ImageView>    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/bg"        android:orientation="vertical" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="30px"            android:background="@drawable/divider_horizontal_line"            android:orientation="vertical" >        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:paddingLeft="30px"                android:paddingRight="30px"                android:text="@string/text2"                android:textColor="#000000"                android:textSize="18sp"  />        </LinearLayout>    </LinearLayout></LinearLayout>

下面是res/layout/item03.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" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/divider_horizontal_line"        android:orientation="vertical" >    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical" >        <ImageView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@drawable/feature_guide_2" >        </ImageView>    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/bg"        android:orientation="vertical" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="30px"            android:background="@drawable/divider_horizontal_line"            android:orientation="vertical" >        </LinearLayout>        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:paddingLeft="30px"                android:paddingRight="30px"                android:text="@string/text3"                android:textColor="#000000"                 android:textSize="18sp" />        </LinearLayout>    </LinearLayout></LinearLayout>

下面是res/values/string.xml 文件：

<?xml version="1.0" encoding="utf-8"?><resources>    <string name="text1">随着Windows Phone逐步渗入中国智能手机市场，Windows Phone作为移动操作平台的新锐，自然不会失宠。Windows Phone 7在中国没有流行的原因，很大程度上是因为在中国并没有上市。现在，诺基亚和微软宣布达成紧密战略合作之后，沉寂许久的Windows Phone操作系统再次走入了人们关注的视野，成了移动应用开发者继iOS和Android之外的另一选择。</string>    <string name="text2">好友曾向我展示了最新的iPhone和iPad版《极品飞车》。游戏的渲染效果令人印象深刻，是款蓄势待发的优秀游戏。但是，游戏的前端是典型的UI设计偏差案例。但界面中有大量的属性数据等内容，它在玩家没有时间做决定时提供了过多的内容。这些内容能够显著改变他们的游戏体验，但却在玩家往往感受不到变化的时候呈现。</string>    <string name="text3">3月31日，第四届CocoaChina游戏开发者大会暨Cocos2D-X技术研讨会在北京举行。来自全世界的移动互联网精英在此交流经验、相互学习。同时这次我们有幸也采访到了CocoaChina的CEO陈昊芝先生。他将为我们揭秘苹果新榜单的算法秘密，并未我们带来捕鱼达人成功的推广经验，对微软Windows Phone平台的吐槽和对未来3D技术趋势的前瞻。</string>  </resources>

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity {	private ViewPager mViewPager;	private ArrayList<View> mPageViews;	private ImageView mImageView;	private ImageView[] mImageViews;	// 该应用的主布局LinearLayout	private ViewGroup mainViewGroup;	// 主布局底部指示当前页面的小圆点视图	private ViewGroup indicatorViewGroup;	// 定义LayoutInflater	LayoutInflater mInflater;	public void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		initUI();	}	private void initUI() {		// 设置窗口无标题		requestWindowFeature(Window.FEATURE_NO_TITLE);		mInflater = getLayoutInflater();		mPageViews = new ArrayList<View>();		mPageViews.add(mInflater.inflate(R.layout.item01, null));		mPageViews.add(mInflater.inflate(R.layout.item02, null));		mPageViews.add(mInflater.inflate(R.layout.item03, null));		mImageViews = new ImageView[mPageViews.size()];		mainViewGroup = (ViewGroup) mInflater.inflate(R.layout.activity_main,null);		mViewPager = (ViewPager) mainViewGroup.findViewById(R.id.myviewpager);		indicatorViewGroup = (ViewGroup) mainViewGroup				.findViewById(R.id.mybottomviewgroup);		for (int i = 0; i < mImageViews.length; i++) {			mImageView = new ImageView(MainActivity.this);			mImageView.setLayoutParams(new LayoutParams(20, 20));			mImageView.setPadding(20, 0, 20, 0);			if (i == 0) {				mImageView						.setBackgroundResource(R.drawable.page_indicator_focused);			} else {				mImageView.setBackgroundResource(R.drawable.page_indicator);			}			mImageViews[i] = mImageView;			// 把指示作用的远点图片加入底部的视图中			indicatorViewGroup.addView(mImageViews[i]);		}		// 注意这两种用法的区别，前者无法正常显示！！		// setContentView(R.layout.activity_main);		setContentView(mainViewGroup);		mViewPager.setAdapter(new MyPagerAdapter());		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {			@Override			public void onPageSelected(int arg0) {			}			@Override			public void onPageScrolled(int arg0, float arg1, int arg2) {				for (int i = 0; i < mImageViews.length; i++) {					if (i == arg0) {						mImageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);					} else {						mImageViews[i].setBackgroundResource(R.drawable.page_indicator);					}				}			}			@Override			public void onPageScrollStateChanged(int arg0) {			}		});	}	class MyPagerAdapter extends PagerAdapter {		@Override		public int getCount() {			return mPageViews.size();		}		@Override		public boolean isViewFromObject(View arg0, Object arg1) {			return arg0 == arg1;		}		public int getItemPosition(Object object) {			return super.getItemPosition(object);		}		@Override		public void destroyItem(View arg0, int arg1, Object arg2) {			((ViewPager) arg0).removeView(mPageViews.get(arg1));		}		@Override		public Object instantiateItem(View arg0, int arg1) {			((ViewPager) arg0).addView(mPageViews.get(arg1));			return mPageViews.get(arg1);		}	}}

Take your time and enjoy it