Android开发-欢迎引导滑动页制作

最新推荐文章于 2022-06-17 10:56:49 发布

GYongJia

最新推荐文章于 2022-06-17 10:56:49 发布

阅读量1.4k

点赞数 3

分类专栏： Android 文章标签： Android

本文链接：https://blog.csdn.net/GYongJia/article/details/89499996

版权

Android 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在设计一个APP的开始通常给APP设计一个欢迎页，能有良好的用户体验，所以写一篇博客来记录一下用ViewPager制作欢迎页的过程，以后有效率的提高再来修改。

在这里插入图片描述

功能：

如果是第一次进入应用的话，就弹出引导页，所以我们需要用到SharedPreferences来保存应用的配置。

如果不是第一次进入应用的话，则直接进入主活动，同样也是靠SharedPreferences来实现判断。

首先是一个持续一秒左右的欢迎页面，之后进入引导页面，在引导页面的最后一页要设置一个进入主活动的提示按钮。

实现过程：

1.首先是一个新下载的APP刚进去会有一个持续一秒左右的页面，之后进入可以滑动的欢迎引导页。

新建一个WelActivity的空活动，布局文件改为activity_wel 里面的内容就可以设置简单的欢迎页。这里我们就只是把布局背景background换成一张图片。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_start_bg"
    android:orientation="vertical">
</LinearLayout>

WelActivity的代码如下：

public class WelActivity extends Activity {

    private SharedPreferences mSharedPreferences;
    private static final int GO_HOME = 1; //进入主活动
    private static final int GO_GUIDE = 2;	//进入引导页
    private static final int ENTEER_DURATION = 1000;  //延时一秒
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case GO_GUIDE:
                    startGuideActivity();
                    break;
                case GO_HOME:
                    startHomeActivitity();
                    break;
                default:
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spalsh);

        mSharedPreferences = getSharedPreferences("config",MODE_PRIVATE);
        init();

    }

    private void init() {
        boolean isFirstIn = mSharedPreferences.getBoolean("mIsFirstIn",true);
        if(isFirstIn){
            mHandler.sendEmptyMessageDelayed(GO_GUIDE,ENTEER_DURATION);
        }else{
            mHandler.sendEmptyMessageDelayed(GO_HOME,ENTEER_DURATION);
        }
    }

    private void startHomeActivitity(){
        Intent intent = new Intent(SpalshActivity.this,LoginActivity.class);
        startActivity(intent);
        finish();
    }
    private void startGuideActivity(){
        Intent intent = new Intent(SpalshActivity.this,GuideActivity.class);
        startActivity(intent);
        finish();
    }

}

2.下来就是制作欢迎页了，欢饮页分为两部分一部分是下面的小圆点用来提示我们滑到第几页，另一部分就是页面主体了。

（1）首先来制作小圆点，小圆点的png文件就不给大家了，大家可以打开画图工具自己画一个保存到自己工程目录drawable下。

在drawable目录下新建一个dot.xml文件：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/white_dot" android:state_enabled="true"/>
    <item android:drawable="@drawable/gray_dot"  android:state_enabled="false"/>

</selector>

这里设置选中是白点图片，没选中是灰点图片。

（2）新建GuideActivity活动，在layout目录下修改activity_guide文件代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="24dp"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:id="@+id/ll_dots_layout">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot"
            android:padding="15dp"
            android:layout_gravity="center_horizontal"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot"
            android:padding="15dp"
            android:layout_gravity="center_vertical"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot"
            android:padding="15dp"
            android:layout_gravity="center_horizontal"/>

    </LinearLayout>



</RelativeLayout>

（3）接着在layout目录下建立三个xml文件用来显示滑动页三页图片的内容。

建立guide1_layout.xml文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide1"
        android:scaleType="centerCrop"/>


</RelativeLayout>

建立guide2_layout.xml文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide2"
        android:scaleType="centerCrop"/>


</RelativeLayout>

建立guide3_layout.xml文件：

<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"
    android:background="@drawable/guide3">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

    <ImageView
        android:id="@+id/iv_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/ic_start"
        android:scaleType="centerCrop"/>


</RelativeLayout>

注意第三个页面也就是最后一个页面要设置一个按钮来提示用户进入主活动，这里就简单的设置了一张图片来监听用户单击操作。

最后修改GuideActivity中的代码：

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private List<View> mviewList;
    private ViewPager mViewPager;    //滑动页
    private ImageView[] mDotList;
    private int mLastPosition; //记录选中页面的位置

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initView();
        initViewPager();
        initDots();
    }

    //接口ViewPager.OnPageChangeListener需要重写的三个方法
    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }
    @Override
    public void onPageSelected(int i) { //当滚动页面为当前页面时
        setCurrentDotPosition(i);
    }
    @Override
    public void onPageScrollStateChanged(int i) { //当页面滑动时的操作

    }
    private void setCurrentDotPosition(int i) {  //改变下面小圆点的状态
        mDotList[i].setEnabled(true);
        mDotList[mLastPosition].setEnabled(false);
        mLastPosition = i;
    }


    class MyPagerAdapter extends PagerAdapter {  //滑动页的适配器

        private List<View> mImageViewList;
        private Context mContext;

        MyPagerAdapter(List<View> list, Context context) {
            super();
            mImageViewList = list;
            mContext = context;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            if (mImageViewList != null) {
                if (mImageViewList.size() > 0) {
                    container.addView(mImageViewList.get(position));
                    if(position == mImageViewList.size()-1){  //当单击了第三个引导页的立即体验跳到home页
                        ImageView imageView = (ImageView)mImageViewList.get(position).findViewById(R.id.iv_start);
                        imageView.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                startHomeActivity();
                                setGuided(); //设置配置文件下次进入程序不用进入引导页
                            }
                        });
                    }
                    return mImageViewList.get(position);
                }
            }
            return null;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            if (mImageViewList != null) {
                if (mImageViewList.size() > 0) {
                    container.removeView(mImageViewList.get(position));
                }
            }
        }

        @Override
        public int getCount() {
            if (mImageViewList != null) {
                return mImageViewList.size();
            }
            return 0;
        }

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

    private void initView() { //给引导页面布局初始化
        LayoutInflater inflater = LayoutInflater.from(this);
        mviewList = new ArrayList<>();
        mviewList.add(inflater.inflate(R.layout.guide1_layout, null));
        mviewList.add(inflater.inflate(R.layout.guide2_layout, null));
        mviewList.add(inflater.inflate(R.layout.guide3_layout, null));
    }

    private void initViewPager() {   //初始化引导页面
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        MyPagerAdapter adapter = new MyPagerAdapter(mviewList, this);
        mViewPager.setAdapter(adapter);
        mViewPager.addOnPageChangeListener(this);
    }

    private void initDots() {  //初始化下面三个小点
        LinearLayout dotsLayout = (LinearLayout) findViewById(R.id.ll_dots_layout);
        mDotList = new ImageView[mviewList.size()];
        for (int i = 0; i < mviewList.size(); i++) {
            mDotList[i] = (ImageView) dotsLayout.getChildAt(i);
            mDotList[i].setEnabled(false);
        }
        mLastPosition = 0;  //设置最后一次页面为第一页
        mDotList[0].setEnabled(true);  //设置默认第一页为选中页
    }

    private void startHomeActivity(){
        Intent intent = new Intent(GuideActivity.this,MainActivity.class);
        startActivity(intent);
        finish();
    }

    private void setGuided(){
        SharedPreferences.Editor sp = getSharedPreferences("config",MODE_PRIVATE).edit();
        sp.putBoolean("mIsFirstIn",false);
        sp.apply();
    }

}

最后别忘了修改Manifest中把主活动设为WelActivity

功能完成，最后附上github源码github代码

GYongJia

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
Android开发-欢迎引导滑动页制作

在设计一个APP的开始通常给APP设计一个欢迎页，能有良好的用户体验，所以写一篇博客来记录一下用ViewPager制作欢迎页的过程，以后有效率的提高再来修改。功能：如果是第一次进入应用的话，就弹出引导页，所以我们需要用到SharedPreferences来保存应用的配置。如果不是第一次进入应用的话，则直接进入主活动，同样也是靠SharedPreferences来实现判断。首先是一个持续...
复制链接

扫一扫