用 ViewPager 实现欢迎引导页面

ViewPager 是 Android3.0 之后提供的新特性，需要 android-support-v4.jar 这个包的支持，来自 google 提供的一个附加包。

ViewPager 主要用来组织一组数据，并且通过左右滑动的方式来展示。

现在的大多数应用都会有一个欢迎引导页面，如图所示，通过左右滑动来告知用户一些功能特性。

下面是一个简单的广告页面，主要是让该 Activity 停留 1500 毫秒以后打开下一个界面。

public class StartupActivity extends AppCompatActivity {

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 全屏去掉信息栏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_startup);
}

@Override
protected void onResume() {
super.onResume();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
openActivity();
}
}, 1500);
}

private void openActivity() {
Intent intent = null;
// 从 SharedPreferences 中获取数据，判断是否第一次打开应用
String isFirstOpen = Global.get(this, Const.KEY_IS_FIRST_OPEN);
if (isFirstOpen != null && isFirstOpen.length() != 0) {
// 判断 SharedPreferences 是否存在 token
if (Global.isGuest(this)) {
intent = new Intent(this, LoginActivity.class);
} else {
intent = new Intent(this, MainActivity.class);
}
} else {
intent = new Intent(this, WelcomeActivity.class);
}
startActivity(intent);
// Activity 的切换动画
overridePendingTransition(R.anim.remain_in_place, R.anim.remain_in_place);
finish();
}
}

其中 R.anim.remain_in_place 的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">

<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%"/>

</set>

WelcomActivity 实现OnClickListener, OnPageChangeListener接口，监听小点的点击事件以及viewPager的滑动

public class WelcomeActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {

@Bind(R.id.welcome_view_pager)
ViewPager viewPager;
@Bind(R.id.welcome_slide_dot_holder)
LinearLayout slideDotHolder;

private WelcomeViewPagerAdapter viewPagerAdapter;
private List<View> welcomes;
private int currentIndex;
private ImageView[] dots;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
init();
initView();
initDatabase();
}

public void init() {
// 去掉信息栏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_welcome);
ButterKnife.bind(this);
}

@Override
protected void onResume() {
super.onResume();
Global.set(this, Const.KEY_IS_FIRST_OPEN, "yes");
}

private void initView() {
LayoutInflater inflater = LayoutInflater.from(this);

welcomes = new ArrayList<View>();

welcomes.add(inflater.inflate(R.layout.view_welcome_1, null));
welcomes.add(inflater.inflate(R.layout.view_welcome_2, null));
welcomes.add(inflater.inflate(R.layout.view_welcome_3, null));

viewPagerAdapter = new WelcomeViewPagerAdapter(this, welcomes);

viewPager.setAdapter(viewPagerAdapter);
viewPager.addOnPageChangeListener(this);

currentIndex = 0;
}

public void goLogin(View view) {
IntentManager.goLogin(this);
finish();
}

@Override
public void onPageScrolled(int i, float v, int i2) {

}

@Override
public void onPageSelected(int i) {
if (i < 0 || i > slideDotHolder.getChildCount() - 1 || currentIndex == i) {
return;
}
setDots(i);
currentIndex = i;
}

@Override
public void onPageScrollStateChanged(int i) {

}

@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
setCurView(position);
}

/**
* 设置当前的引导页
*/
private void setCurView(int position) {
if (position < 0 || position >= welcomes.size()) {
return;
}
viewPager.setCurrentItem(position);
}

private void setDots(int position) {
dots = new ImageView[welcomes.size()];

// 循环取得小点图片
for (int i = 0; i < welcomes.size(); i++) {
dots[i] = (ImageView) slideDotHolder.getChildAt(i);
dots[i].setBackgroundResource(R.drawable.slide_dot_off);
dots[i].setOnClickListener(this);
dots[i].setTag(i);//设置位置tag，方便取出与当前位置对应
}

ImageView dot = dots[position];
dot.setBackgroundResource(R.drawable.slide_dot_on);
}

@Override
public void onBackPressed() {
finish();
}
}

其中 R.layout.view_welcome_3.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:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/welcome_3"
android:scaleType="centerCrop"/>

<TextView
android:id="@+id/go_login"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:clickable="true"
android:gravity="center"
android:onClick="goLogin"
android:text="立即进入>>"
android:textColor="#111111"/>

</RelativeLayout>

public class WelcomeViewPagerAdapter extends PagerAdapter {
Context context;
List<View> viewList;

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

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

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
try {
container.removeView(viewList.get(position));
} catch (Exception e) {
e.printStackTrace();
}
}
}

程序清单：activity_welcome.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:background="#f1f1f1">

<android.support.v4.view.ViewPager
android:id="@+id/welcome_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
</android.support.v4.view.ViewPager>

<LinearLayout
android:id="@+id/welcome_slide_dot_holder"
android:layout_width="wrap_content"
android:layout_height="8dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:orientation="horizontal">

<ImageView
android:layout_width="8dp"
android:layout_height="8dp"
android:background="@drawable/slide_dot_on"
android:clickable="true"/>

<ImageView
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="10dp"
android:background="@drawable/slide_dot_off"
android:clickable="true"/>

<ImageView
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_marginLeft="10dp"
android:background="@drawable/slide_dot_off"
android:clickable="true"/>
</LinearLayout>

</RelativeLayout>

其中 slide_dot_off 的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="@color/black"/>

<size android:width="8dp" android:height="8dp"/>

</shape>