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

简介: 哎,好久都没写博客了,最近有点懒惰了,今天端午节,在学校也是无聊的蛋疼啊,正好今天玩玩一些在其他app中常见的一些功能。来看看效果图吧!这个是人家的图,我懒得自己弄一个,就copy他的了,顺便帮你宣传一下你的简书,不算为过吧^-^. sou,传送门 之前是在简书上面看了一篇实现的这种功能,他是重写CoordinatorLayout的Behavior类来达到效果

哎,好久都没写博客了,最近有点懒惰了,今天端午节,在学校也是无聊的蛋疼啊,正好今天玩玩一些在其他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 {

    @Override
    protected 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="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <view.AlphaTitleScrollView
        xmlns:android="http://schemas.android.com/apk/res/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;
    }

    @Override
    protected 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,要好好注意点了,虽然这个没什么,不影响代码,但是还是要注意的。

目录
相关文章
|
5月前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
58 0
|
5月前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
64 0
|
JavaScript Serverless 容器
ue仿携程轮播图效果(滑动轮播,下方高度自适应)
这篇文章主要介绍了vue仿携程轮播图效果(滑动轮播,下方高度自适应),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
|
前端开发
不会photoshop? 也能用canvas把头像设计成彩虹色🌈
不会photoshop? 也能用canvas把头像设计成彩虹色🌈
182 0
|
Android开发
【Android】仿淘宝商品详情页面的下拉渐变
最近需要做一个和最新版淘宝相似的商品详情页。先看原版: 淘宝的版本 我实现的效果: 我的版本 因为单纯实现渐变功能,所以背景只用了一张尺寸较大的imageview。
2627 0
|
Android开发
【Android视图效果】仿QQ空间滑动改变标题栏颜色
最近在倒腾公司之前的项目,发现之前的界面是个白色标题栏,不是很美观,所以做了些改进。 先看效果图 165815uykp80g8y3goo5vz.gif 简单说下思路,整个布局大体上是ScrollView里面包含了一个ImageView和RecyclerView,所以先得到ImageView的高度,当ScrollView向上滑动时,设置标题栏的背景色、文字颜色,当超过ImageView的高度时,设置其背景为白色,字体为黑色。
1166 0
|
Android开发
Android 优化个人封装仿网易新闻可滑动标题栏 TabLayout (文字或图标)
      小菜在向朋友推荐了自己修改封装的仿网易顶部滑动标题栏 TabSlideLayout 滑动内容可以是文字也可以是网络图标,其原型为 FlycoTabLayout,但是因为年代很久远,小菜当时技术太渣,存在一些小问题,后期做过一些优化,今天趁机会整理一下。
3036 0
|
Android开发 Kotlin 数据格式
ScrollView滑动—仿微博主页标题栏渐变悬浮及Fragment实现多个内容页面切换
作为一名热爱学习的Android开发工程si,刷微博的时候居然还想着技术呢,觉得自己也是够够了........哈哈哈 image.png 进入今天的正题,微博主页大家肯定是看过的,先看一下微博的效果。
2008 0