孙孙啊i之项目实战(三) 引导页

最新推荐文章于 2024-07-25 19:04:18 发布

小志啊i

最新推荐文章于 2024-07-25 19:04:18 发布

阅读量371

点赞数

分类专栏：项目实战文章标签： android 引导页

本文链接：https://blog.csdn.net/qq_30694991/article/details/51509283

版权

项目实战专栏收录该内容

5 篇文章 0 订阅

订阅专栏

开头语: 每个app刚下载第一次打开的时候。都会一个几张介绍APP功能类型图片。俗称引导页。现在基本不可缺

效果图如下:(像素低，别见怪)

这里写图片描述

废话不多说，现在开始做吧。
首先按照创建一个layout布局.放入一个ViewPager。作为滑动的效果

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 展示页-->
    <android.support.v4.view.ViewPager
        android:id="@id/guide_vg"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 
</RelativeLayout>

接下来在Activity界面创建一个int类型数组，用来存放引导页图片的resId

public class GuideActivity extends BaseActivity
{
    /**
     * 这里存放用来展示引导页的图片
     * 例如这里 我使用了 4张图片
     */ 
    private int[] mImsageResId = 
            new Int[]{
                R.mipmap.bg_guide01,
                R.mipmap.bg_guide02,
                R.mipmap.bg_guide03,
                R.mipmap.bg_guide04,
            };

    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.布局);  //写入刚才的布局
    }
    ....
}

创建几个ImageView来装入刚才写入的图片resId,并把他写入List集合;(因为接下来的ViewPager需要List数组配合)

public class GuideActivity extends BaseActivity
{
    /**
     * 这里存放用来展示引导页的图片
     * 例如这里 我使用了 4张图片
     */ 
    private int[] mImageResIds = 
            new Int[]{
                R.mipmap.bg_guide01,
                R.mipmap.bg_guide02,
                R.mipmap.bg_guide03,
                R.mipmap.bg_guide04,
            };
    /**
     * 用来即将存放ImageView 集合
     */
     private List<ImageView> mImages = new ArrayList<>();


    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.布局);  //写入刚才的布局
        /**
         * 
         */
         initImages();
    }

    /**
     * 初始化图片view
     */
     private void initImages(){
        for(int i = 0;i < mImageResIds;i++){
            //创建一个ImageView
            ImageView imageView = new ImageView(this);
            //写入图片
            imageView.setImageResource(mImageResIds[i]);
            //写入铺满（匹配父容器）
            imageView.settScaleType(ImageView.ScaleType.FIT_XY);
            //添加到数组集合里面
            mImages.add(imageView);
        }
     }
    ....
}

接上下来定义一个类继承PagerAdatper。用于显示引导页.重写他的4个方法分别是getCount() 、 isViewFromObject() 、destoryItem() ，还有 instantiateItem()

public class ImagePagerAdapter extends PagerAdapter{

        /**
         * 返回图片数量
         */
        @Override
        public int getCount() {
            return mImages.size();
        }

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

        /**
         *   一般来说，destroyitem在viewpager移除一个item时调用。
               viewpage一般都会缓冲3个item，
         *  即一开始就会调用3次instantiateItem, 当向右滑动，
               到第3页时，第1页的item会被调用到destroyitem。
         * 注意:如果不重写这方法会报错
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            Log.e("TAG","调用了--->" + position);
            container.removeView(mImages.get(position));
        }

        /**
         * 设置图片布局..
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //铺满父容器
            RelativeLayout.LayoutParams relayoutParams = 
                new RelativeLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, 
                    ViewGroup.LayoutParams.MATCH_PARENT);
            //添加到view中
            container.addView(mImages.get(position), relayoutParams);、
            //返回大小
            return mImages.get(position);
        }
}

回到Acitivity页面上实例ViewPager 并且让他执行刚才适配器.

public class GuideActivity extends BaseActivity
{
    /**
     * 这里存放用来展示引导页的图片
     * 例如这里 我使用了 4张图片
     */ 
    private int[] mImageResIds = 
            new Int[]{
                R.mipmap.bg_guide01,
                R.mipmap.bg_guide02,
                R.mipmap.bg_guide03,
                R.mipmap.bg_guide04,
            };
    /**
     * 用来即将存放ImageView 集合
     */
     private List<ImageView> mImages = new ArrayList<>();

    /**
     *  引导页显示
     */
    ViewPager mViewPager;


    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.布局);  //写入刚才的布局
        /**
         * 
         */
         initImages();
         viewPager = (ViewPager)findViewById(R.id.你的ViewpPager的id);
         //实例化刚才的适配器
         viewPager.setAdapter(new ImagePagerAdapter());
    }

    /**
     * 初始化图片view
     */
     private void initImages(){
        for(int i = 0;i < mImageResIds;i++){
            //创建一个ImageView
            ImageView imageView = new ImageView(this);
            //写入图片
            imageView.setImageResource(mImageResIds[i]);
            //写入铺满（匹配父容器）
            imageView.settScaleType(ImageView.ScaleType.FIT_XY);
            //添加到数组集合里面
            mImages.add(imageView);
        }
     }
    ....
}

展示引导页已经做完了，下图为效果图展示；

这里写图片描述

现在基本上效果是出来了。可是当一直从右往左滑的时候，到最后一张图片的时候，应该退出这页面。创建一个监听事件，监听到最后一张图片往左划的时候。让它跳换页面，并关闭当前页面。

首先创建一个类使用ViewPager.OnPageChangeListener 接口，并重写onPageScrolled()、onPageSelected() 还有onPageScrollStateChanged() 方法；

public class ImagePageListener implements ViewPager.OnPageChangeListener
{
        /**
         * 判断当前是否最后一页
         */
        private boolean isLast = false;
        /**
         * 判断偏移量
         */
        private int mPositionOffsetPixels = -1;
        /**
         * 上下文(用于跳转新界面)
         */
        private Context mContext; 

        public ImagePageListener(Context mContext){
            this.mContext = mContext;
        }

        /**
         * 滑动的时候调用
         *
         * @param position 滑动的页数
         * @param  positionOffset 滑动的偏移量；
         * @param  positionOffsetPixels 滑动的距离px：
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //判断当前是否是最后一页
            if(isLast){
                //判断偏移量(因为最后一页，如果向右滑 是没有偏移量的)
                if(positionOffsetPixels == 0 && mPositionOffsetPixels == 0){
                    //这里写跳转页面信息，例如这里是跳转
                    Intent intent = new Intent(
                        mContext,
                        MainActivity.class)
                    //跳转
                    mContext.startActivity(intent);
                    //关闭页面
                    finish();
                }
            }
            //存储偏移量
            mPositionOffsetPixels = positionOffsetPixels;
        }

        /**
         * 引导页停留
         * 当点击页面往左右滑时候首先调用
         */
        @Override
        public void onPageSelected(int position) {
        }

        /**
         * 判断是否划到边距了
         */
        @Override
        public void onPageScrollStateChanged(int state) {
            /**
             * SCROLL_STATE_DRAGGING  当向左右滑动会触发
             * SCROLL_STATE_SETTING   当向左右滑动到一个新界面的时候触发
             * SCROLL_STATE_IDLE      当停止向左右滑动会触发
             */
            switch (state){
                case ViewPager.SCROLL_STATE_SETTLING:
                    //判断当前是否最后一页
                    if(mGuideVg.getCurrentItem() == mImages.size() - 1){
                        isLast = true;
                    }else{
                        isLast = false;
                    }
                    break;
            }
        }
}

在activity页面添加ViewPager滑动事件
public class GuideActivity extends BaseActivity
{
    ...

    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.布局);  //写入刚才的布局
        /**
         * 
         */
         initImages();
         viewPager = (ViewPager)findViewById(R.id.你的ViewpPager的id);
         //实例化刚才的适配器
         viewPager.setAdapter(new ImagePagerAdapter());
         viewPager.addOnPageChangeListener(new ImagePageListener(this));
    }

    ...
}

此时已经完成引导页正常显示，和往右划会跳转到指定页面。还剩下下面那一排小圆点的未完成了。

首先回到刚才xml布局，在下面创建一个RadioGroup 并设置好要设置位置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 展示页-->
    <android.support.v4.view.ViewPager
        android:id="@id/guide_vg"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 用于显示下面那排小圆点-->
    <RadioGroup
        android:id="@id/guide_btn"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_height="30dp">
    </RadioGroup>
</RelativeLayout>

回到Activity页面，每当创建一个图片的时候就为他生成一个小圆点

public class GuideActivity extends BaseActivity  {
    private RadioGroup mGuideRg;
    ...

    /**
     * 初始化图片view
     */
    private void initImages(){
        mGuideRg = (RadioGroup)findViewById(R.id.xxx);
        for(int i = 0 ; i < mImagesResId.length; i++){
            //创建一个ImageView
            ImageView imageView = new ImageView(this);
            //写入图片
            imageView.setImageResource(mImagesResId[i]);
            //把图片沾满全屏
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            //添加到数组里面
            mImages.add(imageView);
            //创建一个单选按钮
            RadioButton radioButton = new RadioButton(this);
            //把单选按钮的图标变透明
            radioButton.setButtonDrawable(new ColorDrawable(Color.TRANSPARENT));
            //设置单选按钮的大小和右边距
            RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(30,30);
            layoutParams.rightMargin = 10;
            radioButton.setLayoutParams(layoutParams);
            //写入自己需要的drawble点击效果
            radioButton.setBackgroundResource(R.drawable.bg_guild_radio);
            //当点击小圆点的时候对应的引导页页面
            final int index = i;
            //单击事件
            radioButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //根据小圆点位置来显示对应的引导界面
                    mGuideVg.setCurrentItem(o);
                }
            });
            //添加到数组里面
           mGuideRg.addView(radioButton);
           //默认第一个被选中
           if(i == 0){
                RadioButton radioCheck = (RadioButton) mGuideRg.getChildAt(i);
                radioCheck.setChecked(true);
            }
        }
    ...
}

drawble布局

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

<!-- 当被选中的时候显示-->
    <item android:state_checked="true" android:drawable="@mipmap/xxx" />
<!-- 当被取消选中的时候显示-->
    <item android:state_checked="false" android:drawable="@mipmap/xxx" />
</selector>

上面完成了点击事件，下面写入当滑倒一个新引导页，选中对应的小圆点;打开adapter页面,传入

public class ImagePageListener implements ViewPager.OnPageChangeListener
{       
        ...

        //单选
        private RadioGroup mRrdioGroup;

        public ImagePageListener(Context context,RadioGroup radioGroup){
            this.mContext = context;
            this.mRadioGroup = radioGroup;
        }

        /**
         * 引导页停留
         * 当点击页面往左右滑时候首先调用
         */
        @Override
        public void onPageSelected(int position) {
            //当前页面对应的小圆点
            RadioButton radioButton = (RadioButton)mGuideRg.getChildAt(position);
            //将他选中
            radioButton.setChecked(true);
        }

        ...
}

修改activity页面
在activity页面添加ViewPager滑动事件
public class GuideActivity extends BaseActivity
{
    ...

    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.布局);  //写入刚才的布局
        /**
         * 
         */
         initImages();
         viewPager = (ViewPager)findViewById(R.id.你的ViewpPager的id);
         //实例化刚才的适配器
         viewPager.setAdapter(new ImagePagerAdapter());
         viewPager.addOnPageChangeListener(new ImagePageListener(this),mGuideRg);
    }

    ...
}

以上步骤完成了。谢谢大家花时间观赏

小志啊i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
孙孙啊i之项目实战(三) 引导页

开头语: 每个app刚下载第一次打开的时候。都会一个几张介绍APP功能类型图片。俗称引导页。现在基本不可缺效果图如下:(像素低，别见怪) 废话不多说，现在开始做吧。首先按照创建一个layout布局.放入一个ViewPager。作为滑动的效果<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="
复制链接

扫一扫

专栏目录