Android开发：Android使用ViewPager实现启动APP时向导界面 引导页

目录

引言

效果图

一、Activity页

二、layout布局页

 三、viewpager适配器代码

四、资源文件

结束语

---

 

 

引言

最近项目中需要引入滑动引导页，于是，在网上查了一下资料，然后进行了具体的实现。

 

效果图

    

 

首先写一个layout布局来展示引导页内容，在布局中放入一个viewpager控件。

具体实现代码如下

一、Activity页

/**
 * Created by  wsl
 * on 2019/6/18 12:52
 */
public class EZActivity extends BaseActivity {
    private ViewPager viewpager;
    private Button btnSubmit;
    private ImageView ivPoint1, ivPoint2, ivPoint3, ivPoint4;
    private List<ImageView> guidePointList;
   
    private Animation animation01 = null;

    /**
     * 启动activity
     *
     * @param context 上下文
     */
    public static void startActivity(Context context) {
        Intent intent = new Intent();
        intent.setClass(context, EZActivity.class);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        //设置是否显示标题栏
        setShowTitle(true);
        //设置是否显示状态栏
        setShowStatusBar(true);
        //是否允许屏幕旋转
        setAllowScreenRoate(true);
        //以上设置一定要在 super.onCreate(savedInstanceState) 方法之前设置
        super.onCreate(savedInstanceState);

    }

    @Override
    protected int initLayout() {
        //初始化布局
        return R.layout.activity_ez_layout;
    }

    @Override
    protected void initView() {
        guidePointList = new ArrayList<>();
        viewpager = findViewById(R.id.viewpager);
        btnSubmit = findViewById(R.id.btnSubmit);
        ivPoint1 = findViewById(R.id.ivPoint1);
        ivPoint2 = findViewById(R.id.ivPoint2);
        ivPoint3 = findViewById(R.id.ivPoint3);
        ivPoint4 = findViewById(R.id.ivPoint4);

        addGuidePointToList();
        animation01 = AnimationUtils.loadAnimation(context, R.anim.animation_guide_alpha_0_1);
    }

    /**
     * 添加引导点 到 list
     */
    private void addGuidePointToList() {
        guidePointList.add(ivPoint1);
        guidePointList.add(ivPoint2);
        guidePointList.add(ivPoint3);
        guidePointList.add(ivPoint4);
    }

    @Override
    protected void initData() {
        final List<Integer> list = new ArrayList<>();
        list.add(R.drawable.book_1);
        list.add(R.drawable.book_2);
        list.add(R.drawable.book_3);
        list.add(R.drawable.book_4);
        final GuideAdapter guideAdapter = new GuideAdapter(context, list);
        viewpager.setAdapter(guideAdapter);
        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (position == list.size() - 1) {
                    btnSubmit.setVisibility(View.VISIBLE);
                    if (animation01 != null) {
                        btnSubmit.setAnimation(animation01);
                        animation01.start();
                    }
                } else {
                    btnSubmit.setVisibility(View.GONE);
                }

                setGuidePoint(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
//        viewpager.setPageTransformer(false, new DepthPageTransformer());

      
    }

    /**
     * 设置引导点  的状态 （选中、未选中）
     *
     * @param position 当前滑动到的位置
     */
    private void setGuidePoint(int position) {
        for (int i = 0; i < guidePointList.size(); i++) {
            if (position == i) {
                guidePointList.get(i).setImageResource(R.drawable.shape_guide_point_big);
            } else {
                guidePointList.get(i).setImageResource(R.drawable.shape_guide_point_small);
            }
        }
    }

    /**
     * 点击事件
     */
    public OnSingleClickListener onSingleClickListener = new OnSingleClickListener() {
        @Override
        public void onSingleClick(View view) {
            switch (view.getId()) {
                default:
                    break;
            }
        }
    };



    @Override
    protected void onDestroy() {
        super.onDestroy();

    }
}

 

二、layout布局页

 

<?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="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:orientation="vertical">

        <Button
            android:id="@+id/btnSubmit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="进入主页"
            android:visibility="gone" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="8dp"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/ivPoint1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/margin_5"
                android:src="@drawable/shape_guide_point_big" />

            <ImageView
                android:id="@+id/ivPoint2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/margin_5"
                android:src="@drawable/shape_guide_point_small" />

            <ImageView
                android:id="@+id/ivPoint3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/margin_5"
                android:src="@drawable/shape_guide_point_small" />

            <ImageView
                android:id="@+id/ivPoint4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/margin_5"
                android:src="@drawable/shape_guide_point_small" />
        </LinearLayout>

    </LinearLayout>

   
</FrameLayout>

 

 三、viewpager适配器代码

/**
 * Created by  wsl
 * on 2019/9/4 16:35
 */
public class GuideAdapter extends PagerAdapter {
    private List<Integer> list;
    private Context context;

    public GuideAdapter(Context context, List<Integer> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        imageView.setImageResource(list.get(position));
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }
}

 

 

四、资源文件

 animation_guide_alpha_0_1.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="1000"
        android:fromAlpha="0"
        android:toAlpha="1" />
</set>

shape_guide_point_big.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<size
    android:width="8dp"
    android:height="8dp" />
<corners android:radius="4dp" />
</shape>

 

shape_guide_point_small.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <size
        android:width="5dp"
        android:height="5dp" />
    <corners android:radius="2.5dp" />
</shape>

 

结束语

BaseActivity在之前的文章中有详细描述，如有需要，请查看之前的文章。