AndroidUI 引导页面的使用

一个应用程序都少不了欢迎页面和引导页面，本文主要讲如何制作一个引页面；

首页所有的目录结构：



新建Welcome引导页面和Activity:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >

<ImageView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/welcome_android"/>
</RelativeLayout>

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;

//进入APP后的第一个欢迎页面
//欢迎页面实现如果是首次运行APP的话，将页面延时2秒后，跳转到到引导页，如果不是第一次加载的话
//则跳到主页面
public class Welcome extends Activity {

private Boolean isFirstIn=false;
private static final int GO_HOME=1000;
private static final int GO_GUIDE=1001;
private static final int TIME=2000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.welcome);
init();
}

private void init(){
SharedPreferences shared=getSharedPreferences("rock", MODE_PRIVATE);
//getBoolean 第二个参数defValue:如果Key在shared中不存在的话返回defValue
isFirstIn=shared.getBoolean("isFirstIn", true);
if(!isFirstIn){
// 延时2秒发送消息
myHandelr.sendEmptyMessageDelayed(GO_HOME, TIME);
}else{
//首次加载，保存加载记录并跳转到引导页
myHandelr.sendEmptyMessageDelayed(GO_GUIDE, TIME);
Editor editor=shared.edit();
editor.putBoolean("isFirstIn", false);
editor.commit();
}

}

//消息的处理者，handler负责将需要传递的信息封装成Message，通过调用handler对象的obtainMessage()来实现；
//将消息传递给Looper，这是通过handler对象的sendMessage()来实现的
private Handler myHandelr=new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case GO_HOME:
goHome();
break;
case GO_GUIDE:
goGuide();
break;
}
}
};
private void goGuide() {
Intent i=new Intent(Welcome.this,Guide.class);
startActivity(i);
finish();
}
private void goHome() {
Intent i=new Intent(Welcome.this,MainActivity.class);
startActivity(i);
finish();
}
}

然后是引导页面和引导页面的activity:
guide.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >

<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/viewPager1"
android:background="#00000000">
</android.support.v4.view.ViewPager>
<!-- 引导页面导航按钮 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_alignParentBottom="true">

<ImageView android:id="@+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/login_point_selected"/>
<ImageView android:id="@+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/login_point"/>
<ImageView android:id="@+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/login_point"/>
</LinearLayout>
</RelativeLayout>

one.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >

<ImageView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/guide_1"/>
</LinearLayout>


two.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >

<ImageView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/guide_2"/>

</RelativeLayout>


trhee.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >

<ImageView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/guide_3"/>

<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<!-- 进入主页面按钮 -->
<Button android:id="@+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开始"/>
</LinearLayout>
</RelativeLayout>


Guide acitvity:
import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Intent;
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.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

//引导页面
//1.实现引导页面三张引导图通过左右滑动屏幕可以实现切换
//2.在引导页面下面添加导航条，滑动过程中，让当前页面的导航条处于选中状态
//3.在引导页面的最后一个页面添加进入主页面按钮，点击按钮进入主页面
public class Guide extends Activity implements OnPageChangeListener {

private List<View> views;
private ViewPagerAdapter vpa;
private ViewPager vp;
private ImageView[] ivs;
private int[] ids=new int[]{R.id.iv1,R.id.iv2,R.id.iv3};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
initViews();
initIvs();
}

private void initViews(){
//通过LayoutInflater 加载三个引导页面
LayoutInflater inflater=LayoutInflater.from(this);
views=new ArrayList<View>();
views.add(inflater.inflate(R.layout.one, null));
views.add(inflater.inflate(R.layout.two, null));
views.add(inflater.inflate(R.layout.three, null));

vpa=new ViewPagerAdapter(views, this);
vp=(ViewPager)findViewById(R.id.viewPager1);
vp.setAdapter(vpa);
//为ViewPager设置监听事件
vp.setOnPageChangeListener(this);
//点击第三个页面的开始按钮，进入主页面
Button btn=(Button) views.get(2).findViewById(R.id.btnStart);
btn.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
Intent i=new Intent(Guide.this,MainActivity.class);
startActivity(i);
finish();
}
});
}
// 加载导航条的ImageView
private void initIvs(){
ivs=new ImageView[views.size()];
for(int i=0;i<views.size();i++){
ivs[i]=(ImageView)findViewById(ids[i]);
}
}

@Override
public void onPageScrollStateChanged(int arg0) {
}

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

// ViewPager监听事件，当ViewPager页面改变的时候，设置当前导航条的状态为选中状态
@Override
public void onPageSelected(int arg0) {
for(int i=0;i<ids.length;i++){
if(arg0==i){
ivs[i].setImageResource(R.drawable.login_point_selected);
}else{
ivs[i].setImageResource(R.drawable.login_point);
}
}
}

}


ViewPagerAdapter 容器：
import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
// 继承自PagerAdapter，并且实现添加引导页和移除引导页的方法
public class ViewPagerAdapter extends PagerAdapter{

private List<View> views;
private Context context;

public ViewPagerAdapter(List<View> views,Context context){
this.views=views;
this.context=context;
}

@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(views.get(position));
return views.get(position);
}

@Override
public void destroyItem(View container, int position, Object object) {

((ViewPager)container).removeView(views.get(position));
}

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

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0==arg1);
}

}

最后设置AndroidManifest.xml：
<activity
android:name="com.example.lo12viewpager2.MainActivity"
android:label="@string/app_name" >
</activity>
<activity
android:name="com.example.lo12viewpager2.Guide"
android:label="@string/app_name" >
</activity>
<activity
android:name="com.example.lo12viewpager2.Welcome"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

效果：