Android透明到白色滑动渐变,浅谈Android控件监听滑动渐变效果

不废话先看效果图

scroll.gif

大概效果就是这样 toolbar和悬浮按钮随着viewpager的滚动改变透明度实现淡入淡出的效果

首先设置viewpager的翻页监听器

viewPager.addOnPageChangeListener()

里面重写三个方法

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

public void onPageSelected(int position){}

public void onPageScrollStateChanged(int state) {}

本文主要用到第一个方法onPageScrolled()

本方法 传入3个参数int position, float positionOffset, int positionOffsetPixels

position:当前页面，即点击滑动的页面

positionOffset:当前页面偏移的百分比

positionOffsetPixels :当前页面偏移的像素位置

我们为了直观一点定义了一个浮点变量aFloat代表viewpager滚动的位置

float aFloat = positionOffset + (float) position;

比如说本例中有3个页面aFloat值就会在0~2之间变化

如图log中显示的1.3几就表示第二个页面到第三个之间

设置控件透明度：

控件实例.getBackground().setAlpha()

得到控件的背景后用setAlpha()方法设置透明度，其中setAlpha() 传入0-255的int形参数，255代表不透明，0代表全透明。

判断滚动位置大于1后，就可以随着positionOffset 值来调整透明度

toolbar.getBackground().setAlpha((int) (255f - positionOffset * 255f)); floatingActionButton.getBackground().setAlpha((int) (255f - positionOffset * 255f));

然而你会发现几个问题：

搜索框edittext并不会随着背景变淡很难看

image.png

于是我们简单粗暴设置它的可见性

editText.setVisibility(View.INVISIBLE);

虽然搜索框完全透明看不到，但仍可执行操作

这时我们还是需要设置可见性

if(aFloat == 2){

floatingbutton.setVisibility(View.INVISIBLE);

}

当然设置不可见后在滑动回去时还要设置回可见哦否则该显示的显示不出来

光知道位置还不够，还需要知道是向左还是向右滑动

这里我们在监听器外面定义一个浮点变量aFloat_first来代表上一次调用监听方法时的位置来跟本次的比对得到滑动方向

(aFloat - aFloat_first) > 0表示向右滑动

(aFloat - aFloat_first) < 0向左

下面贴上监听器全部代码

private void setPager() {

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

//aFloat代表viewpager滚动位置

float aFloat = positionOffset + (float) position;

Log.d(TAG, "onPageScrolled: " + aFloat);

//解决在 我的 页面向右快速滑透明度较高的问题(快速滑动会导致不能实时监测aFloat)

if (aFloat > 1) {

//设置透明度

editText.getBackground().setAlpha((int) (255f - positionOffset * 255f));

toolbar.getBackground().setAlpha((int) (255f - positionOffset * 255f));

floatingActionButton.getBackground().setAlpha((int) (255f - positionOffset * 255f));

if (aFloat > 1.7 && aFloat < 1.9 && (aFloat - aFloat_first) > 0) {

editText.setVisibility(View.INVISIBLE);

}

if (aFloat > 1.7 && aFloat < 1.9 && (aFloat - aFloat_first) < 0) {

editText.setVisibility(View.VISIBLE);

}

if (aFloat == 2) {

toolbar.setVisibility(View.INVISIBLE);

floatingActionButton.setVisibility(View.INVISIBLE);

}

}

if ( aFloat < 2 && aFloat > 1) {

if (toolbar.getVisibility() == View.INVISIBLE) {

toolbar.setVisibility(View.VISIBLE);

editText.setVisibility(View.INVISIBLE);

floatingActionButton.setVisibility(View.VISIBLE);

}

}

aFloat_first = aFloat;

}

@Override

public void onPageSelected(int position) {

//监听页卡位置，实现当前页卡图标变色

if (position==0){

found_imgbtn.setImageResource(R.drawable.find_press_icon)；

lost_imgbtn.setImageResource(R.drawable.find_icon);

me_imgbtn.setImageResource(R.drawable.me_icon);

}if (position==1){

found_imgbtn.setImageResource(R.drawable.find_icon);

lost_imgbtn.setImageResource(R.drawable.find_press_icon);

me_imgbtn.setImageResource(R.drawable.me_icon);

}if (position==2){

found_imgbtn.setImageResource(R.drawable.find_icon); lost_imgbtn.setImageResource(R.drawable.find_icon);

me_imgbtn.setImageResource(R.drawable.me_press_icon);

}

}

@Override

public void onPageScrollStateChanged(int state) {

}

});```

####okok that`s all