自定义悬浮头部标题栏HeaderFloatTitle（支持背景／透明度／位移的变化）

最新推荐文章于 2024-06-08 13:31:15 发布
最新推荐文章于 2024-06-08 13:31:15 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： Android干货分享 文章标签： FloatTitle titleBar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/likuan0214/article/details/53187471
版权

最近两个月一直在做视频播放以及代码重构方面的事情，收获挺多，但是一直没有时间来总结一下。

效果图参考：这里写链接内容

此文就是对顶部标题栏的一个简单封装。

关键的几个方法：

1.设置需要监听的View的Y轴变化区间。（比如想监听一个图片从Y坐标100移动到－100过程中，顶部标题栏有颜色透明度变化，则可以在这个方法中设置setRange（100， －100）

/**
     * 设置变化区间Y值坐标
     * @param mRangeMax
     * @param mRangeMin
     * @return
     */
    public HeaderFloatTitle setRange(float mRangeMax, float mRangeMin){
        this.mRangeMax = mRangeMax;
        this.mRangeMin = mRangeMin;
        return this;
    }

2.设置起始终点颜色

    /**
     * 设置背景色变化范围
     * @param startColor 起始颜色
     * @param endColor 最终颜色
     * @return
     */
    public HeaderFloatTitle setBackgroundRangeColor(int startColor, int endColor){
        mStartColor = startColor;
        mEndColor = endColor;
        return this;
    }

3.添加子View，这些子View会随着监听View的位置变化而进行透明度的变幻

    /**
     * 添加Alpha由1-0的View
     * @param mStartView
     * @return
     */
    public HeaderFloatTitle addStartView(View mStartView){
        this.mStartView = mStartView;
        addView(mStartView, 0);
        return this;
    }

    /**
     * 添加Alpha由0-1的View
     * @param mEndView
     * @return
     */
    public HeaderFloatTitle addEndView(View mEndView){
        this.mEndView = mEndView;
        addView(mEndView, 1);
        return this;
    }

4.添加分割线，有时候UI可以想在标题栏底部加一条很细的线，可以调用此方法。

    /**
     * 添加底部分割线
     * @return
     */
    public HeaderFloatTitle addBottomSepLine(){
        mBottomSepLine = new View(getContext());
        mBottomSepLine.setBackgroundColor(Color.parseColor("#dddddd"));
        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, Local.dip2px(0.5f));
        params.gravity = Gravity.BOTTOM;
        mBottomSepLine.setLayoutParams(params);
        addView(mBottomSepLine);
        return this;
    }

5.下面两个方法是最重要的两个方法。

onDependentViewChanged用来设置监听View移动过程中的Y坐标，调用这个方法，可以实现标题栏的透明度／背景色／位移变化。

onDependentViewScrollChanged用来监听滚动过程中，控制头部悬浮栏显示隐藏。

    /**
     * 依赖的View位置发送变化时监听
     * @param dependY 顶部y坐标
     */
    public void onDependentViewChanged(float dependY){

        //纪录当前位置
        mDependY = dependY;

        float percent = getPercent(dependY);

        LogUtils.i_debug(TAG, "percent:" + percent + "   nowY:" + dependY + "   height:" + mHeight);

        loadAlpha(percent);

        loadBackgroundColor(percent);

        loadOffset(percent);

        showLine(percent);

    }


    /**
     * 依赖的View滚动时头部显示隐藏控制
     * @param dy
     */
    public void onDependentViewScrollChanged(float dy){
        loadScrollAnimate(dy);
    }

使用：

//在RecyclerView中，比如想监听头图ldv_head从完全显示到完全隐藏过程中titleBar有颜色透明度位移变化。
//当列表滚动时，控制titleBar的显示隐藏，则设置如下：
myRecyclerView.setScrollLinsteners(new RefreshRecyclerView.ScrollLinsteners() {
            @Override
            public void onScrolled(int firstVisibleItem, int dx, int dy) {
        if (mLayoutManager != null && mLayoutManager.findViewByPosition(0) != null) {
            View view = mLayoutManager.findViewByPosition(0);
            int ivH = view.findViewById(R.id.ldv_head).getHeight();
            int paddingBottom = view.findViewById(R.id.ldv_head).getPaddingBottom();
                int top = view.getTop();
            mHeaderFloatTitle.setHasOffset(false).setRange(0, -ivH + paddingBottom)；
            mHeaderFloatTitle.onDependentViewChanged(top);
        }else {
            mHeaderFloatTitle.onDependentViewScrollChanged(dy);
        }
}

在CoordinatorLayout中，也可以通过自定义Behavior来使用。比如：

headerFloatTitle.addStartView(rl_head_w);
            headerFloatTitle.addEndView(rl_head_b);
            headerFloatTitle.addBottomSepLine();
            headerFloatTitle.setHasScrollAnimate(false).setHasOffset(false).setHasAlpha(true);
            float image_hight = Local.getWidthPx() / 1.33f;
            headerFloatTitle.setRange(image_hight , 0);

……….

public class BrandDetailTitleBehavior extends CoordinatorLayout.Behavior<HeaderFloatTitle> {
    float height = Local.getWidthPx() / 1.33f;

    public BrandDetailTitleBehavior() {
    }

    public BrandDetailTitleBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, HeaderFloatTitle child, View dependency) {
//        child.setRange(200, 0);
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, HeaderFloatTitle child, View dependency) {
        child.onDependentViewChanged(dependency.getTop() + height);
        return super.onDependentViewChanged(parent, child, dependency);
    }
}

全部代码：

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ArgbEvaluator;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import com.loookapp.loook.Utils.Local;
import com.loookapp.loook.Utils.LogUtils;

/**
 * Created by lk on 16/11/11.
 *
 * 头部悬浮控件
 *
 */

public class HeaderFloatTitle extends FrameLayout {
    private static final String TAG = "HeaderFloatTitle";
    private final ArgbEvaluator mArgbEvaluator;//颜色估值器
    private float mRangeMax;//最大Y偏移量
    private float mRangeMin;//最小Y偏移量
    private float mDependY;//依赖控件Y的偏移量
    private int mStartColor;//开始颜色
    private int mEndColor;//最终颜色
    private View mStartView, mEndView;

    private boolean hasAlpha;//是否有alpha变化
    private boolean hasOffset;//是否有偏移变化
    private boolean hasScrollAnimate;//是否随着滚动而显示隐藏
    private boolean hasColor;//是否有颜色变化
    private boolean deleteTitleBarHeight;//计算range是否需要减去titlebar高度

    private boolean animateLoading;//动画进行中
    private float mHeight = -1;//自身高度
    private long animateDuration = 160; //动画执行时间
    private View mBottomSepLine;//分割线

    public HeaderFloatTitle(Context context) {
        this(context, null);
    }

    public HeaderFloatTitle(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HeaderFloatTitle(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mArgbEvaluator = new ArgbEvaluator();
        mStartColor = 0x00FFFFFF;
        mEndColor = 0xFFFFFFFF;
        hasAlpha = true;
        hasOffset = true;
        hasScrollAnimate = true;
        hasColor = true;
        deleteTitleBarHeight = true;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mHeight = getMeasuredHeight();
    }

    /**
     * 依赖的View位置发送变化时监听
     * @param dependY 顶部y坐标
     */
    public void onDependentViewChanged(float dependY){

        //纪录当前位置
        mDependY = dependY;

        float percent = getPercent(dependY);

        LogUtils.i_debug(TAG, "percent:" + percent + "   nowY:" + dependY + "   height:" + mHeight);

        loadAlpha(percent);

        loadBackgroundColor(percent);

        loadOffset(percent);

        showLine(percent);

    }


    /**
     * 依赖的View滚动时头部显示隐藏控制
     * @param dy
     */
    public void onDependentViewScrollChanged(float dy){
        loadScrollAnimate(dy);
    }


    /**
     * 判断是否显示线
     * @param percent
     */
    private void showLine(float percent) {
        if (mBottomSepLine != null) {
            if (percent < 1 && hasColor) {
                mBottomSepLine.setVisibility(GONE);
            } else {
                mBottomSepLine.setVisibility(VISIBLE);
            }
        }
    }

    private void loadOffset(float percent) {
        if(hasOffset){
            float outOfRangeDy;
            if(percent == 1) {
                outOfRangeDy = mDependY - mRangeMin - mHeight;//超出的dy
            }else{
                outOfRangeDy = 0;
            }
            LogUtils.i_debug(TAG, "outOfRangeDy:" + outOfRangeDy + "   height:" + mHeight);
            animate().translationY(outOfRangeDy).setDuration(0).start();
        }
    }

    private void loadScrollAnimate(float dy) {
        LogUtils.i_debug(TAG, "mDependY:" + mDependY + "   mRangeMin:" + mRangeMin);
        LogUtils.i_debug(TAG, "hasScrollAnimate:" + hasScrollAnimate + " dy" + dy);
        if(hasScrollAnimate && !animateLoading){// mDependY < mRangeMin &&
            //位置移动
            if (dy < -10 && getTranslationY() != 0) {
                animate().translationY(0).setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        super.onAnimationStart(animation);
                        animateLoading = true;
                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        animateLoading = false;
                    }
                }).setDuration(animateDuration).start();
            } else if (dy > 10 && getTranslationY() != -mHeight) {
                animate().translationY(-mHeight).setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        super.onAnimationStart(animation);
                        animateLoading = true;
                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        animateLoading = false;
                    }
                }).setDuration(animateDuration).start();
            }
        }
    }

    private void loadBackgroundColor(float percent) {
        if(hasColor){
            int bgColor = getBackgroundColor(percent);
            setBackgroundColor(bgColor);
        }else {
            setBackgroundColor(mEndColor);
        }
    }

    private int getBackgroundColor(float percent){
        return (int) mArgbEvaluator.evaluate(percent, mStartColor, mEndColor);
    }

    private void loadAlpha(float percent) {
        if(hasAlpha) {
            if(mStartView != null) {
                mStartView.setAlpha(1 - percent);//1~0 start
            }

            if(mEndView != null) {
                mEndView.setAlpha(percent); //0~1 end
            }
        }
    }

    /**
     * 获取当前百分比
     * @param dependY
     * @return
     */
    private float getPercent(float dependY){
        if(dependY > mRangeMax)return 0;
        if(dependY < mRangeMin + mHeight)return 1;

        float range = getRange();
        float now = dependY - mRangeMin;
        if (deleteTitleBarHeight) {
            now -= mHeight;
        }
        //max >= dy >= min;
        float percent = (range != 0) ? (1 - Math.abs(now / range)) : 0;//0~1
        percent = percent > 1 ? 1 : (percent < 0 ? 0 : percent);
        return percent;
    }


    /**
     * 获取颜色或alpha变化的dy范围
     * @return
     */
    private float getRange(){
        float range = mRangeMax - mRangeMin;
        if(deleteTitleBarHeight && range > mHeight){
            range -= mHeight;
        }else {
            hasOffset = false;
        }
        return range;
    }


    /**
     * 添加Alpha由1-0的View
     * @param mStartView
     * @return
     */
    public HeaderFloatTitle addStartView(View mStartView){
        this.mStartView = mStartView;
        addView(mStartView, 0);
        return this;
    }

    /**
     * 添加Alpha由0-1的View
     * @param mEndView
     * @return
     */
    public HeaderFloatTitle addEndView(View mEndView){
        this.mEndView = mEndView;
        addView(mEndView, 1);
        return this;
    }

    /**
     * 添加底部分割线
     * @return
     */
    public HeaderFloatTitle addBottomSepLine(){
        mBottomSepLine = new View(getContext());
        mBottomSepLine.setBackgroundColor(Color.parseColor("#dddddd"));
        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, Local.dip2px(0.5f));
        params.gravity = Gravity.BOTTOM;
        mBottomSepLine.setLayoutParams(params);
        addView(mBottomSepLine);
        return this;
    }

    /**
     * 子View是否进行alpha变化
     * @param hasAlpha
     * @return
     */
    public HeaderFloatTitle setHasAlpha(boolean hasAlpha) {
        this.hasAlpha = hasAlpha;
        return this;
    }

    /**
     * 是否随着位置移动改变floatTitle的位置
     * @param hasOffset
     * @return
     */
    public HeaderFloatTitle setHasOffset(boolean hasOffset) {
        this.hasOffset = hasOffset;
        return this;
    }


    /**
     * 滚动时是否加载显示隐藏动画
     * @param hasScrollAnimate
     * @return
     */
    public HeaderFloatTitle setHasScrollAnimate(boolean hasScrollAnimate) {
        this.hasScrollAnimate = hasScrollAnimate;
        return this;
    }

    /**
     * 设置是否有颜色变化
     * @param hasColor
     * @return
     */
    public HeaderFloatTitle setHasColor(boolean hasColor) {
        this.hasColor = hasColor;
        return this;
    }

    /**
     * 是否去除titleBar高度
     * @param deleteTitleBarHeight
     * @return
     */
    public HeaderFloatTitle setDeleteTitleBarHeight(boolean deleteTitleBarHeight){
        this.deleteTitleBarHeight = deleteTitleBarHeight;
        return this;
    }

    /**
     * 设置变化区间Y值坐标
     * @param mRangeMax
     * @param mRangeMin
     * @return
     */
    public HeaderFloatTitle setRange(float mRangeMax, float mRangeMin){
        this.mRangeMax = mRangeMax;
        this.mRangeMin = mRangeMin;
        return this;
    }

    /**
     * 设置背景色变化范围
     * @param startColor 起始颜色
     * @param endColor 最终颜色
     * @return
     */
    public HeaderFloatTitle setBackgroundRangeColor(int startColor, int endColor){
        mStartColor = startColor;
        mEndColor = endColor;
        return this;
    }
}
飞鸟_
关注
专栏目录
自定义并美化Header部分的内容输出
剑胆琴心-.Net 学习笔记
07-29 711
自由控制页面Head中的内容
Android给RecyclerView添加头（Header）和尾（Footer）和分标题（Title）——最简单的两种方法
qq_36523667的博客
11-30 5786
给RecyclerView添加头和尾的方法很多，这里写两种最简单的方法。 1.控制布局 显隐 xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" andro
ListViewAnimateHeaderView:通过ListView动态显示Header布局
05-09
ListViewAnimateHeaderView 通过ListView动态显示Header布局 布局： 1.LinearLayout LinearLayout ListView 这个是我实现的一个效果，见动画图。 当ListView在最顶端时，滑动ListView，会促发LinearLayout的高度变化。
UITableView滚动时动态改变Header的背景色
soindy
10-15 1957
实现网易云音乐最近播放列表,tableView滚动时动态改变Header的背景.折叠的时候背景加深.
java 自定义headers_自定义闪亮的 Headers 栏
weixin_30213477的博客
02-13 568
我正在尝试自定义一个闪亮的页面 .My question ：如何更改完整 Headers 栏和标签的颜色 .下面描述了我想要获得的内容以及我尝试过的内容(我在下面的示例中添加了一些不同的内容，以防任何这些因素对自定义方法产生负面影响) .所以主要的突出问题是颜色定制 - 请参见下图 . Headers 文本和背景颜色已更改，但颜色的变化不会延伸到整个 Headers 栏(中间仍为灰色) . 未选...
html css 悬浮切换效果,CSS3悬浮动画效果_html/css_WEB-ITnose
weixin_33341108的博客
06-03 582
利用CSS3的伪类元素hover以及transform，transition等动画属性，可以做出一些炫酷的动画效果。下面将一些项目中使用到的示例发布出来，供大家一起学习研究。演示地址：runjs。浏览器兼容：Chrome，Safari，IE10及以上，IE9不支持渐变效果，IE8以下不支持。transform：该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translat...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6447
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
黑色图标导航悬停高亮css3特效
07-24
`:hover`伪类在鼠标指针浮动在元素上方时激活，常用于改变背景色、边框或透明度，以创建悬停效果。 接下来，CSS3的转换（Transforms）和过渡（Transitions）是实现悬停高亮的关键。转换允许元素在二维或三维空间内...
QMUI Android
qinchun_long的博客
09-25 1082
项目地址 https://github.com/Tencent/QMUI_Android Components Classes QMUIAnimationListView 使ListView支持添加/删除 Item 的动画，支持自定义动画效果。 QMUIBottomSheet 在Dialog的基础上重新定制了show()和hide()时的动画效果, 使Dialog在界面底部升起和降下。提供了以下两个面板样式： 列表样式：使用QMUIBottomSheet.Botto...
css常见属性(Base)
最新发布
weixin_48109382的博客
06-08 712
该小节主要介绍css常用属性，如字体属性(含特殊字体使用步骤及字体商用问题)、文本属性、背景属性(含精灵图)、列表属性、边框属性、鼠标属性、滚动条属性、颜色表示法(单词,rgb,十六进制,rgba,HSLA)、滤镜及图标库的使用(含SVG的使用)
header背景透明，文字不透明，背景加投影
st187187的专栏
01-30 1603
.header { background:rgba(255, 255, 255, 0.9) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/                      filter:Alpha(opacity=90);background:#FFF; /*实现IE背景透明                     width
bootsrap解决悬浮层（悬浮header、footer）会遮挡住内容的方法
QC班长的博客
07-21 8425
固定Footer Bootstrap框架提供了两种固定导航条的方式：    ☑  .navbar-fixed-top：导航条固定在浏览器窗口顶部    ☑  .navbar-fixed-bottom：导航条固定在浏览器窗口底部 使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可： 　 实现原理： 实现原理很简单，就是在navbar-
vue中，让网页标题（header中的title）动起来
ddx2019的博客
03-08 1398
组件中的js部分： <script> export default{ data(){ return { tit:document.title } }, mounted () { this.TitleScrolling() }, me...
php 引用header文件 如何改title_前端工程师如何持续保持热情
weixin_39895486的博客
12-03 523
对于一种事情，经常重复的话，很容易就会厌烦、觉得无趣、失去了当初的热情。做不完的业务需求，日复一日，就觉得工作乏味、都是体力活；c端做多了，就觉得业务逻辑没有挑战性，没意思，设计要求苛刻，特别烦；b端做多了，就觉得天天写平台，天天对着无味的数据，没机会玩一下炫酷的特效；技术建设做多了，看着自己做的东西都腻了；研究一些花哨的东西，又对工作内容没有什么意义；想用一下最新技术，然而项目历史原因又望洋兴叹...
CoordinatorLayout，AppBarLayout嵌套TabLayout实现滑动时标题栏隐藏，tab栏固定顶端
qq1377399077的专栏
11-03 2978
CoordinatorLayout： 使用CoordinatorLayout需要在Gradle加入Support Design Library：compile 'com.android.support:design:2X.X.X'
【android】仿知乎ScrollView滚动改变标题栏透明度
findsafety的专栏
06-14 4609
刷知乎的时候看到，专题栏里面 往下滚动标题栏会由透明逐渐变蓝色，觉得这个效果不错，就想自己写一下 这是自己实现的效果图： 说下实现思路： 1、先获取顶部图片的高度height，这个有3种方式获取，我用的是监听onGlobalLayout方法的回调 2、监听scrollview的滚动坐标，原生的没有这个监听，需要我们自己写个view继承scrollview
从零开始前端学习[26]:html5的一些常用标签，header,footer,section,aside,figure,figcaption,nav,artical,
章飞 _906285288的博客
09-27 7436
html5的一些常用标签 HTML5简介 语义化标签(header,section,nav,article,figure,figcaption,aside，footer) 提示: 博主:章飞_906285288 http://blog.csdn.net/qq_29924041 一:HTML5简介万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改，所
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值