正所谓“好的开始是成功的一半”,对于软件来说也是如此。一款软件如果有一个吸引人的引导页,也势必会让用户欲罢不能,想点进去看看。
今天就给大家讲一款还算可以拿得出手的引导页,想必在你们的项目中也一定可以用得到。
先看一下效果:
该引导页的特点:
①使用ViewPager实现滑动,这个是基础。
②联动的小圆点。这个比较有特点,我们滑动多少,小圆点就同比例的移动多少,这也是这个引导页的亮点所在。
③当点击“SKIP”或“即刻开启”时直接进入主页面,并销毁当前的activity。
开看看具体的实现:
1.准备三步曲。这也是一个小秘诀。
初始化视图–>初始化数据–>初始化监听。
这可以使你写代码是思路清晰,也不容易遗漏一些东西。
GuideActivity中:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//1.初始化视图
initView();
//2.初始化数据
initData();
//3.初始化监听
initListener();
}
2.初始化视图
/**
* 初始化数据
*/
private void initView() {
setContentView(R.layout.activity_guild);
ButterKnife.bind(this);
splash5 = LayoutInflater.from(GuideActivity.this).inflate(R.layout.fragment_entry, null);
}
所涉及到的两个布局文件:
①activity_guild.xml
用到的shape:selected_radius.xml
②fragment_entry.xml
3.初始化数据
/**
* 初始化数据
*/
private void initData() {
//引导页图片数据的id的数组
int[] ids = new int[]{
R.drawable.splash_1,
R.drawable.splash_2,
R.drawable.splash_3,
R.drawable.splash_4};
//放引导页图片的集合
imageViews = new ArrayList<>();
int widthdpi = DensityUtil.dip2px(this, 10);
for (int i = 0; i < ids.length + 1; i++) {
//创建小圆点
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_normal);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthdpi, widthdpi);
//除了第一个点,其他点都要给它设置左边距
if (i != 0) {
params.leftMargin = widthdpi;
}
point.setLayoutParams(params);
//添加小圆点
llPointGroup.addView(point);
if (i == ids.length) {
} else {
//将图片封装成imageview的对象
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(ids[i]);
//将iamgeview添加到集合中
imageViews.add(imageView);
}
}
//给viewpager设置适配器
viewpage.setAdapter(new MyPagerAdapter());
}
//适配器
class MyPagerAdapter extends PagerAdapter {
//返回数据总个数
@Override
public int getCount() {
return imageViews.size() + 1;
}
//当前视图
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//销毁视图
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
//显示视图
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = null;
if (position < imageViews.size()) {
view = imageViews.get(position);
container.addView(view);
} else {
view = splash5;
container.addView(view);
}
return view;
}
}
–>此时基本功能已经实现,但是小圆点还不能联动。
下面是重点,让小圆点可以随着我们的滑动成比例的移动起来。
简单说下红点移动的原理:
需要明白以下几点
①红点移动的距离 : 间距 = 屏幕滑动距离 : 屏幕宽 = 屏幕百分比(ViewPager页面的百分比)②间距 = 第1个点距离左边距离 - 第0个点距离左边距离
③红点移动的距离 = ViewPager页面的百分比* 间距
④坐标 = 起始位置 + 红点移动的距离;
4.初始化监听
/**
* 绑定监听
*/
private void initListener() {
//获取树形视图,每次页面布局完成时会调用,获取点间的距离
ivWhitePoint.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
//页面改变时
viewpage.addOnPageChangeListener(new MyOnPageChangeListener());
splash5.findViewById(R.id.iv_entry).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startMainActivity();
}
});
}
private class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {
@Override
public void onGlobalLayout() {
//默认会调用俩次,只需要一次,第一次进入就移除
ivWhitePoint.getViewTreeObserver().removeGlobalOnLayoutListener(MyOnGlobalLayoutListener.this);
//间距 = 第1个点距离左边距离 - 第0个点距离左边距离
leftmax = llPointGroup.getChildAt(1).getLeft() - llPointGroup.getChildAt(0).getLeft();
}
}
private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
/**
* 当页面滑动回调会调用此方法
*
* @param position 当前页面位置
* @param positionOffset 当前页面滑动百分比
* @param positionOffsetPixels 滑动的像素数
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//红点移动的距离 = ViewPager页面的百分比* 间距
//坐标 = 起始位置 + 红点移动的距离;
int leftmagin = (int) (position * leftmax + (positionOffset * leftmax));
//获取控件iv_red_point
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivWhitePoint.getLayoutParams();
//设置iv_red_point属性
params.leftMargin = leftmagin;
//绑定到控件上
ivWhitePoint.setLayoutParams(params);
}
/**
* 页面被选中,回调此方法
*
* @param position 被选中的页面位置
* 此作用是最后一张图片显示button
*/
@Override
public void onPageSelected(int position) {
}
/**
* 当页面滑动状态改变时候
*
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}
开启MAinActivity的方法:
/**
* 开启MainActivity
* 并销毁当前的activity
*/
private void startMainActivity() {
startActivity(new Intent(GuideActivity.this,MainActivity.class));
finish();
}
当点击“SKIP”时也进入主页面
/**
* 点击右上角的skip图标时进入主页面
*/
@OnClick(R.id.iv_skip)
public void onClick() {
startMainActivity();
}
好了,简单的引导页完成了,希望在项目中可以使用的到~
源代码已上传至我的资源,即:高仿商城引导页.rar