用ViewPager实现一个程序引导界面
下面使用ViewPager来实现一个程序引导的demo：
一般来说，引导界面是出现第一次运行时出现的，之后不会再出现。所以需要记录是否是第一次使用程序，办法有很多，最容易想到的就是使用SharedPreferences来保存。步骤如下：
1、程序进入欢迎界面，SplashActivity，在这里读取SharedPreferences里面的变量，先设置为true。进入引导界面，然后设置为false。
2、之后每次进入欢迎界面读取SharedPreferences里面的变量，因为是false，所以不会运行引导界面了。
代码如下：
SplashActivity.java,欢迎界面。
import android.app.Activity; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bundle; import android.os.Handler; import android.os.Message; public class SplashActivity extends Activity { boolean isFirstIn = false; private static final int GO_HOME = 1000; private static final int GO_GUIDE = 1001; // 延迟3秒 private static final long SPLASH_DELAY_MILLIS = 3000; private static final String SHAREDPREFERENCES_NAME = "first_pref"; /** * Handler:跳转到不同界面 */ private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case GO_HOME: goHome(); break; case GO_GUIDE: goGuide(); break; } super.handleMessage(msg); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.splash); init(); } private void init() { // 读取SharedPreferences中需要的数据 // 使用SharedPreferences来记录程序的使用次数 SharedPreferences preferences = getSharedPreferences( SHAREDPREFERENCES_NAME, MODE_PRIVATE); // 取得相应的值，如果没有该值，说明还未写入，用true作为默认值 isFirstIn = preferences.getBoolean("isFirstIn", true); // 判断程序与第几次运行，如果是第一次运行则跳转到引导界面，否则跳转到主界面 if (!isFirstIn) { // 使用Handler的postDelayed方法，3秒后执行跳转到MainActivity mHandler.sendEmptyMessageDelayed(GO_HOME, SPLASH_DELAY_MILLIS); } else { mHandler.sendEmptyMessageDelayed(GO_GUIDE, SPLASH_DELAY_MILLIS); } } private void goHome() { Intent intent = new Intent(SplashActivity.this, MainActivity.class); SplashActivity.this.startActivity(intent); SplashActivity.this.finish(); } private void goGuide() { Intent intent = new Intent(SplashActivity.this, GuideActivity.class); SplashActivity.this.startActivity(intent); SplashActivity.this.finish(); } }
GuideActivity.java引导界面：
import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; 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; import android.widget.LinearLayout; import cn.eoe.leigo.splash.adapter.ViewPagerAdapter; public class GuideActivity extends Activity implements OnPageChangeListener { private ViewPager vp; private ViewPagerAdapter vpAdapter; private List<View> views; // 底部小点图片 private ImageView[] dots; // 记录当前选中位置 private int currentIndex; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide); // 初始化页面 initViews(); // 初始化底部小点 initDots(); } private void initViews() { LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); // 初始化引导图片列表 views.add(inflater.inflate(R.layout.what_new_one, null)); views.add(inflater.inflate(R.layout.what_new_two, null)); views.add(inflater.inflate(R.layout.what_new_three, null)); views.add(inflater.inflate(R.layout.what_new_four, null)); // 初始化Adapter vpAdapter = new ViewPagerAdapter(views, this); vp = (ViewPager) findViewById(R.id.viewpager); vp.setAdapter(vpAdapter); // 绑定回调 vp.setOnPageChangeListener(this); } private void initDots() { LinearLayout ll = (LinearLayout) findViewById(R.id.ll); dots = new ImageView[views.size()]; // 循环取得小点图片 for (int i = 0; i < views.size(); i++) { dots[i] = (ImageView) ll.getChildAt(i); dots[i].setEnabled(true);// 都设为灰色 } currentIndex = 0; dots[currentIndex].setEnabled(false);// 设置为白色，即选中状态 } private void setCurrentDot(int position) { if (position < 0 || position > views.size() - 1 || currentIndex == position) { return; } dots[position].setEnabled(false); dots[currentIndex].setEnabled(true); currentIndex = position; } // 当滑动状态改变时调用 @Override public void onPageScrollStateChanged(int arg0) { } // 当当前页面被滑动时调用 @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } // 当新的页面被选中时调用 @Override public void onPageSelected(int arg0) { // 设置底部小点选中状态 setCurrentDot(arg0); } }
ViewPagerAdapter.java。ViewPager的适配器：
import java.util.List; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.content.SharedPreferences.Editor; import android.os.Parcelable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageView; import cn.eoe.leigo.splash.MainActivity; import cn.eoe.leigo.splash.R; /** */ public class ViewPagerAdapter extends PagerAdapter { // 界面列表 private List<View> views; private Activity activity; private static final String SHAREDPREFERENCES_NAME = "first_pref"; public ViewPagerAdapter(List<View> views, Activity activity) { this.views = views; this.activity = activity; } // 销毁arg1位置的界面 @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(views.get(arg1)); } @Override public void finishUpdate(View arg0) { } // 获得当前界面数 @Override public int getCount() { if (views != null) { return views.size(); } return 0; } // 初始化arg1位置的界面 @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(views.get(arg1), 0); if (arg1 == views.size() - 1) { ImageView mStartWeiboImageButton = (ImageView) arg0 .findViewById(R.id.iv_start_weibo); mStartWeiboImageButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 设置已经引导 setGuided(); goHome(); } }); } return views.get(arg1); } private void goHome() { // 跳转 Intent intent = new Intent(activity, MainActivity.class); activity.startActivity(intent); activity.finish(); } /** * * method desc：设置已经引导过了，下次启动不用再次引导 */ private void setGuided() { SharedPreferences preferences = activity.getSharedPreferences( SHAREDPREFERENCES_NAME, Context.MODE_PRIVATE); Editor editor = preferences.edit(); // 存入数据 editor.putBoolean("isFirstIn", false); // 提交修改 editor.commit(); } // 判断是否由对象生成界面 @Override public boolean isViewFromObject(View arg0, Object arg1) { return (arg0 == arg1); } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { } @Override public Parcelable saveState() { return null; } @Override public void startUpdate(View arg0) { } }
至于MainActivity随便了。
主布局文件activity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24.0dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/dot" />
</LinearLayout>
</RelativeLayout>
splash.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="@drawable/splash"
android:orientation="vertical" >
</LinearLayout>
view1.xml
view2.xml
view3.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide1" />
</RelativeLayout>
view4.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="false"
android:background="@drawable/guide4"
android:focusable="true"
android:scaleType="centerCrop" />
<ImageView
android:id="@+id/iv_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="108dp"
android:background="@drawable/button"
android:focusable="true" />
</RelativeLayout>
drawable文件夹下新建dot.xml：
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/page_indicator_unfocused" android:state_enabled="true"/>
<item android:drawable="@drawable/page_indicator_focused" android:state_enabled="false"/>
</selector>
效果如下：
