学习安卓笔记之自定义控件(五)
------一个具有透明渐变效果的引导页
今天来模仿一个挺好看的引导页,至少之前不知道ViewPager可以这样用,这里先看一下效果图,当然了图是盗来的- -!。
这样一看发现跟普通的引导页没有什么区别,我们再来看张GIF图片,要不没法知道要实现的是啥样的效果。没办法图片大小有限制,先来看张向右滑动的效果。这是会看见一个透明简便的效果。
再来看一张向左滑动的效果,这样可以发现在滑动ViewPager的时候会有一个透明渐变的效果。
那么如何实现这样的效果呢,我的想法是使用一个自定义布局来放置ImageView,然后通过获取ViewPager的滑动监听的偏移量来设置自定义布局中的ImageView的透明度来达到这样的效果
自定义布局中的代码并不多,这里就全贴出来了。
/**
* Author LYJ
* Created on 2016/11/29.
* Time 13:41
*/
public class GuideImageLayout extends FrameLayout{
private static final String TAG = GuideImageLayout.class.getSimpleName();
private static ArrayList<ImageView> showItems;//显示图像的集合
private static int itemCounts;//item的数量
private ViewPager viewPager;//选项卡
private int imagePosition;//位置
public GuideImageLayout(Context context) {
this(context,null);
}
public GuideImageLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
/**
* 初始化
*/
private void init() {
showItems = new ArrayList<>();//数据集合用来存放ImageView
}
/**
* 设置显示的数量
* @param resID
* @return true为添加成功,false为添加失败
*/
public boolean addItems(@DrawableRes int[] resID){
itemCounts = resID.length;
for (int i = 0; i < itemCounts; i++) {
ImageView imageView = new ImageView(getContext());
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
imageView.setLayoutParams(params);
imageView.setBackgroundResource(resID[i]);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
addView(imageView);
showItems.add(imageView);
}
showItemPosition(0);
return showItems.size() == itemCounts;
}
/**
* 设置ViewPager
* @param pager
*/
public void setViewPager(ViewPager pager){
this.viewPager = pager;
if (viewPager == null){
throw new NullPointerException("viewPager is null,Please setViewPager(viewPager)");
}
viewPager.addOnPageChangeListener(pagerListener);
}
private ViewPager.SimpleOnPageChangeListener pagerListener = new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
if (position == imagePosition && position < itemCounts - 1) {
showItems.get(position + 1).setAlpha(positionOffset);
Log.i(TAG, "onPageScrolled: 向左滑动");
} else if (position == imagePosition - 1) {
showItems.get(position).setAlpha(positionOffset);
Log.i(TAG, "onPageScrolled: 向右滑动");
}
imagePosition = position;
}
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
showItemPosition(position);
}
};
/**
* 显示Item
* @param position
*/
private void showItemPosition(int position){
for (int i = 0; i < itemCounts; i++) {
if (position == i){
showItems.get(i).setAlpha(1.0f);
}else {
showItems.get(i).setAlpha(0.0f);
}
}
}
}
这里把这段代码的截图先展示一下。
这里为什吗要这样写呢?这里看一下Log日志输出结果的对比。
(一)在第一页向右滑动
这里看一下Log日志输出的结果,这里发现输出是0,并没有变化。为什吗说是没变化呢,因为第一页的position为0。
(二)在第一页向左滑动
这里看一下Log日志输出的结果,这里发现输出是0,还是没有变化。
(三)在第二页向左滑动
这里因为第二页position为1,所以这里输出1,这里还是没有变化。那么什么时候会有变化呢。我们继续向下看。
(四)在第二页向右滑动
这时候可以发现当不是起始页的向左滑动,position会发生变化,那就是position减一,也就是在第二页向右滑动,position输出不是1而是0。到这步就可以不用测试第三个界面了因为他肯定与第二个页面log输出是相似的,我们可以直接去看最后一页。看看是否会有一些相同的变化。
(五)在最后一页向左滑动
这里呢position为3也就是当前页没有变。
(六)在最后一页向右滑动
这里呢position减小说明有滑动到前一界面的趋势。
综上所属于是有了这些判断。
有了这个控件接下来应该如何使用呢。大致布局如下图。
j ava代码中与ViewPager绑定,如下图所示。
代码不多,实现起来也非常简单。