智能管家---7.引导页逻辑开发

忘是亡心i 2022-05-17 05:35 243阅读 0赞

先看效果：  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
接下来实现引导页逻辑开发，闪屏页延迟结束后就会跳转到引导页（第一次运行时），这里我们添加三个引导页页面，分别是view1，view2，view3，将view存放在List中，并且为ViewPager设置适配器。

*  第一步，先实现三个简单的引导页界面，有简单的滑动效果。

activity\_guide.xml：

里面有一个Viewpager，Viewpager是容器，里面放三个页面  
![这里写图片描述][70 2]

page\_item\_one.xml/同two，three  
![这里写图片描述][70 3]

接下来初始化控件，即ViewPager，并且绑定为三个View添加布局即page\_item\_one等  
![这里写图片描述][70 4]  
![这里写图片描述][70 5]

Viewpager适配器是继承自PagerAdapter  
![这里写图片描述][70 6]

因为引导页是全屏，所以要在AndroidManifest.xml文件中为GuideActivity添加全屏主题：  
![这里写图片描述][70 7]

*  第二步，添加小圆点和进入主页按钮。一共有三个小圆点，显示哪个引导页页面，哪个小圆点就为绿色，否则为黑色，在第三个引导页页面有一个进入主页按钮。

首先，要修改activity\_guide.xml，添加三个ImageView，将布局改为RelativeLayout  
![这里写图片描述][70 8]

page3添加进入主页按钮：  
![这里写图片描述][70 9]

button的自定义背景：  
![这里写图片描述][70 10]

接下来初始化三个小圆点和button，并为button添加点击事件进入主页：  
![这里写图片描述][70 11]

![这里写图片描述][70 12]

![这里写图片描述][70 13]

接下来设置小圆点的效果：

可以看到选中页面时小圆点的颜色变化  
![这里写图片描述][70 14]

设置默认显示第一个页面：  
![这里写图片描述][70 15]

接下来为ViewPager设置滑动监听事件，监听不同的页面小圆点显示的效果不同：  
![这里写图片描述][70 16]

*  第三步，设置跳过效果,跳过图片在第一个和第二个View显示，第三个view隐藏

修改activiy\_guide.xml文件，添加back的ImageView  
![这里写图片描述][70 17]

初始化控件：  
![这里写图片描述][70 18]  
![这里写图片描述][70 19]

为back设置点击事件，跳过到主页，同按钮一个效果，注意跳过后要finish()，销毁闪屏页，否则就可以在主页返回到闪屏页  
![这里写图片描述][70 20]

修改ViewPager滑动监听事件的方法，滑动时可以隐藏和显示back：  
![这里写图片描述][70 21]

**但是运行后back没有效果，这是因为使用了相对布局，平行布局ViewPager隐藏了back，后出现的隐藏了前面的效果，所以要修改ImageView 的位置，将其放在最下面即显示在最上面：**  
![这里写图片描述][70 22]

以上就可以实现引导页的效果。

GuideActivity源码：

public class GuideActivity extends AppCompatActivity implements View.OnClickListener { 
    
        private ViewPager mViewPager;
        private List<View> mList;
        private View view1,view2,view3;
        private ImageView point1,point2,point3;
        private ImageView back;
    
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_guide);
    
            initView();
        }
    
        private void initView() {
    
            mList=new ArrayList<>();
            mViewPager=(ViewPager)findViewById(R.id.mViewpager);
            view1=View.inflate(this,R.layout.page_item_one,null);
            view2=View.inflate(this,R.layout.page_item_two,null);
            view3=View.inflate(this,R.layout.page_item_three,null);
    
            point1=(ImageView)findViewById(R.id.point1);
            point2=(ImageView)findViewById(R.id.point2);
            point3=(ImageView)findViewById(R.id.point3);
    
            view3.findViewById(R.id.btn_start).setOnClickListener(this);
    
            mList.add(view1);
            mList.add(view2);
            mList.add(view3);
    
            back=(ImageView)findViewById(R.id.back);
            back.setOnClickListener(this);
    
    
            setImage(true,false,false);
    
            mViewPager.setAdapter(new GuideAdapter());
    
            mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    switch (position){
                        case 0:
                            setImage(true,false,false);
                            back.setVisibility(View.VISIBLE);
                            break;
                        case 1:
                            setImage(false,true,false);
                            back.setVisibility(View.VISIBLE);
                            break;
                        case 2:
                            setImage(false,false,true);
                            back.setVisibility(View.GONE);
                            break;
                    }
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.btn_start:
                case R.id.back:
                    startActivity(new Intent(this, MainActivity.class));
                    finish();
                    break;
            }
        }
    
    
        class GuideAdapter extends PagerAdapter{
    
            @Override
            public int getCount() {
                return mList.size();
            }
    
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }
    
            //添加
    
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager)container).addView(mList.get(position));
                return mList.get(position);
            }
    
    
            //删除
    
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                ((ViewPager)container).removeView(mList.get(position));
            }
        }
    
        public void setImage(boolean isCheck1,boolean isCheck2,boolean isCheck3){
    
            if(isCheck1){
                point1.setBackgroundResource(R.drawable.point_on);
            }else{
                point1.setBackgroundResource(R.drawable.point_off);
            }
    
            if(isCheck2){
                point2.setBackgroundResource(R.drawable.point_on);
            }else{
                point2.setBackgroundResource(R.drawable.point_off);
            }
    
            if(isCheck3){
                point3.setBackgroundResource(R.drawable.point_on);
            }else{
                point3.setBackgroundResource(R.drawable.point_off);
            }
        }
    }

activity\_guide.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.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/mViewpager"/>
    
        <LinearLayout android:layout_alignParentBottom="true" android:layout_marginBottom="10dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center">
    
            <ImageView android:layout_width="10dp" android:layout_height="10dp" android:id="@+id/point1" />
    
            <ImageView android:layout_width="10dp" android:layout_height="10dp" android:layout_marginRight="10dp" android:layout_marginLeft="10dp" android:id="@+id/point2" />
    
            <ImageView android:layout_width="10dp" android:layout_height="10dp" android:id="@+id/point3" />
        </LinearLayout>
    
        <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/black" android:layout_alignParentRight="true" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:id="@+id/back"/>
    
    </RelativeLayout>

[70]: /images/20220517/7f1b6e8cdb624b65ac379e9aa735b901.png
[70 1]: /images/20220517/6f63c669cf7d4bfe8dc279256b0e8d10.png
[70 2]: /images/20220517/a03740b25e8143458872575aabf36459.png
[70 3]: /images/20220517/ba1c1ee43536436e870820910875fb7d.png
[70 4]: /images/20220517/82e312f75f354fff82992783cac2697b.png
[70 5]: /images/20220517/29e9fbae022845a5a1e31107b7cdd6c4.png
[70 6]: /images/20220517/70832dbb48af4a57bbc97dbdd299e68c.png
[70 7]: /images/20220517/c3675aea8caa43938e3d7f3e4e337387.png
[70 8]: /images/20220517/23998f02883c43658a4d7a7fc317e895.png
[70 9]: /images/20220517/4d1aba9020794308ac19c04b5e53589d.png
[70 10]: /images/20220517/40e6ecb4cc9c4937b6cec448e05c0f6b.png
[70 11]: /images/20220517/cfa02431218d4f17872d6c1938f515fb.png
[70 12]: /images/20220517/97b6144db3a64f469ea9ee4042c7cb46.png
[70 13]: /images/20220517/f930890473f542c590aa933d9417c3ff.png
[70 14]: /images/20220517/9d73775f1d524985b8f4c32ed8a96811.png
[70 15]: /images/20220517/1d615db32f4b4b20ba6c6a51c07b4510.png
[70 16]: /images/20220517/f68806304d1c4c449cdd204ebd22238f.png
[70 17]: /images/20220517/c92cb4f4413147278c40ef4042834d6a.png
[70 18]: /images/20220517/b6093991c55d49f58b1e9e806bc634f5.png
[70 19]: /images/20220517/ebbdd398b2fb4755aa192ee4983d7d88.png
[70 20]: /images/20220517/a1d1716c449449899a94187e488cb2a7.png
[70 21]: /images/20220517/99847dd89d8d4725962263a889295d14.png
[70 22]: /images/20220517/5d5f01edca5445b7a05ce9a50998c529.png