码迷,mamicode.com
首页 > 其他好文 > 详细

新手导航页(小圆点

时间:2017-08-08 11:01:06      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:tar   his   ges   pre   按钮   pixel   sys   点距   instance   

让小红点随滑动的距离而移动(有动画效果),利用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);
}
}
}

新手导航页(小圆点

标签:tar   his   ges   pre   按钮   pixel   sys   点距   instance   

原文地址:http://www.cnblogs.com/banzhuan/p/7305080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!