当下,越来越多的页面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等组件进行渐变扩展,希望有小伙伴持续关注 。
作者: