App第一次启动时翻页介绍的简洁实现

2021-08-03 00:40:10

应用第一次启动的时候，要给用户介绍这个应用。这时候就会选择ViewPager来实现。第一次运行微信的时候，出现一些翻页的界面，告诉你微信可以用语音来聊天，还可以在朋友圈分享生活。像这样：

*布局变化的同时，下面的亮点也变化了，从第二个跳到了第三个。

然后，去看这个亮点跳动的源代码的时候，发现有一大堆冗长的代码（不用细看，瞄一下即可），

	public class MyOnPageChangeListener implements OnPageChangeListener {
		@Override
		public void onPageSelected(int arg0) {
			switch (arg0) {
				case 0 :
					mPage0.setImageDrawable(getResources().getDrawable(
							R.drawable.page_now));
					mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
					break;
				case 1 :
					mPage1.setImageDrawable(getResources().getDrawable(
							R.drawable.page_now));
					mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));
					mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));
					break;
				case 2 :
					mPage2.setImageDrawable(getResources().getDrawable(
							R.drawable.page_now));
					mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
					mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
					break;
				case 3 :
					mPage3.setImageDrawable(getResources().getDrawable(
							R.drawable.page_now));
					mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
					mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));
					break;
				case 4 :
					mPage4.setImageDrawable(getResources().getDrawable(
							R.drawable.page_now));
					mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
					mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));
					break;
				case 5 :
					mPage5.setImageDrawable(getResources().getDrawable(
							R.drawable.page_now));
					mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
					break;
			}
			currIndex = arg0;
			// animation.setFillAfter(true);// True:图片停在动画结束位置
			// animation.setDuration(300);
			// mPageImg.startAnimation(animation);
		}
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageScrollStateChanged(int arg0) {
		}
	}

用数组的话可以写得更简洁些，同时代码也更加易读。修改后的版本：

	class MyOnPageChangeListner implements 
	  OnPageChangeListener{
		@Override
		public void onPageSelected(int page){
			mPage[page].setImageDrawable(getResources().
					getDrawable(R.drawable.page_now));
			if(page!=0){
				mPage[page-1].setImageDrawable(getResources().
						getDrawable(R.drawable.page));
			}
			if(page!=4){
				mPage[page+1].setImageDrawable(getResources().
						getDrawable(R.drawable.page));
			}
		}
		
		@Override
		public void onPageScrolled(int arg0,float arg1,
				int arg2){ 
		}
		@Override
		public void onPageScrollStateChanged(int arg0){ 
		}
	}

这是一个页面变化的监听器。显然，来到某一页的话，就把那一页对应的点设置为亮点。暗点怎么设置呢？如果来到第一页，那么只可能是第二页来到第一页的，则只用第二个点的图片设为暗点。同理，来到最后一页的话，只能是倒数第二页滑到最后一页的，只用把倒数第二页设置为暗点。而其它页的话，则把左右两点设置为暗点即可。

之前的话，开个ImageView的数组，

App第一次启动时翻页介绍的简洁实现

其它的，设置ViewPager的话，先把所有布局文件加载到一个列表里面，

App第一次启动时翻页介绍的简洁实现

之后设置左右滑动的监听器，

App第一次启动时翻页介绍的简洁实现

MainActivity.java，

package lzw.model;

import java.util.ArrayList;

import lzw.chronometertest.R;
import android.app.Activity;
import android.os.Bundle;
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.widget.ImageView;

public class MainActivity extends Activity {
	ViewPager pager;
	ImageView[] mPage=new ImageView[5];
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		pager=(ViewPager)findViewById(R.id.viewPager);
		pager.setOnPageChangeListener(new MyOnPageChangeListner());
		
		LayoutInflater mLi=LayoutInflater.from(this);
		final ArrayList<View> views=new ArrayList<View>();
		for(int i=0;i<5;i++){
			String name="what"+i;
			views.add(mLi.inflate(getResources().getIdentifier(name,
				"layout",getPackageName()),null));
		}
	 
		mPage[0]=(ImageView)findViewById(R.id.page0);
		mPage[1]=(ImageView)findViewById(R.id.page1);
		mPage[2]=(ImageView)findViewById(R.id.page2);
		mPage[3]=(ImageView)findViewById(R.id.page3);
		mPage[4]=(ImageView)findViewById(R.id.page4);
		
		PagerAdapter adapter=new PagerAdapter(){
			@Override
			public boolean isViewFromObject(View arg0,Object arg1){
				return arg0==arg1;
			}
			
			@Override
			public int getCount(){
				return views.size();
			}
			
			@Override
			public void destroyItem(View container,int position,Object object){
				((ViewPager)container).removeView(views.get(position));
			}
			
			@Override
			public Object instantiateItem(View container,int position){
				((ViewPager)container).addView(views.get(position));
				return views.get(position);
			}
		};
		
		pager.setAdapter(adapter);
		
	}
	
	class MyOnPageChangeListner implements 
	  OnPageChangeListener{
		@Override
		public void onPageSelected(int page){
			mPage[page].setImageDrawable(getResources().
					getDrawable(R.drawable.page_now));
			if(page!=0){
				mPage[page-1].setImageDrawable(getResources().
						getDrawable(R.drawable.page));
			}
			if(page!=4){
				mPage[page+1].setImageDrawable(getResources().
						getDrawable(R.drawable.page));
			}
		}
		
		@Override
		public void onPageScrolled(int arg0,float arg1,
				int arg2){ 
		}
		@Override
		public void onPageScrollStateChanged(int arg0){ 
		}
	}
	
}

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/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"> 
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_marginBottom="30dp" >

        <ImageView
            android:id="@+id/page0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:src="@drawable/page_now" />

        <ImageView
            android:id="@+id/page1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" />
        
        
        <ImageView
            android:id="@+id/page2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" />
        
        
        <ImageView
            android:id="@+id/page3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" /> 
            
        
        <ImageView
            android:id="@+id/page4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/page" /> 

     </LinearLayout>
    
</FrameLayout>

项目源码

App第一次启动时翻页介绍的简洁实现

码农公寓

相关文章