高级控件——翻页类视图——简单的启动引导页

ゞ浴缸里的玫瑰 2023-09-28 15:34 28阅读 0赞

![860e5620e13244436c2a3b1e71f5faad.png][]

![ed36753d66f323fe7fa7f5ad537deb5f.png][]

![6c63c65fc6a926e097f4ee3cc20c4ef7.png][]

![5bad9786762d9784ec517925e3f8cf5e.png][]

=====================================================================================================

布局：

![e3080c845972d983f4ae2f30cf9d93c1.png][]

![f2c63c0accfaa06a6769517d71fe4cd8.png][]

item\_lauch.xml：

![87056b6018be6c2808ead85f4b2cc704.png][]

![809649980ed38cd0881f1eb4276bb7cc.png][]

launch\_guide.xml：

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:drawable="@drawable/icon_point_c" />
        <item android:drawable="@drawable/icon_point_n" />
    </selector>

![b68791e2886425f2673eaf75cf7855d9.png][]

LaunchSimpleAdapter

package com.example.myapplication;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.ViewGroup;
    import android.view.ViewGroup.LayoutParams;
    import android.widget.Button;
    import android.widget.ImageView;
    import android.widget.RadioButton;
    import android.widget.RadioGroup;
    import android.widget.Toast;
    import androidx.viewpager.widget.PagerAdapter;
    import java.util.ArrayList;
    import java.util.List;
    
    public class LaunchSimpleAdapter extends PagerAdapter
    {
        private List<View> mViewList = new ArrayList<View>(); // 声明一个引导页的视图列表
    
        // 引导页适配器的构造方法，传入上下文与图片数组
        public LaunchSimpleAdapter(final Context context, int[] imageArray)
        {
            for (int i = 0; i < imageArray.length; i++)
            {
                // 根据布局文件item_launch.xml生成视图对象
                View view = LayoutInflater.from(context).inflate(R.layout.item_launch, null);
                ImageView iv_launch = view.findViewById(R.id.iv_launch);
                RadioGroup rg_indicate = view.findViewById(R.id.rg_indicate);
                Button btn_start = view.findViewById(R.id.btn_start);
                iv_launch.setImageResource(imageArray[i]); // 设置引导页的全屏图片
    
                // 每个页面都分配一个对应的单选按钮
                for (int j = 0; j < imageArray.length; j++)
                {
                    RadioButton radio = new RadioButton(context); // 创建一个单选按钮
                    radio.setLayoutParams(new LayoutParams(
                            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                    radio.setButtonDrawable(R.drawable.launch_guide); // 设置单选按钮的图标
                    radio.setPadding(10, 10, 10, 10); // 设置单选按钮的四周间距
                    rg_indicate.addView(radio); // 把单选按钮添加到页面底部的单选组
                }
    
                // 当前位置的单选按钮要高亮显示，比如第二个引导页就高亮第二个单选按钮
                ((RadioButton) rg_indicate.getChildAt(i)).setChecked(true);
    
                // 如果是最后一个引导页，则显示入口按钮，以便用户点击按钮进入主页
                if (i == imageArray.length - 1)
                {
                    btn_start.setVisibility(View.VISIBLE);
                    btn_start.setOnClickListener(new OnClickListener()
                    {
                        @Override
                        public void onClick(View v)
                        {
                            // 这里要跳到应用主页
                            Toast.makeText(context, "欢迎您开启美好生活", Toast.LENGTH_SHORT).show();
                        }
                    });
                }
    
                mViewList.add(view); // 把该图片对应的页面添加到引导页的视图列表
            }
    
        }
    
        // 获取页面项的个数
        public int getCount()
        {
            return mViewList.size();
        }
    
        // 判断当前视图是否来自指定对象
        public boolean isViewFromObject(View view, Object object)
        {
            return view == object;
        }
    
        // 从容器中销毁指定位置的页面
        public void destroyItem(ViewGroup container, int position, Object object)
        {
            container.removeView(mViewList.get(position));
        }
    
        // 实例化指定位置的页面，并将其添加到容器中
        public Object instantiateItem(ViewGroup container, int position)
        {
            container.addView(mViewList.get(position));
            return mViewList.get(position);
        }
    }

![e91e9adff9eaf6313bd7cd24cf64ccd6.png][]

![058bc130fc69c0f5458dbf1fe1113ac0.png][]

![9e280c0926c91ef0e36760734e219aa5.png][]

MainActivity

package com.example.myapplication;
    
    import android.os.Bundle;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.viewpager.widget.ViewPager;
    
    
    public class MainActivity extends AppCompatActivity
    {
        // 声明引导页面的图片数组
        private int[] lanuchImageArray = {R.drawable.guide_bg1, R.drawable.guide_bg2, R.drawable.guide_bg3, R.drawable.guide_bg4};
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // 从布局视图中获取名叫vp_launch的翻页视图
            ViewPager vp_launch = findViewById(R.id.vp_launch);
    
            // 构建一个引导页面的翻页适配器
            LaunchSimpleAdapter adapter = new LaunchSimpleAdapter(this, lanuchImageArray);
    
            vp_launch.setAdapter(adapter); // 设置翻页视图的适配器
            vp_launch.setCurrentItem(0); // 设置翻页视图显示第一页
        }
    }

![979453ad0f5481b6bbaa5115fcd8a90a.png][]

![5ff0bac7c5215921556547de7595c4f6.png][]

![12271ac071ee38fe6d936b0b36d7a505.png][]

![00519e653646eac61fbcd5c9045d1cb8.png][]

![b27216c480d6074f506950938a51ba28.png][]

===============================================================================

![3c60ad33bf0e710d5170967c09fe4e8d.png][]

![655ba3a8b7f311dd432eddd683592d16.png][]

![5306f7085111a9da7cb6a3abf055c571.png][]

![92df33ef3fe08ac84ef51c3714bc96a7.png][]

![125dbd44bf460fe6a9d7fc4343b3c9af.png][]

![936fb7882217a53fe7fc88e3f6b624c7.png][]

![0460fb088693bb23af6db0fc4b01dfcd.png][]

![c86f12947578e6a88cac67a87c1e72e6.png][]

[860e5620e13244436c2a3b1e71f5faad.png]: https://img-blog.csdnimg.cn/img_convert/860e5620e13244436c2a3b1e71f5faad.png
[ed36753d66f323fe7fa7f5ad537deb5f.png]: https://img-blog.csdnimg.cn/img_convert/ed36753d66f323fe7fa7f5ad537deb5f.png
[6c63c65fc6a926e097f4ee3cc20c4ef7.png]: https://img-blog.csdnimg.cn/img_convert/6c63c65fc6a926e097f4ee3cc20c4ef7.png
[5bad9786762d9784ec517925e3f8cf5e.png]: https://img-blog.csdnimg.cn/img_convert/5bad9786762d9784ec517925e3f8cf5e.png
[e3080c845972d983f4ae2f30cf9d93c1.png]: https://img-blog.csdnimg.cn/img_convert/e3080c845972d983f4ae2f30cf9d93c1.png
[f2c63c0accfaa06a6769517d71fe4cd8.png]: https://img-blog.csdnimg.cn/img_convert/f2c63c0accfaa06a6769517d71fe4cd8.png
[87056b6018be6c2808ead85f4b2cc704.png]: https://img-blog.csdnimg.cn/img_convert/87056b6018be6c2808ead85f4b2cc704.png
[809649980ed38cd0881f1eb4276bb7cc.png]: https://img-blog.csdnimg.cn/img_convert/809649980ed38cd0881f1eb4276bb7cc.png
[b68791e2886425f2673eaf75cf7855d9.png]: https://img-blog.csdnimg.cn/img_convert/b68791e2886425f2673eaf75cf7855d9.png
[e91e9adff9eaf6313bd7cd24cf64ccd6.png]: https://img-blog.csdnimg.cn/img_convert/e91e9adff9eaf6313bd7cd24cf64ccd6.png
[058bc130fc69c0f5458dbf1fe1113ac0.png]: https://img-blog.csdnimg.cn/img_convert/058bc130fc69c0f5458dbf1fe1113ac0.png
[9e280c0926c91ef0e36760734e219aa5.png]: https://img-blog.csdnimg.cn/img_convert/9e280c0926c91ef0e36760734e219aa5.png
[979453ad0f5481b6bbaa5115fcd8a90a.png]: https://img-blog.csdnimg.cn/img_convert/979453ad0f5481b6bbaa5115fcd8a90a.png
[5ff0bac7c5215921556547de7595c4f6.png]: https://img-blog.csdnimg.cn/img_convert/5ff0bac7c5215921556547de7595c4f6.png
[12271ac071ee38fe6d936b0b36d7a505.png]: https://img-blog.csdnimg.cn/img_convert/12271ac071ee38fe6d936b0b36d7a505.png
[00519e653646eac61fbcd5c9045d1cb8.png]: https://img-blog.csdnimg.cn/img_convert/00519e653646eac61fbcd5c9045d1cb8.png
[b27216c480d6074f506950938a51ba28.png]: https://img-blog.csdnimg.cn/img_convert/b27216c480d6074f506950938a51ba28.png
[3c60ad33bf0e710d5170967c09fe4e8d.png]: https://img-blog.csdnimg.cn/img_convert/3c60ad33bf0e710d5170967c09fe4e8d.png
[655ba3a8b7f311dd432eddd683592d16.png]: https://img-blog.csdnimg.cn/img_convert/655ba3a8b7f311dd432eddd683592d16.png
[5306f7085111a9da7cb6a3abf055c571.png]: https://img-blog.csdnimg.cn/img_convert/5306f7085111a9da7cb6a3abf055c571.png
[92df33ef3fe08ac84ef51c3714bc96a7.png]: https://img-blog.csdnimg.cn/img_convert/92df33ef3fe08ac84ef51c3714bc96a7.png
[125dbd44bf460fe6a9d7fc4343b3c9af.png]: https://img-blog.csdnimg.cn/img_convert/125dbd44bf460fe6a9d7fc4343b3c9af.png
[936fb7882217a53fe7fc88e3f6b624c7.png]: https://img-blog.csdnimg.cn/img_convert/936fb7882217a53fe7fc88e3f6b624c7.png
[0460fb088693bb23af6db0fc4b01dfcd.png]: https://img-blog.csdnimg.cn/img_convert/0460fb088693bb23af6db0fc4b01dfcd.png
[c86f12947578e6a88cac67a87c1e72e6.png]: https://img-blog.csdnimg.cn/img_convert/c86f12947578e6a88cac67a87c1e72e6.png