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

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.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent" /><!-- 圆点指示器 --><LinearLayoutandroid: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" /><!-- 立即体验按钮 --><TextViewandroid: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;}@Overridepublic int getCount() {return imageResources.length;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic 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;}@Overridepublic 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"><ImageViewandroid: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;@Overrideprotected 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的AdapterWelcomePagerAdapter adapter = new WelcomePagerAdapter(this, imageResources);viewPager.setAdapter(adapter);// 初始化圆点指示器createDots(0);// 监听ViewPager的滑动事件viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {createDots(position);// 显示或隐藏“立即体验”按钮if (position == imageResources.length - 1) {btnExperience.setVisibility(View.VISIBLE);} else {btnExperience.setVisibility(View.GONE);}}@Overridepublic void onPageScrollStateChanged(int state) {}});// 点击“立即体验”按钮跳转到登录页面btnExperience.setOnClickListener(new View.OnClickListener() {@Overridepublic 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() {@Overridepublic 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.效果图