当下,越来越多的页面Toolbar都会随着界面的滑动呈现不同的透明状态。
如图:
要做成这样的效果有很多种,这篇文章就说一下我今天用到的一种(较为简洁,不喜勿喷)。
先把我的编程思想告诉各位,因为我觉得思想才是最重要的。
1、自定义一个类,继承自ScrollView,并重写它的 onScrollChanged 方法;
2、在 onScrollChanged 中获取 ScrollView 在Y轴的移动距离,并根据此距离改变 Toolbar(标题栏) 的透明度。
直接晒代码:
package com.test.widget;
import android.content.Context;
import android.graphics.Color;
import android.support.annotation.ColorInt;
import android.support.v4.graphics.ColorUtils;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ScrollView;
/**
* Created by 晖仔(Milo) on 2016/12/26.
* email:303767416@qq.com
*/
public class TranslucentScrollView extends ScrollView {
//渐变的视图
private View transView;
//渐变颜色
private int transColor = Color.WHITE;
//渐变视图高度
private int transViewHeight = 0;
//渐变结束位置
private int transEndY = 0;
public TranslucentScrollView(Context context) {
super(context);
}
public TranslucentScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TranslucentScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 设置渐变视图
*
* @param transView 渐变的视图
* @param transColor 渐变颜色
* @param transViewHeight 渐变视图高度
* @param transEndY 渐变结束位置
*/
public void setTransView(View transView, @ColorInt int transColor, int transViewHeight, int transEndY) {
this.transView = transView;
//初始视图-透明
this.transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, 0));
this.transViewHeight = transViewHeight;
this.transEndY = transEndY;
this.transColor = transColor;
if (transViewHeight > transEndY) {
throw new RuntimeException("transViewHeight 不得大于 transEndY .. ");
}
}
/**
* 获取透明度
*
* @return
*/
private int getTransAlpha() {
float scrollY = getScrollY();
float viewOffsetY = transEndY - transViewHeight;
float offset = 1 - Math.max((viewOffsetY - scrollY) / viewOffsetY, 0f);
//透明度
return Math.abs((int) (offset * 255));
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (transView != null) {
transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, getTransAlpha()));
}
}
}
package com.test;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import com.test.utils.SizeUtils;
import com.test.widget.TranslucentScrollView;
/**
* Created by Administrator on 2016/12/16.
* email:303767416@qq.com
*/
public class TestActivity extends AppCompatActivity {
private Toolbar toolbar;
private TranslucentScrollView scrollView;
public static Intent createIntent(Context context) {
Intent intent = new Intent(context, TestActivity.class);
return intent;
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
init();
}
void init() {
toolbar = (Toolbar) findViewById(R.id.toolbar_test);
scrollView = (TranslucentScrollView) findViewById(R.id.trans_scrollview);
scrollView.setTransView(toolbar, getResources().getColor(R.color.colorPrimary), SizeUtils.dip2px(this, 50), SizeUtils.dip2px(this, 300));
getSupportActionBar().hide();
}
}
由于代码比较简单,所以不做过多的解释。
源码地址:https://github.com/yanjunhui2014/TranslucentScrollView
如有兼容问题请多多包涵,我会在接下来的版本里,对ListView、RecycleView、WebView等组件进行渐变扩展,希望有小伙伴持续关注 。