Android使用ViewPager实现引导页

最新推荐文章于 2024-06-20 20:44:06 发布

来份麻辣浪

最新推荐文章于 2024-06-20 20:44:06 发布

阅读量513

点赞数 13

文章标签： android android-studio

本文链接：https://blog.csdn.net/qq_74018781/article/details/138975234

版权

本引导页可以进行滑动切换页面也可以通过点击单选按钮实现页面的切换

现在layout文件夹下创建4个布局文件,在此就以第一个yindao01.xml布局文件为例，在粘贴复制创建后面3个即可(yindaoye02.xml,yindaoye03.xml,yindaoye04.xml)，就是最后一个布局文件多了两个按钮，就是上面的预览图里的两个按钮控件。

yindaoye布局文件里的background都是一张图片

yindaoye01.xml

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

</LinearLayout>

单选按钮样式

选中时的样式radio_click.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
        <size android:height="20dp" android:width="20dp"/>
        <solid android:color="#2196F3"/>
        <stroke android:color="#ccc" android:width="1dp"/>

</shape>

未选中时的样式 radio_no_click.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
        <size android:height="20dp" android:width="20dp"/>
        <solid android:color="#ffffff"/>
        <stroke android:color="#ccc" android:width="1dp"/>

</shape>

按钮样式 shape_logon_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#2196F3"/>
    <stroke android:width="1dp" android:color="#2196F3"/>
    <corners android:radius="10dp"/>
</shape>

适配器 YinDaoYeAdapter.java

import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

public class YinDaoYeAdapter extends PagerAdapter {

    private List<View> viewList;

    public YinDaoYeAdapter(List<View> viewList) {
        this.viewList = viewList;
    }

    @Override
    public int getCount() {
        return viewList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {

        return view==object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        // 将当前滑动的视图添加到容器(container)里
        container.addView(viewList.get(position));
        // 返回当前滑动的视图
        return viewList.get(position);
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(viewList.get(position));
    }
}

主页面布局 activity_home_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--        页面滑动控件-->
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!--        点选按钮控件，用于控制页面的选中-->
        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dp">

            <RadioButton
                android:id="@+id/rb_01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:background="@drawable/selector_radio_style"
                android:button="@null" />

            <RadioButton
                android:id="@+id/rb_02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:background="@drawable/selector_radio_style"
                android:button="@null" />

            <RadioButton
                android:id="@+id/rb_03"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:background="@drawable/selector_radio_style"
                android:button="@null" />

            <RadioButton
                android:id="@+id/rb_04"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:background="@drawable/selector_radio_style"
                android:button="@null" />

        </RadioGroup>

    </RelativeLayout>

</LinearLayout>

实现代码 HomeActivity.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;


import java.util.ArrayList;
import java.util.List;

public class HomeActivity extends AppCompatActivity implements View.OnClickListener, CompoundButton.OnCheckedChangeListener {

    private ViewPager view_pager;
    private RadioButton rb_01;
    private RadioButton rb_02;
    private RadioButton rb_03;
    private RadioButton rb_04;
    private List<View> viewList;
    private Button btn_network;
    private Button btn_zhuye;

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

        InitView();
        setView();
        setButton();
        setAdapter();
        ViewPagerClick();
        RadioButtonViewClick();

    }

    /**
     * 初始化控件
     */
    private void InitView() {
        view_pager = findViewById(R.id.view_pager);
        rb_01 = findViewById(R.id.rb_01);
        rb_02 = findViewById(R.id.rb_02);
        rb_03 = findViewById(R.id.rb_03);
        rb_04 = findViewById(R.id.rb_04);

    }

    /**
     * 单选按钮点击监听事件
     */
    public void RadioButtonViewClick() {
        rb_01.setOnCheckedChangeListener(this);
        rb_02.setOnCheckedChangeListener(this);
        rb_03.setOnCheckedChangeListener(this);
        rb_04.setOnCheckedChangeListener(this);
    }

    /**
     * 网络设置与进入主页的按钮设置
     */
    public void setButton(){
        // 获取网络设置按钮控件
        btn_network = viewList.get(3).findViewById(R.id.btn_network);
        // 获取进入主页按钮控件
        btn_zhuye = viewList.get(3).findViewById(R.id.btn_zhuye);
        // 监听按钮点击事件
        btn_network.setOnClickListener(this);
        btn_zhuye.setOnClickListener(this);
    }

    /**
     * 设置ViewPager的滑动事件
     */
    public void ViewPagerClick() {
        view_pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            // onPageSelected()方法是在页面滑动改变时调用
            @Override
            public void onPageSelected(int position) {
                // 判断当前选中的位置,根据当前位置的选中指定的单选按钮
                switch (position) {
                    case 0:
                        rb_01.setChecked(true);
                        break;
                    case 1:
                        rb_02.setChecked(true);
                        break;
                    case 2:
                        rb_03.setChecked(true);
                        break;
                    case 3:
                        rb_04.setChecked(true);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     * 获取布局
     */
    private View getView(int view) {
        // 获取传入的布局，并将其返回
        return LayoutInflater.from(HomeActivity.this).inflate(view, null);
    }

    /**
     * 设置View视图
     */
    public void setView() {
        // 创建视图数组
        viewList = new ArrayList<>();
        // 将布局添加到视图数组当中
        viewList.add(getView(R.layout.yindaoye01));
        viewList.add(getView(R.layout.yindaoye02));
        viewList.add(getView(R.layout.yindaoye03));
        viewList.add(getView(R.layout.yindaoye04));

        // 默认选中第一个单选按钮
        rb_01.setChecked(true);
        // 默认选中第一个页面
        view_pager.setCurrentItem(0);

    }

    /**
     * 设置适配器
     */
    public void setAdapter() {
        // 创建适配器对象
        YinDaoYeAdapter yinDaoYeAdapter = new YinDaoYeAdapter(viewList);
        // 将适配器设置到ViewPager里
        view_pager.setAdapter(yinDaoYeAdapter);
    }

    /**
     * 单选按钮的点击事件监听
     */
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // 判断当前单选按钮是否选中，选中就显示指定页面
        if (rb_01.isChecked()) {
            view_pager.setCurrentItem(0);
        } else if (rb_02.isChecked()) {
            view_pager.setCurrentItem(1);
        } else if (rb_03.isChecked()) {
            view_pager.setCurrentItem(2);
        } else if (rb_04.isChecked()) {
            view_pager.setCurrentItem(3);
        }
    }


    @Override
    public void onClick(View v) {
        if(v.getId()==R.id.btn_network){
            Toast.makeText(this,btn_network.getText().toString() , Toast.LENGTH_SHORT).show();
        }else if(v.getId()==R.id.btn_zhuye){
            Toast.makeText(this,btn_zhuye.getText().toString() , Toast.LENGTH_SHORT).show();
        }
    }

 
}

至此使用ViewPager实现引导页就到此结束，有问题的评论区留言