Android ViewPager实现引导页
一、效果图：
二、Layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.GuideActivity">
<!--引导页ViewPager-->
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<!--马上体验按钮-->
<Button
android:id="@+id/btn_guide_start"
android:layout_width="140dp"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:layout_above="@+id/ll_guide_dot"
android:text="@string/common_exprience_now"
android:background="@drawable/shape_btn_guide_bg"
android:textSize="@dimen/font16"
android:textStyle="bold"
android:textColor="@color/calendar_color_white"
android:visibility="gone" />
<!--引导页小圆点-->
<LinearLayout
android:id="@+id/ll_guide_dot"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24.0dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<ImageView
android:contentDescription="@string/img_content_description"
android:id="@+id/iv_guide_dot1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="15.0dip"
android:src="@mipmap/ic_common_point_white" />
<ImageView
android:contentDescription="@string/img_content_description"
android:id="@+id/iv_guide_dot2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="15.0dip"
android:src="@mipmap/ic_common_point_gray" />
<ImageView
android:contentDescription="@string/img_content_description"
android:id="@+id/iv_guide_dot3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="15.0dip"
android:src="@mipmap/ic_common_point_gray" />
</LinearLayout>
</RelativeLayout>
Activity.java
public class GuideActivity extends BaseActivity implements View.OnClickListener {
//实例化图片资源
private int []imageIdArray = new int[]{R.mipmap.ic_common_index1,R.mipmap.ic_common_index2,R.mipmap.ic_common_index3};//图片资源的数组
//底部小店图片
private ImageView[] dots ;
// 图片列表数据源
private List<View> viewList = new ArrayList<>();
// 小圆点id
private int[] ids={R.id.iv_guide_dot1,R.id.iv_guide_dot2,R.id.iv_guide_dot3};
// 立即体验按钮
private Button btn_guide_start;
// 是否是第一次安装该应用
private boolean isFirst = true;
// sp
private SharedPreferences sp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_index);
// 加载页面
loadPage();
// 初始化View
initView();
//加载ViewPager
initViewPager();
//初始化底部小点
initDots();
}
/**
* 是否加载欢迎页
*/
private void loadPage() {
Intent intent = new Intent();
sp = getSharedPreferences(Constant.SP_FILE_NAME, Context.MODE_PRIVATE);
if(!sp.getBoolean("isFirst", true)){//如果是第一次加载，则不走下面的步骤
intent.setClass(context,WelcomeActivity.class);
startActivity(intent);
}
}
/**
* 初始化View
*/
private void initView() {
btn_guide_start = findViewById(R.id.btn_guide_start);
btn_guide_start.setOnClickListener(this);
}
/**
* 加载图片ViewPager
*/
private void initViewPager() {
ViewPager vp_guide = findViewById(R.id.vp_guide);
//获取一个Layout参数，设置为全屏
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
//循环创建View并加入到集合中
for (int anImageIdArray : imageIdArray) {
//new ImageView并设置全屏和图片资源
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(params);
imageView.setBackgroundResource(anImageIdArray);
//将ImageView加入到集合中
viewList.add(imageView);
}
//View集合初始化好后，设置Adapter
vp_guide.setAdapter(new GuidePageAdapter(viewList));
//设置滑动监听
vp_guide.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 设置底部小点选中状态
for(int i = 0;i<ids.length;i ++){
if(position==i){
dots[i].setImageResource(R.mipmap.ic_common_point_white);
}else {
dots[i].setImageResource(R.mipmap.ic_common_point_gray);
}
}
//判断是否是最后一页，若是则显示按钮
if (position == imageIdArray.length - 1){
btn_guide_start.setVisibility(View.VISIBLE);
}else {
btn_guide_start.setVisibility(View.GONE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 初始化小圆点的id
*/
private void initDots() { //对点的图片进行初始化（找控件）
dots = new ImageView[viewList.size()];
for (int i=0;i< viewList.size();i++){
dots[i]=findViewById(ids[i]);
}
}
/**
* 马上体验的点击事件
*/
@Override
public void onClick(View view) {
if(sp.getBoolean("isFirst", isFirst)){
// 首次加载
isFirst = false;
Intent intent = new Intent();
sp.edit().putBoolean("isFirst", isFirst).apply();
intent.setClass(context,ChooseLoginTypeActivity.class);
startActivity(intent);
}
}
}
Adapter：
public class GuidePageAdapter extends PagerAdapter {
private List<View> viewList;
public GuidePageAdapter(List<View> viewList) {
this.viewList = viewList;
}
/**
*/
@Override
public int getCount() {
if (viewList != null){
return viewList.size();
}
return 0;
}
/**
*/
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
/**
* 初始化position位置的界面
*/
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(viewList.get(position));
}
}