Android Studio App开发之实现简单的启动引导页ViewPager（附源码实现App的欢迎页面）

清疚 2023-09-30 16:36 19阅读 0赞

> **需要源码或图片集请点赞关注收藏后评论区留言~~~**

## App引导启动页 ##

翻页视图的应用范围很广，当用户安装一个新应用时，首次启动大多出现欢迎页面，这个引导页面通常要往右翻好几页，才会进入应用主页，这种启动引导页就是通过翻页视图实现的。下面就来动手打造一个属于你的第一个App启动欢迎页把。

它的核心在于页面项的XML布局以及适配器，因此首先要设计页面项的布局，一般来说，引导页由两部分组成，一部分是背景图，一部分是页面下方的一排圆点，其中高亮的圆点表示当前位于第几页。除了背景图与一排圆点之外，最后一页往往有个按钮，它便是应用主页的入口，也是页面项的XML文件至少包含三个控件

> 1：引导页的背景图
> 
> 2：底部的一排圆点
> 
> 3：最后一页的入口按钮

写好了页面项的XML布局，还得编写启动引导页得适配器代码 主要完成三项工作

> 1：根据页面项得XML文件构造每页的视图
> 
> 2：让当前页码的圆点高亮显示
> 
> 3：如果翻到了最后一页，就显示中间的入口按钮

效果如下

![3b60eb3b6e464ba99358fb58aef0cd04.png][]

![0b042e5582854fe1b2c2aaa6eb97a380.png][]

![c9cc48044830410f8545c661986af1d9.png][]

最后 代码如下

### Java类代码 ###

package com.example.chapter08;
    
    import android.os.Bundle;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.viewpager.widget.ViewPager;
    
    import com.example.chapter08.adapter.LaunchSimpleAdapter;
    
    public class LaunchSimpleActivity 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_launch_simple);
            // 从布局视图中获取名叫vp_launch的翻页视图
            ViewPager vp_launch = findViewById(R.id.vp_launch);
            // 构建一个引导页面的翻页适配器
            LaunchSimpleAdapter adapter = new LaunchSimpleAdapter(this, lanuchImageArray);
            vp_launch.setAdapter(adapter); // 设置翻页视图的适配器
            vp_launch.setCurrentItem(0); // 设置翻页视图显示第一页
        }
    }

#### 适配器代码 ####

package com.example.chapter08.adapter;
    
    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 com.example.chapter08.R;
    
    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);
        }
    }

### XML文件如下 ###

#### item\_launchXML ####

**创作不易 觉得有帮助请点赞关注收藏~~~**

[3b60eb3b6e464ba99358fb58aef0cd04.png]: https://img-blog.csdnimg.cn/3b60eb3b6e464ba99358fb58aef0cd04.png
[0b042e5582854fe1b2c2aaa6eb97a380.png]: https://img-blog.csdnimg.cn/0b042e5582854fe1b2c2aaa6eb97a380.png
[c9cc48044830410f8545c661986af1d9.png]: https://img-blog.csdnimg.cn/c9cc48044830410f8545c661986af1d9.png