文章目录
-
- [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
<?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
java
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
<?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和圆点指示器，并处理"立即体验"按钮的点击事件：
java
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:
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:
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，用于设置按钮的圆角背景：
xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF0000" />
<corners android:radius="25dp" />
</shape>2.效果图
