Android 利用ViewPager实现导航页滑动效果

  圣人云：发图不留种，菊花万人捅；但是对于整天泡代码的程序猿来说，我认为恰恰应该是：发种不留图，*****。所以为了保住菊花，每次搞博客的时候，我总要提醒自己：先发图，后上种。。。

  刚开始搞导航页时从网上找到个叫MyScrollLayout(extends ViewGroup)的自定义组件，代码繁琐，滑动速度感觉不是很舒服；现在发现大家都在用ViewPager，试了下感觉滑动速度舒服多了，而且在一个类里面就可以搞定，值得拥有，直接粘主要代码了。

1. 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" >

    <android.support.v4.view.ViewPager
        android:id="@+id/guide_viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="bottom"
            android:background="#0000"
            android:textColor="#ffff" />
    </android.support.v4.view.ViewPager>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal" >

            <ImageView
                android:id="@+id/guide_img_point0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:clickable="true"
                android:padding="10dp"
                android:src="@drawable/guide_dot_bg_selector" />

            <ImageView
                android:id="@+id/guide_img_point1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:clickable="true"
                android:padding="10dp"
                android:src="@drawable/guide_dot_bg_selector" />

            <ImageView
                android:id="@+id/guide_img_point2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:clickable="true"
                android:padding="10dp"
                android:src="@drawable/guide_dot_bg_selector" />

            <ImageView
                android:id="@+id/guide_img_point3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:clickable="true"
                android:padding="10dp"
                android:src="@drawable/guide_dot_bg_selector" />
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

2.  guide_page3.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:background="@color/guide_4"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/splash_4" 
        android:gravity="bottom|center_horizontal">

        <Button
            android:id="@+id/guide_btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="40dp"
            android:background="@drawable/guide_btn_start_selector" 
            android:onClick="gotoMainPage"/>
    </LinearLayout>

</LinearLayout>

3. GuideActivity.java

/**
 * 导航页
 */
public class GuideActivity extends BaseActivity{

	private ViewPager viewPager = null;
	private ImageView[] img_points = new ImageView[4];
	
	//底部四个小点的id
	private int[] img_pointIDs = {R.id.guide_img_point0, R.id.guide_img_point1, R.id.guide_img_point2, R.id.guide_img_point3};
	private List<View> listViews = new ArrayList<View>();
	
	//四张滚动的导航图片
	private int[] resources = {R.layout.guide_page0, R.layout.guide_page1, R.layout.guide_page2, R.layout.guide_page3};
	
	private LayoutInflater inflater = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_guide);
		
		initUI();
	}

	private void initUI() {
		inflater = LayoutInflater.from(this);
		viewPager = (ViewPager) findViewById(R.id.guide_viewpager);
		viewPager.setOnPageChangeListener(new MyPageChangeListener());
		
		for(int i=0;i<img_points.length;i++){
			img_points[i] = (ImageView) findViewById(img_pointIDs[i]);
			
			//初始化第一个小点为选中状态，其他未选中状态
			if(i != 0){
				img_points[i].setEnabled(false);
			}
			
			View view = inflater.inflate(resources[i], null);
			listViews.add(view);
		}
		
		viewPager.setAdapter(new MyPageAdapter());
	}
	
	private class MyPageAdapter extends PagerAdapter{

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

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
		
		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager)container).addView(listViews.get(position));
			return listViews.get(position);
		}
		
		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewPager)container).removeView(listViews.get(position));
		}
		
	}
	
	private class MyPageChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			
		}

		@Override
		public void onPageSelected(int arg0) {
			setImageEnable(arg0);
		}

	}
	
	/** 设置底部小点状态切换  */
	private void setImageEnable(int position) {
		for(int i=0;i<img_points.length;i++){
			if(i == position){
				img_points[i].setEnabled(true);
			}else{
				img_points[i].setEnabled(false);
			}
		}
	}
	
	/** 点最后一张图上的button跳转到主界面  */
	public void gotoMainPage(View v) {
		Editor editor = getSharedPreferences("first_start", 0).edit();
		editor.putInt("IsFirstStart", DemoApplication.getInstance().getVersionCode());
		editor.commit();
		
		Intent intent = new Intent(this, MainActivity.class);
		startActivity(intent);
		finish();
//		overridePendingTransition(R.anim.push_right_in, R.anim.push_left_out);
	}
}

4. DemoApplication.java中的方法

/** 获取版本号 **/
	public int getVersionCode() {
		int versioncode = -1;
		try {
			PackageManager pm = getPackageManager();
			PackageInfo pi = pm.getPackageInfo(getPackageName(), 0);
			versioncode = pi.versionCode;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return versioncode;
	}

5.  SplashActivity.java中检测是否需要走导航页

/** 判断是否为首次进入软件  */
	private boolean checkIsFirstStart() {
		SharedPreferences sp = getSharedPreferences("first_start", 0);
		int lastVersion = sp.getInt("IsFirstStart", 0);//根据版本号判断是否为首次启动
//		Log.d(TAG, lastVersion+","+MyApplication.localVersion);
		//根据版本号判断，如果本次启动的应用版本号 >SharedPreferences里面存的版本号
		//则说明本次为升级应用，如果相等则说明没有更新
		if (DemoApplication.getInstance().getVersionCode() > lastVersion) {
			return true;
		}
		return false;
	}

只传了三个主要文件，具体的图片和颜色值可以下载源代码看看。

        源码