Androidstudio实现一个app引导页(超详细)

文章目录

• • [1. 功能需求](#1. 功能需求)
  • [2. 代码实现过程](#2. 代码实现过程)
  • • [1. 创建布局文件](#1. 创建布局文件)
    • [2. 创建引导页的Adapter](#2. 创建引导页的Adapter)
    • [3. 实现引导页Activity](#3. 实现引导页Activity)
    • [4. 创建圆点指示器的Drawable](#4. 创建圆点指示器的Drawable)
    • [5. 创建"立即体验"按钮的圆角背景](#5. 创建“立即体验”按钮的圆角背景)
  • 2.效果图

1. 功能需求

1、需要和原型图设计稿对应的元素保持一致的样式。

2、引导页需要隐藏导航栏，有三张图片，从第一张图片可以向左滑动 到第二张图片；从第二张向左可以滑动的第三张照片，向右可以滑动 到第一张照片；从第三张照片可以向右滑动到第二张照片。

3、底部有三个小圆点，小圆点根据图片变动；显示第一张图片时，只 有第一个小圆点为红色；显示第二张图片时，只有第二个小圆点为红 色；显示第三张图片时，只有第三个小圆点为红色。

4、点击底部小圆点可以跳转到对应的图片。

5、第三张图片上面有一个圆角矩形的"立即体验"按钮。

6、点击【立即体验】按钮能切换页面至【Login】页面。

2. 代码实现过程

1. 创建布局文件

创建一个布局文件 activity_welcome.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">

    <!-- ViewPager 用于显示图片 -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 圆点指示器 -->
    <LinearLayout
        android:id="@+id/dotsLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal" />

    <!-- 立即体验按钮 -->
    <TextView
        android:id="@+id/btnExperience"
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:background="@drawable/rounded_button"
        android:gravity="center"
        android:text="立即体验"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:visibility="gone" />
</RelativeLayout>

2. 创建引导页的Adapter

public class WelcomePagerAdapter extends PagerAdapter {

    private Context context;
    private int[] imageResources;

    public WelcomePagerAdapter(Context context, int[] imageResources) {
        this.context = context;
        this.imageResources = imageResources;
    }

    @Override
    public int getCount() {
        return imageResources.length;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(R.layout.item_welcome, container, false);
        ImageView imageView = view.findViewById(R.id.imageView);
        imageView.setImageResource(imageResources[position]);
        container.addView(view);
        return view;
    }

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

对应的布局文件 item_welcome.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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="400dp"
        android:src="@drawable/image1"
        android:layout_centerInParent="true" />
</RelativeLayout>

3. 实现引导页Activity

在WelcomeActivity中，设置ViewPager和圆点指示器，并处理"立即体验"按钮的点击事件：

public class WelcomeActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private LinearLayout dotsLayout;
    private TextView btnExperience;
    private int[] imageResources = {R.drawable.image1, R.drawable.image2, R.drawable.image2};
    private ImageView[] dots;

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

        //初始化控件
        viewPager = findViewById(R.id.viewPager);
        dotsLayout = findViewById(R.id.dotsLayout);
        btnExperience = findViewById(R.id.btnExperience);

        // 设置ViewPager的Adapter
        WelcomePagerAdapter adapter = new WelcomePagerAdapter(this, imageResources);
        viewPager.setAdapter(adapter);

        // 初始化圆点指示器
        createDots(0);

        // 监听ViewPager的滑动事件
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageSelected(int position) {
                createDots(position);
                // 显示或隐藏"立即体验"按钮
                if (position == imageResources.length - 1) {
                    btnExperience.setVisibility(View.VISIBLE);
                } else {
                    btnExperience.setVisibility(View.GONE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        // 点击"立即体验"按钮跳转到登录页面
        btnExperience.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "跳转到登录页面", Toast.LENGTH_SHORT).show();
            }
        });
    }

    // 创建圆点指示器
    private void createDots(int currentPosition) {
        if (dotsLayout != null) {
            dotsLayout.removeAllViews();
        }
        dots = new ImageView[imageResources.length];

        for (int i = 0; i < imageResources.length; i++) {
            dots[i] = new ImageView(this);
            if (i == currentPosition) {
                dots[i].setImageResource(R.drawable.dot_selected);
            } else {
                dots[i].setImageResource(R.drawable.dot_unselected);
            }

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT
            );
            //设置原点左右之间的间距
            params.setMargins(14, 0, 14, 0);
            dotsLayout.addView(dots[i], params);

            // 点击圆点跳转到对应的页面
            final int finalI = i;
            dots[i].setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewPager.setCurrentItem(finalI);
                }
            });
        }
    }
}

4. 创建圆点指示器的Drawable

在res/drawable目录下创建两个XML文件，分别表示选中的圆点和未选中的圆点：
dot_selected.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FF0000" />
    <size android:width="10dp" android:height="10dp" />
</shape>

dot_unselected.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#CCCCCC" />
    <size android:width="10dp" android:height="10dp" />
</shape>

5. 创建"立即体验"按钮的圆角背景

在res/drawable目录下创建一个XML文件 rounded_button.xml，用于设置按钮的圆角背景：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000" />
    <corners android:radius="25dp" />

</shape>

2.效果图