首页 > 代码库 > 新手导航页(小圆点
新手导航页(小圆点
让小红点随滑动的距离而移动(有动画效果),利用ViewPager的监听事件setOnPageChangeListener来实现
//注意测量小圆点边距时要layout完才能测量,否则为0(自定义View的三个过程)
public class GuideActivity extends AppCompatActivity {
private ViewPager mViewPager;
private ArrayList<ImageView> mImageViews;//ImageView集合
//引导图片id数组
private int[] mImageIds = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
private LinearLayout llContainer;
private ImageView ivRedPoint;
private int mPointDis; //两个小红点之间的距离
private Button btnStart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题栏
setContentView(R.layout.activity_guide);
mViewPager = (ViewPager) findViewById(R.id.vp_guide);
llContainer = (LinearLayout) findViewById(R.id.ll_container);
ivRedPoint = (ImageView) findViewById(R.id.iv_red_point);
btnStart = (Button) findViewById(R.id.btn_start);
initData();
mViewPager.setAdapter(new GuideAdapter());//设置数据
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//当页面滑动过程中的回调
System.out.println("当前位置:" + position + ";移动偏移百分比:" + positionOffset);
//更新小红点距离
int leftMargin = (int) (mPointDis * positionOffset) + position * mPointDis;//计算当前小红点的左边距
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivRedPoint.getLayoutParams();
params.leftMargin = leftMargin;//修改左边距
//重新设置布局参数
ivRedPoint.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
//页面被选中
if (position == mImageViews.size() - 1) {//最后一个显示按钮
btnStart.setVisibility(View.VISIBLE);
} else {
btnStart.setVisibility(View.GONE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
//页面状态发生变化的回调
}
});
//计算两个圆点的距离
//移动距离=第二个圆点left值-第二个圆点left值
//mPointDis = llContainer.getChildAt(1).getLeft() - llContainer.getChildAt(0).getLeft();
//监听layout方法结束的事件,位置确定好后测量 view的绘制过程
//视树图
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
ivRedPoint.getViewTreeObserver().removeOnGlobalLayoutListener(this);
//layout方法执行结束的回调
mPointDis = llContainer.getChildAt(1).getLeft() - llContainer.getChildAt(0).getLeft();
}
});
}
//初始化数据
private void initData() {
mImageViews = new ArrayList<>();
for (int i = 0; i < mImageIds.length; i++) {
ImageView view = new ImageView(this);
view.setBackgroundResource(mImageIds[i]);//通过设置背景,可以让宽高填充布局
mImageViews.add(view);
//初始化小圆点
ImageView point = new ImageView(this);
point.setImageResource(R.drawable.shape_point_gray);
//设置布局参数,宽高充满布局
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
if (i > 0) {
//从左边第二个开始
params.leftMargin = 13;
}
point.setLayoutParams(params);
llContainer.addView(point);//给容器添加圆点
}
}
class GuideAdapter extends PagerAdapter {
//item的个数
@Override
public int getCount() {
return mImageViews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//初始化item
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView view = mImageViews.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
新手导航页(小圆点
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。