Android UI开发第二十篇——仿launcher的左右滑动（用ViewPager实现欢迎引导页面）

最新推荐文章于 2024-09-07 17:28:41 发布

assassin4824

最新推荐文章于 2024-09-07 17:28:41 发布

阅读量2.2k

点赞数

分类专栏： Android - UI开发专栏

Android - UI开发专栏专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Android提供另一个非常有用的控件ViewPager。使用这个控件，需要用到google提到的一个包——android-support-v4.jar，这个包中包含了一些非常有用的类，其中就是ViewPager类来实现页面之间的切换操作，关于android-support-v4.jar的详细信息，大家可以访问google官方网站： http://developer.android.com/sdk/compatibility-library.html。

具体的把Android提供的android-support-v4.jar导入工程，并add build path的方法这里不做介绍，可以参考以上提供的网址，里面会有详细的说明，步骤比较简单。

下面通过两个例子来讲解一下比较复杂的滑动界面的实现。

一、Demo1

Demo1运行效果1 Demo1运行效果2

Demo1实现的效果是我们在浏览新闻网页时经常会看到的，屏幕的上半部分是图片，下半部分是文字的介绍，而顶部是一个导航的工具栏可以供用户选择退出或者回到主菜单等。用户通过左右的滑动屏幕，实现翻页的效果。而在屏幕的最底部，会有对当前所处页面的指示标记。
主布局文件main.xml的内容如下：

xml代码：

<?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" >

    <LinearLayout
        android:layout_width="fill_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="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="fill_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>

最外层是LinearLayout，其中包括两个Linearlayout，第一个LinearLayout是显示新闻的主界面，而第二个LinearLayout是为了在底部存放指示当前界面的标记图片。值得注意的是第一个LinearLayout中包括又包括两部分，一个是通过include引入的item_header视图，一个是ViewPager控件，在这里还要注意ViewPager空间的布局方式。代码如下：

xml代码：

<LinearLayout
    android:layout_width="fill_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="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

另外，在layout文件夹下还定义了item01——item06六个布局文件作为ViewPager的六个页面，在JAVA代码中会把它们分别添加进ViewPager。Item_header.xml布局定义了屏幕上方的导航栏，通过include的方式引入了main.xml布局文件。

java代码：

package com.devdiv.test.ui_test_viewpager;

import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
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 UI_Test_ViewPagerActivity extends Activity {

	private ViewPager mViewPager;
	private ArrayList<View> mPageViews;
	private ImageView mImageView;
	private ImageView[] mImageViews;

	// 该应用的主布局LinearLayout
	private ViewGroup mainViewGroup;
	// 主布局底部指示当前页面的小圆点视图，LinearLayout
	private ViewGroup indicatorViewGroup;

	// 定义LayoutInflater
	LayoutInflater mInflater;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// setContentView(R.layout.main);
		// 设置窗口无标题
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		// mInflater = (LayoutInflater)
		// getSystemService(Context.LAYOUT_INFLATER_SERVICE);

		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));
		mPageViews.add(mInflater.inflate(R.layout.item04, null));
		mPageViews.add(mInflater.inflate(R.layout.item05, null));
		mPageViews.add(mInflater.inflate(R.layout.item06, null));
		mImageViews = new ImageView[mPageViews.size()];

		mainViewGroup = (ViewGroup) mInflater.inflate(R.layout.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(UI_Test_ViewPagerActivity.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.main);
		setContentView(mainViewGroup);

		mViewPager.setAdapter(new MyPagerAdapter());
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int arg0) {
				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 onPageScrolled(int arg0, float arg1, int arg2) {
			}

			@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;
		}

		@Override
		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);
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
		}

		@Override
		public void finishUpdate(View arg0) {
		}
	}
}

其中，需要注意的是在自定义MyPagerAdapter继承自PagerAdapter，需要重写其中的一些重要方法，可以类比BaseAdapter的实现便于理解，具体实现参考API文档。

java代码：

			mImageViews = new ImageView[mPageViews.size()];
	        
	        mainViewGroup = (ViewGroup) mInflater.inflate(R.layout.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(UI_Test_ViewPagerActivity.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]);
  }

根据mPageViews的大小初始化ImageViews，也就是说ViewPager中存在几个Page就初始化几个圆点的图片进行相应的指示。并且根据位置，设置圆点的不同状态，出事情况下显示第一个Page，因此第一个圆点的图片是focused的状态。最后，通过indicatorViewGroup.addView(mImageViews[i])把所有圆点的图片添加到布局中，在屏幕上显示。
底部圆点图片初始化并加入布局后，需要给ViewPager设置Adapter，这里使用的是我们自定义的MyPagerAdapter，然后执行setContentView操作。
最后，为了是底部的圆点视图具有指示作用，需要为ViewPager设置监听器，来根据ViewPager的不同状态，改变底部圆点视图的状态。代码如下：

java代码：

	mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
	   
	   @Override
	   public void onPageSelected(int arg0) {
		    // TODO Auto-generated method stub
		    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 onPageScrolled(int arg0, float arg1, int arg2) {
	   }
	   
	   @Override
	   public void onPageScrollStateChanged(int arg0) {
	   }
	});

二、Demo2

Demo2同样实现了左右滑动的效果，不过我们在不同的页面使用了不同的布局，这在实际的应用中也是很常见的。我们同样使用了ViewPager控件，具体方法和Demo1基本相同。

不同在于，我们在两个页面中分别使用了ListView中GridView视图，并在代码中为它们分别绑定了不同的Adapter。ListView使用了简单的ArrayAdapter，显示一组数据。GridView使用了自定义的Adapter。

由于Demo2和Demo1的内容非常相似，我们就不再展开分析。

Demo2运行效果如下：