目录
引言
最近项目中需要引入滑动引导页,于是,在网上查了一下资料,然后进行了具体的实现。
效果图
首先写一个layout布局来展示引导页内容,在布局中放入一个viewpager控件。
具体实现代码如下
一、Activity页
/**
* Created by wsl
* on 2019/6/18 12:52
*/
public class EZActivity extends BaseActivity {
private ViewPager viewpager;
private Button btnSubmit;
private ImageView ivPoint1, ivPoint2, ivPoint3, ivPoint4;
private List<ImageView> guidePointList;
private Animation animation01 = null;
/**
* 启动activity
*
* @param context 上下文
*/
public static void startActivity(Context context) {
Intent intent = new Intent();
intent.setClass(context, EZActivity.class);
context.startActivity(intent);
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
//设置是否显示标题栏
setShowTitle(true);
//设置是否显示状态栏
setShowStatusBar(true);
//是否允许屏幕旋转
setAllowScreenRoate(true);
//以上设置一定要在 super.onCreate(savedInstanceState) 方法之前设置
super.onCreate(savedInstanceState);
}
@Override
protected int initLayout() {
//初始化布局
return R.layout.activity_ez_layout;
}
@Override
protected void initView() {
guidePointList = new ArrayList<>();
viewpager = findViewById(R.id.viewpager);
btnSubmit = findViewById(R.id.btnSubmit);
ivPoint1 = findViewById(R.id.ivPoint1);
ivPoint2 = findViewById(R.id.ivPoint2);
ivPoint3 = findViewById(R.id.ivPoint3);
ivPoint4 = findViewById(R.id.ivPoint4);
addGuidePointToList();
animation01 = AnimationUtils.loadAnimation(context, R.anim.animation_guide_alpha_0_1);
}
/**
* 添加引导点 到 list
*/
private void addGuidePointToList() {
guidePointList.add(ivPoint1);
guidePointList.add(ivPoint2);
guidePointList.add(ivPoint3);
guidePointList.add(ivPoint4);
}
@Override
protected void initData() {
final List<Integer> list = new ArrayList<>();
list.add(R.drawable.book_1);
list.add(R.drawable.book_2);
list.add(R.drawable.book_3);
list.add(R.drawable.book_4);
final GuideAdapter guideAdapter = new GuideAdapter(context, list);
viewpager.setAdapter(guideAdapter);
viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (position == list.size() - 1) {
btnSubmit.setVisibility(View.VISIBLE);
if (animation01 != null) {
btnSubmit.setAnimation(animation01);
animation01.start();
}
} else {
btnSubmit.setVisibility(View.GONE);
}
setGuidePoint(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
// viewpager.setPageTransformer(false, new DepthPageTransformer());
}
/**
* 设置引导点 的状态 (选中、未选中)
*
* @param position 当前滑动到的位置
*/
private void setGuidePoint(int position) {
for (int i = 0; i < guidePointList.size(); i++) {
if (position == i) {
guidePointList.get(i).setImageResource(R.drawable.shape_guide_point_big);
} else {
guidePointList.get(i).setImageResource(R.drawable.shape_guide_point_small);
}
}
}
/**
* 点击事件
*/
public OnSingleClickListener onSingleClickListener = new OnSingleClickListener() {
@Override
public void onSingleClick(View view) {
switch (view.getId()) {
default:
break;
}
}
};
@Override
protected void onDestroy() {
super.onDestroy();
}
}
二、layout布局页
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:orientation="vertical">
<Button
android:id="@+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="进入主页"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="8dp"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@+id/ivPoint1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_big" />
<ImageView
android:id="@+id/ivPoint2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_small" />
<ImageView
android:id="@+id/ivPoint3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_small" />
<ImageView
android:id="@+id/ivPoint4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_small" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
三、viewpager适配器代码
/**
* Created by wsl
* on 2019/9/4 16:35
*/
public class GuideAdapter extends PagerAdapter {
private List<Integer> list;
private Context context;
public GuideAdapter(Context context, List<Integer> list) {
this.context = context;
this.list = list;
}
@Override
public int getCount() {
return list == null ? 0 : list.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageResource(list.get(position));
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
}
四、资源文件
animation_guide_alpha_0_1.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1" />
</set>
shape_guide_point_big.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<size
android:width="8dp"
android:height="8dp" />
<corners android:radius="4dp" />
</shape>
shape_guide_point_small.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<size
android:width="5dp"
android:height="5dp" />
<corners android:radius="2.5dp" />
</shape>
结束语
BaseActivity在之前的文章中有详细描述,如有需要,请查看之前的文章。