实现淘宝和QQ ToolBar透明渐变效果

admin管理员组

文章数量:1130349

实现淘宝和QQ ToolBar透明渐变效果

哎，好久都没写博客了，最近有点懒惰了，今天端午节，在学校也是无聊的蛋疼啊，正好今天玩玩一些在其他app中常见的一些功能。

---

来看看效果图吧！

这个是人家的图，我懒得自己弄一个，就copy他的了，顺便帮你宣传一下你的简书，不算为过吧^-^. sou，传送门
之前是在简书上面看了一篇实现的这种功能，他是重写CoordinatorLayout的Behavior类来达到效果，也确实理解到了CoordinatorLayout的强大之处啊，但是自己跟着他的效果走的时候 ，感觉好像不是太理想的样子。

---

今天我来自己 写个

来看看我的效果图：

哇塞，好牛逼的样子，额，其实也就那么回事。

来讲讲思路吧

草稿画。。。。这个应该看的懂吧，就是一些控件的分布

自己用画图软件画的，自己看的都心醉心醉的。

从图中我们应该就能了解到，其实这些好像就那么回事，拿到高度，然后设置透明度就行了，其实，是这个样子的

首先，我们要知道设置View的透明度的代码

toolbar.getBackground().setAlpha(Interger);

参数设置的是透明度的变化值为0~255，颜色数嘛是吧。

然后看看获取变化距离区间的代码

headHeight= headView.getMeasuredHeight()-toolbar.getMeasuredHeight();

这样，我们就拿到距离的代码了，现在两样都齐全了，怎样才能将他们关联起来呢，我们想想，当前滚动的ScrollView的Y值去减去这个headHeight，这个相差值只允许他在headHeight的高度去变化，如果ScrollView滑动的距离超出这个高度的话，那么我们直接设置alpha为255直接显示变透明，如果这个ScrollView滑动的到顶部时，我们直接设置alpha为0为透明，我们首先拿到这个变化的距离，然后去除以这个headHeight高度拿到这个百分比，然后去乘上255拿到同等比例中的透明度的值，记得这个数值都得是float类型，高度也是，要是int的话这样相除的话就变成0了。

alpha=((float)(getScrollY()-headHeight)/headHeight)*255

拿到这个透明度后就可以设置进去了，思路就是这么简单，现在来贴下代码。

MainActivity.class

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);AlphaTitleScrollView scroll = (AlphaTitleScrollView) findViewById(R.id.scrollview);LinearLayout title = (LinearLayout) findViewById(R.id.title);ImageView head = (ImageView) findViewById(R.id.head);scroll.setTitleAndHead(title, head);title.getBackground().setAlpha(0);}}

activity_main.xml

<RelativeLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent" ><view.AlphaTitleScrollView
        xmlns:android=""android:id="@+id/scrollview"android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayout
            android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><!--             显示的head为ImageView --><ImageView
                android:id="@+id/head"android:layout_width="match_parent"android:layout_height="500px"android:scaleType="fitXY"android:src="@drawable/a" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /></LinearLayout></view.AlphaTitleScrollView>
<!-- title标题栏--><LinearLayout
        android:id="@+id/title"android:layout_width="match_parent"android:layout_height="50dp"android:background="#FCFCFC"android:gravity="center_vertical"android:orientation="horizontal" ><ImageView
            android:layout_width="20dp"android:layout_height="20dp"android:layout_marginLeft="20dp"android:gravity="center_vertical"android:src="@drawable/arrow"android:textColor="#fff" /></LinearLayout></RelativeLayout>

AlphaTitleScrollView.class

public class AlphaTitleScrollView extends ScrollView {public static final String TAG = "AlphaTitleScrollView";private int mSlop;private LinearLayout toolbar;private ImageView headView;public AlphaTitleScrollView(Context context, AttributeSet attrs,int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}public AlphaTitleScrollView(Context context, AttributeSet attrs) {this(context, attrs, 0);// TODO Auto-generated constructor stub}public AlphaTitleScrollView(Context context) {this(context, null);}private void init(Context context) {// mSlop = ViewConfiguration.get(context).getScaledDoubleTapSlop();mSlop = 10;Log.i(TAG, mSlop + "");}/*** * @param headLayout*            头部布局* @param imageview*            标题*/public void setTitleAndHead(LinearLayout toolbar, ImageView headView) {this.toolbar = toolbar;this.headView = headView;}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {float headHeight = headView.getMeasuredHeight()- toolbar.getMeasuredHeight();int alpha = (int) (((float) t / headHeight) * 255);if (alpha >= 255)alpha = 255;if (alpha <= mSlop)alpha = 0;toolbar.getBackground().setAlpha(alpha);super.onScrollChanged(l, t, oldl, oldt);}
}

主要呢还是重写ScrollView，将需要变化的布局传递给他，然后重写ScrollView的onScrollChanged方法，里面的参数看看应该明白了，那是当前ScrollView的坐标距离顶部的top距离和左边left距离，和之前分析的一样，只不过getScrollY()的值变成了t而已，方法中的高度都给传给你了，那就更简单了。

---

来说说做的时候的误区和不解。
①、之前来改变这个透明度的时候我是重写了onTouchEvent方法，手指在滑动的时候来获取距离差来设置透明度，这样做确实是能做出来，但是在手指离开屏幕，scrollview还在滑动的时候，就不走move方法，这个比例值也就不再变化了，到达顶部的时候透明度都没有什么变化，所以，不能从这里入手，我上面说那位简书哥们给的方法，我体验的就是这样的，所以不是太好。
②、 mSlop=ViewConfiguration.get(context).getScaledDoubleTapSlop();
这个值好坑爹啊，之前看大神们写说是触动滑动事件最好是超过这个距离再来触发，我就用了这个，发现不对，log出来一下mSlop是300px,总共这个头部才没多少，所以就不用他了，直接自己定义为10px就差不多了，设这个主要是为了到达这个值的时候直接设置为全透明了，免得还要使劲滑到0才设置透明度的话，那样体验就不好了，给个缓冲值会更好点。
③、喜欢给距离设置dp的我也是醉了，200dp被我log出来是600,要好好注意点了，虽然这个没什么，不影响代码，但是还是要注意的。

实现淘宝和QQ ToolBar透明渐变效果

哎，好久都没写博客了，最近有点懒惰了，今天端午节，在学校也是无聊的蛋疼啊，正好今天玩玩一些在其他app中常见的一些功能。

---

来看看效果图吧！

这个是人家的图，我懒得自己弄一个，就copy他的了，顺便帮你宣传一下你的简书，不算为过吧^-^. sou，传送门
之前是在简书上面看了一篇实现的这种功能，他是重写CoordinatorLayout的Behavior类来达到效果，也确实理解到了CoordinatorLayout的强大之处啊，但是自己跟着他的效果走的时候 ，感觉好像不是太理想的样子。

---

今天我来自己 写个

来看看我的效果图：

哇塞，好牛逼的样子，额，其实也就那么回事。

来讲讲思路吧

草稿画。。。。这个应该看的懂吧，就是一些控件的分布

自己用画图软件画的，自己看的都心醉心醉的。

从图中我们应该就能了解到，其实这些好像就那么回事，拿到高度，然后设置透明度就行了，其实，是这个样子的

首先，我们要知道设置View的透明度的代码

toolbar.getBackground().setAlpha(Interger);

参数设置的是透明度的变化值为0~255，颜色数嘛是吧。

然后看看获取变化距离区间的代码

headHeight= headView.getMeasuredHeight()-toolbar.getMeasuredHeight();

这样，我们就拿到距离的代码了，现在两样都齐全了，怎样才能将他们关联起来呢，我们想想，当前滚动的ScrollView的Y值去减去这个headHeight，这个相差值只允许他在headHeight的高度去变化，如果ScrollView滑动的距离超出这个高度的话，那么我们直接设置alpha为255直接显示变透明，如果这个ScrollView滑动的到顶部时，我们直接设置alpha为0为透明，我们首先拿到这个变化的距离，然后去除以这个headHeight高度拿到这个百分比，然后去乘上255拿到同等比例中的透明度的值，记得这个数值都得是float类型，高度也是，要是int的话这样相除的话就变成0了。

alpha=((float)(getScrollY()-headHeight)/headHeight)*255

拿到这个透明度后就可以设置进去了，思路就是这么简单，现在来贴下代码。

MainActivity.class

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);AlphaTitleScrollView scroll = (AlphaTitleScrollView) findViewById(R.id.scrollview);LinearLayout title = (LinearLayout) findViewById(R.id.title);ImageView head = (ImageView) findViewById(R.id.head);scroll.setTitleAndHead(title, head);title.getBackground().setAlpha(0);}}

activity_main.xml

<RelativeLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent" ><view.AlphaTitleScrollView
        xmlns:android=""android:id="@+id/scrollview"android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayout
            android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><!--             显示的head为ImageView --><ImageView
                android:id="@+id/head"android:layout_width="match_parent"android:layout_height="500px"android:scaleType="fitXY"android:src="@drawable/a" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /><TextView
                android:layout_width="match_parent"android:layout_height="100dp"android:gravity="center"android:text="haha" /></LinearLayout></view.AlphaTitleScrollView>
<!-- title标题栏--><LinearLayout
        android:id="@+id/title"android:layout_width="match_parent"android:layout_height="50dp"android:background="#FCFCFC"android:gravity="center_vertical"android:orientation="horizontal" ><ImageView
            android:layout_width="20dp"android:layout_height="20dp"android:layout_marginLeft="20dp"android:gravity="center_vertical"android:src="@drawable/arrow"android:textColor="#fff" /></LinearLayout></RelativeLayout>

AlphaTitleScrollView.class

public class AlphaTitleScrollView extends ScrollView {public static final String TAG = "AlphaTitleScrollView";private int mSlop;private LinearLayout toolbar;private ImageView headView;public AlphaTitleScrollView(Context context, AttributeSet attrs,int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}public AlphaTitleScrollView(Context context, AttributeSet attrs) {this(context, attrs, 0);// TODO Auto-generated constructor stub}public AlphaTitleScrollView(Context context) {this(context, null);}private void init(Context context) {// mSlop = ViewConfiguration.get(context).getScaledDoubleTapSlop();mSlop = 10;Log.i(TAG, mSlop + "");}/*** * @param headLayout*            头部布局* @param imageview*            标题*/public void setTitleAndHead(LinearLayout toolbar, ImageView headView) {this.toolbar = toolbar;this.headView = headView;}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {float headHeight = headView.getMeasuredHeight()- toolbar.getMeasuredHeight();int alpha = (int) (((float) t / headHeight) * 255);if (alpha >= 255)alpha = 255;if (alpha <= mSlop)alpha = 0;toolbar.getBackground().setAlpha(alpha);super.onScrollChanged(l, t, oldl, oldt);}
}

主要呢还是重写ScrollView，将需要变化的布局传递给他，然后重写ScrollView的onScrollChanged方法，里面的参数看看应该明白了，那是当前ScrollView的坐标距离顶部的top距离和左边left距离，和之前分析的一样，只不过getScrollY()的值变成了t而已，方法中的高度都给传给你了，那就更简单了。

---

来说说做的时候的误区和不解。
①、之前来改变这个透明度的时候我是重写了onTouchEvent方法，手指在滑动的时候来获取距离差来设置透明度，这样做确实是能做出来，但是在手指离开屏幕，scrollview还在滑动的时候，就不走move方法，这个比例值也就不再变化了，到达顶部的时候透明度都没有什么变化，所以，不能从这里入手，我上面说那位简书哥们给的方法，我体验的就是这样的，所以不是太好。
②、 mSlop=ViewConfiguration.get(context).getScaledDoubleTapSlop();
这个值好坑爹啊，之前看大神们写说是触动滑动事件最好是超过这个距离再来触发，我就用了这个，发现不对，log出来一下mSlop是300px,总共这个头部才没多少，所以就不用他了，直接自己定义为10px就差不多了，设这个主要是为了到达这个值的时候直接设置为全透明了，免得还要使劲滑到0才设置透明度的话，那样体验就不好了，给个缓冲值会更好点。
③、喜欢给距离设置dp的我也是醉了，200dp被我log出来是600,要好好注意点了，虽然这个没什么，不影响代码，但是还是要注意的。

本文标签： 实现淘宝和QQ ToolBar透明渐变效果