Android沉浸式状态栏 + actionBar透明渐变 + scrollView顶部伸缩

最新推荐文章于 2021-08-07 17:20:17 发布
最新推荐文章于 2021-08-07 17:20:17 发布
阅读量6.8k 收藏 14
点赞数 4
分类专栏： 个人 文章标签： android沉浸式 伸缩scrollview actionBar渐变 toolbar渐变
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanjunhui2011/article/details/55190456
版权

闲话不多说，直接上图。

 

如果只是在项目中使用，不需要关心实现，直接访问GitHub即可。

GitHub地址：https://github.com/yanjunhui2014/TranslucentScrollView

 

如果对编程思想想要了解的，请继续往下读。

 

第一部分：沉浸式状态栏（API-Level 19, Android4.4 KitKat 之后加入的东西），而且在Api-Level 21版本中新增了一个属性（下面会说到）。所以，style文件应该声明三份。

 

 

 

values

 

<style name="TranslucentTheme" parent="@style/AppTheme">
</style>

 

values-19

 

<style name="TranslucentTheme" parent="@style/AppTheme">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">false</item>
</style>

 

values-V21

 

<style name="TranslucentTheme" parent="@style/AppTheme">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <!-- v-21 中新增的属性 -->
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

 

 

至于以上属性的含义及使用方式，就不多做解释了。详细可参见 http://blog.csdn.net/fan7983377/article/details/51604657

 

第二部分：actionBar渐变

 

因为要实现actionBar渐变，所以我没有使用系统的actionBar。而是自定义了一个继承自LinearLayout的ViewGroup。

直接给各位看代码

 

package test.com.widget;

import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import test.com.R;
import test.com.impl.ActionBarClickListener;

/**
 * 支持渐变的 actionBar
 * Created by 晖仔(Milo) on 2016/12/28.
 * email:303767416@qq.com
 */

public final class TranslucentActionBar extends LinearLayout {

    private View layRoot;
    private View vStatusBar;
    private View layLeft;
    private View layRight;
    public TextView tvTitle;
    private TextView tvLeft;
    private TextView tvRight;
    private View iconLeft;
    private View iconRight;

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

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

    public TranslucentActionBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        setOrientation(HORIZONTAL);
        View contentView = inflate(getContext(), R.layout.actionbar_trans, this);
        layRoot = contentView.findViewById(R.id.lay_transroot);
        vStatusBar = contentView.findViewById(R.id.v_statusbar);
        tvTitle = (TextView) contentView.findViewById(R.id.tv_actionbar_title);
        tvLeft = (TextView) contentView.findViewById(R.id.tv_actionbar_left);
        tvRight = (TextView) contentView.findViewById(R.id.tv_actionbar_right);
        iconLeft = contentView.findViewById(R.id.iv_actionbar_left);
        iconRight = contentView.findViewById(R.id.v_actionbar_right);
    }

    /**
     * 设置状态栏高度
     *
     * @param statusBarHeight
     */
    public void setStatusBarHeight(int statusBarHeight) {
        ViewGroup.LayoutParams params = vStatusBar.getLayoutParams();
        params.height = statusBarHeight;
        vStatusBar.setLayoutParams(params);
    }

    /**
     * 设置是否需要渐变
     */
    public void setNeedTranslucent() {
        setNeedTranslucent(true, false);
    }

    /**
     * 设置是否需要渐变,并且隐藏标题
     *
     * @param translucent
     */
    public void setNeedTranslucent(boolean translucent, boolean titleInitVisibile) {
        if (translucent) {
            layRoot.setBackgroundDrawable(null);
        }
        if (!titleInitVisibile) {
            tvTitle.setVisibility(View.GONE);
        }
    }

    /**
     * 设置标题
     *
     * @param strTitle
     */
    public void setTitle(String strTitle) {
        if (!TextUtils.isEmpty(strTitle)) {
            tvTitle.setText(strTitle);
        } else {
            tvTitle.setVisibility(View.GONE);
        }
    }

    /**
     * 设置数据
     *
     * @param strTitle
     * @param resIdLeft
     * @param strLeft
     * @param resIdRight
     * @param strRight
     * @param listener
     */
    public void setData(String strTitle, int resIdLeft, String strLeft, int resIdRight, String strRight, final ActionBarClickListener listener) {
        if (!TextUtils.isEmpty(strTitle)) {
            tvTitle.setText(strTitle);
        } else {
            tvTitle.setVisibility(View.GONE);
        }
        if (!TextUtils.isEmpty(strLeft)) {
            tvLeft.setText(strLeft);
            tvLeft.setVisibility(View.VISIBLE);
        } else {
            tvLeft.setVisibility(View.GONE);
        }
        if (!TextUtils.isEmpty(strRight)) {
            tvRight.setText(strRight);
            tvRight.setVisibility(View.VISIBLE);
        } else {
            tvRight.setVisibility(View.GONE);
        }

        if (resIdLeft == 0) {
            iconLeft.setVisibility(View.GONE);
        } else {
            iconLeft.setBackgroundResource(resIdLeft);
            iconLeft.setVisibility(View.VISIBLE);
        }

        if (resIdRight == 0) {
            iconRight.setVisibility(View.GONE);
        } else {
            iconRight.setBackgroundResource(resIdRight);
            iconRight.setVisibility(View.VISIBLE);
        }

        if (listener != null) {
            layLeft = findViewById(R.id.lay_actionbar_left);
            layRight = findViewById(R.id.lay_actionbar_right);
            layLeft.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    listener.onLeftClick();
                }
            });
            layRight.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    listener.onRightClick();
                }
            });
        }
    }

}

 

 

下面是actionbar_trans.xml的代码

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lay_transroot"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="vertical">

    <View
        android:id="@+id/v_statusbar"
        android:layout_width="match_parent"
        android:layout_height="1.0dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/lay_actionbar_left"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/iv_actionbar_left"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:background="@mipmap/ic_left_light"
                android:visibility="gone" />

            <TextView
                android:id="@+id/tv_actionbar_left"
                style="@style/text_white"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@+id/iv_actionbar_left"
                android:gravity="center_vertical"
                android:maxLength="2"
                android:singleLine="true"
                android:text="返回"
                android:visibility="gone" />
        </RelativeLayout>

        <TextView
            android:id="@+id/tv_actionbar_title"
            style="@style/text_white"
            android:layout_centerInParent="true"
            android:text="标题"
            android:textSize="16sp" />

        <RelativeLayout
            android:id="@+id/lay_actionbar_right"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:gravity="right"
            android:orientation="horizontal">

            <View
                android:id="@+id/v_actionbar_right"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:visibility="gone" />

            <TextView
                android:id="@+id/tv_actionbar_right"
                style="@style/text_white"
                android:layout_height="match_parent"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/v_actionbar_right"
                android:gravity="center_vertical|right"
                android:singleLine="true"
                android:visibility="gone" />
        </RelativeLayout>

    </RelativeLayout>
</LinearLayout>


这里我即没有用到 android:fitsSystemWindows="true" 属性，也没有用到 StatusBarUtils ，因为我发现使用的时候很容易造成兼容问题。

 

所以，我的做法是声明了一个高度为0.0dp的 statusbar，背景为透明，然后获取状态栏高度并赋值到它上，来实现兼容。事实证明，这样做的兼容效果最好。

 

获取状态栏高度代码：

 

    /**
     * 获取状态栏高度
     *
     * @return
     */
    public int getStatusBarHeight() {
        //获取status_bar_height资源的ID
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            //根据资源ID获取响应的尺寸值
            return getResources().getDimensionPixelSize(resourceId);
        }
        return 0;
    }


设置 statusbar高度：

 

 

    /**
     * 设置状态栏高度
     *
     * @param statusBarHeight
     */
    public void setStatusBarHeight(int statusBarHeight) {
        ViewGroup.LayoutParams params = vStatusBar.getLayoutParams();
        params.height = statusBarHeight;
        vStatusBar.setLayoutParams(params);
    }


开启渐变：

 

 

  /**
     * 设置是否需要渐变
     */
    public void setNeedTranslucent() {
        setNeedTranslucent(true, false);
    }

    /**
     * 设置是否需要渐变,并且隐藏标题
     *
     * @param translucent
     */
    public void setNeedTranslucent(boolean translucent, boolean titleInitVisibile) {
        if (translucent) {
            layRoot.setBackgroundDrawable(null);
        }
        if (!titleInitVisibile) {
            tvTitle.setVisibility(View.GONE);
        }
    }

 

 

 

 

 

第三步：实现ScrollView顶部伸缩

到了这里，必须得说一下，因为是个人项目中用到，所以并没有把功能做的很强大，本人都是以最简单、有效的方式实现的。所以，代码并不像gitHub上那些被下载很多次的开源项目一样，有很高的扩展性。

时间关系，我直接贴代码吧，代码里我都写了注释的。

 

package test.com.widget;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
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.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ScrollView;

import test.com.R;
import test.com.utils.SizeUtils;

/**
 * Created by 晖仔(Milo) on 2017/2/13.
 * email:303767416@qq.com
 */

public class TranslucentScrollView extends ScrollView {

    static final String TAG = "TranslucentScrollView";

    //伸缩视图
    private View zoomView;
    //伸缩视图初始高度
    private int zoomViewInitHeight = 0;
    // 记录首次按下位置
    private float mFirstPosition = 0;
    // 是否正在放大
    private Boolean mScaling = false;

    //渐变的视图
    private View transView;
    //渐变颜色
    private int transColor = Color.WHITE;
    //渐变开始位置
    private int transStartY = 50;
    //渐变结束位置
    private int transEndY = 300;

    //渐变开始默认位置，Y轴，50dp
    private final int DFT_TRANSSTARTY = 50;
    //渐变结束默认位置，Y轴，300dp
    private final int DFT_TRANSENDY = 300;

    private TranslucentScrollView.TranslucentChangedListener translucentChangedListener;

    public interface TranslucentChangedListener {
        /**
         * 透明度变化，取值范围0-255
         *
         * @param transAlpha
         */
        void onTranslucentChanged(int transAlpha);
    }

    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);
    }

    public void setTranslucentChangedListener(TranslucentScrollView.TranslucentChangedListener translucentChangedListener) {
        this.translucentChangedListener = translucentChangedListener;
    }

    /**
     * 设置伸缩视图
     *
     * @param zoomView
     */
    public void setPullZoomView(View zoomView) {
        this.zoomView = zoomView;
        zoomViewInitHeight = zoomView.getLayoutParams().height;
        if (zoomViewInitHeight == LayoutParams.MATCH_PARENT || zoomViewInitHeight == WindowManager.LayoutParams.WRAP_CONTENT) {
            zoomView.post(new Runnable() {
                @Override
                public void run() {
                    zoomViewInitHeight = TranslucentScrollView.this.zoomView.getHeight();
                }
            });
        }
    }

    /**
     * 设置渐变视图
     *
     * @param transView 渐变的视图
     */
    public void setTransView(View transView) {
        setTransView(transView, getResources().getColor(R.color.colorPrimary), SizeUtils.dip2px(getContext(), DFT_TRANSSTARTY), SizeUtils.dip2px(getContext(), DFT_TRANSENDY));
    }

    /**
     * 设置渐变视图
     *
     * @param transView  渐变的视图
     * @param transColor 渐变颜色
     * @param transEndY  渐变结束位置
     */
    public void setTransView(View transView, @ColorInt int transColor, int transStartY, int transEndY) {
        this.transView = transView;
        //初始视图-透明
        this.transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, 0));
        this.transStartY = transStartY;
        this.transEndY = transEndY;
        this.transColor = transColor;
        if (transStartY > transEndY) {
            throw new IllegalArgumentException("transStartY 不得大于 transEndY .. ");
        }
    }

    /**
     * 获取透明度
     *
     * @return
     */
    private int getTransAlpha() {
        float scrollY = getScrollY();
        if (transStartY != 0) {
            if (scrollY <= transStartY) {
                return 0;
            } else if (scrollY >= transEndY) {
                return 255;
            } else {
                return (int) ((scrollY - transStartY) / (transEndY - transStartY) * 255);
            }
        } else {
            if (scrollY >= transEndY) {
                return 255;
            }
            return (int) ((transEndY - scrollY) / transEndY * 255);
        }
    }

    /**
     * 重置ZoomView
     */
    private void resetZoomView() {
        final ViewGroup.LayoutParams lp = zoomView.getLayoutParams();
        final float h = zoomView.getLayoutParams().height;// ZoomView当前高度

        // 设置动画
        ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration(200);

        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float cVal = (Float) animation.getAnimatedValue();
                lp.height = (int) (h - (h - zoomViewInitHeight) * cVal);
                zoomView.setLayoutParams(lp);
            }
        });
        anim.start();
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        int transAlpha = getTransAlpha();

        if (transView != null) {
            Log.d(TAG, "[onScrollChanged .. in ], 透明度 == " + transAlpha);
            transView.setBackgroundColor(ColorUtils.setAlphaComponent(transColor, transAlpha));
        }
        if (translucentChangedListener != null) {
            translucentChangedListener.onTranslucentChanged(transAlpha);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (zoomView != null) {
            ViewGroup.LayoutParams params = zoomView.getLayoutParams();
            switch (event.getAction()) {
                case MotionEvent.ACTION_UP:
                    //手指离开后恢复图片
                    mScaling = false;
                    resetZoomView();
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (!mScaling) {
                        if (getScrollY() == 0) {
                            mFirstPosition = event.getY();
                        } else {
                            break;
                        }
                    }

                    int distance = (int) ((event.getY() - mFirstPosition) * 0.6);
                    if (distance < 0) {
                        break;
                    }
                    mScaling = true;
                    params.height = zoomViewInitHeight + distance;

                    Log.d(TAG, "params.height == " + params.height + ", zoomViewInitHeight == " + zoomViewInitHeight + ", distance == " + distance);
                    zoomView.setLayoutParams(params);
                    return true;
            }
        }

        return super.onTouchEvent(event);
    }

}

 

 

 

 

原创不易，转载请附上本文地址：

 

 

 

yanjunhui2011
关注
专栏目录
干货分享：Android沉浸式状态栏 + scrollView顶部伸缩 + actionBar渐变
粉丝交流群：569545109
04-30 350
最近需求要做一个拉缩渐变的状态栏，往上拉的时候，需要显示actionBar，这个过程是渐变的，顶部的图片背景能实现拉缩，并且还要实现状态栏沉浸式 效果如如下： 实现状态栏的透明化 实现ScrollView的拉缩 实现ActionBar的渐变 实现 1、至于试下实现ScrollView的拉缩这个效果很简单重写onTouchEvent方法，利用滑动的垂直方向的距离，然后在设置图片的大小 ...
android 仿京东，滚动屏幕标题栏渐变+（启动页面动画）
03-17
在Android中，标题栏通常由ActionBar或者Toolbar来实现，但为了达到京东App那种平滑的渐变效果，我们需要自定义一个ScrollView。在ScrollView中，我们可以监听用户的滚动事件，通过`OnScrollChangeListener`接口，当...
Android 沉浸式状态栏，状态栏透明，实现渐变状态栏
12-26
Android 沉浸式状态栏，状态栏透明，补足隐藏状态栏所消失的高度，实现渐变状态栏
Android实现状态栏(statusbar)渐变效果
唐诺
05-06 1030
1、定义渐变资源文件bg_title_gradient.xml： <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient ...
android顶部菜单伸缩,Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩效果
weixin_39688019的博客
05-26 538
闲话不多说，直接上图。给大家讲讲我的编程思想吧。第一部分：沉浸式状态栏(API-Level 19, Android4.4 KitKat 之后加入的东西)，而且在Api-Level 21版本中新增了一个属性(下面会说到)。所以，style文件应该声明三份。valuesvalues-19truefalsevalues-V21truefalse@android:color/transparent第二部分...
Android设置背景图延伸到状态栏
逍遥阁
06-02 4227
1、在Activity onCreate方法中设置以下代码： if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { //5.0 全透明实现 //getWindow.setStatusBarColor(Color.TRANSPARENT) Window window = getWindow(); window.clearFlags(Win
Android实现状态栏(statusbar)渐变效果的示例
08-29
本篇文章主要介绍了Android实现状态栏(statusbar)渐变效果的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩
02-15
在Android应用开发中，我们经常追求提供更为沉浸式的用户体验，其中“Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩”是一个常见的设计模式，它能够使应用界面更美观、更具现代感。以下是对这个主题的...
Android_设置透明ActionBar
西野奈留 的博客
09-27 3569
8位的颜色定义
Android颜色渐变的顶部分页兰
02-10
支持颜色渐变的顶部分页兰，可用于项目开发，博客链接http://blog.csdn.net/qmln31821007/article/details/43700151
android 自定义ScrollView实现背景图片伸缩的实现代码及思路
09-05
本文纯属个人见解，是对前面学习的总结，如有描述不正确的地方还请高手指正~,首先还是按照通例给大家看下示例.
ScrollView 透明 Actionbar
daditao的专栏
12-10 1097
NotifyingScrollView package com.app.lx.actionbar; import android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; public class NotifyingScrollView extends Sc
Android 让actionBar透明，让状态栏透明
weixin_42975688的博客
08-07 618
Android 让actionBar透明，让状态栏透明 先让整个页面全屏显示（这个很重要） 活动加载的java里面写这个 @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if(hasFocus){ View decorView = getWindow().getDecorView();
android开发让 actionbar 透明
qq_30636613的博客
08-21 1508
让 actionbar 的背景 透明 我需要一个 透明的actionbar ，找到如下方法实现： 1. 首先，设置ActionBar 浮动到主界面上来。 2. 然后，设置ActionBar的背景色，透明或者半透明。   那么如何实现这两步呢？ 第一步： 代码实现： 在oncreate中：getWindow().requestFeature(Window.F
android 状态栏透明， actionbar透明
az44yao的专栏
01-07 606
不考虑兼容问题，可通过定义样式实现 效果： 1.状态栏透明 https://blog.csdn.net/zephyr_g/article/details/53489320?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommen.
Android实现ScrollView顶部布局上滑缩小，下滑恢复
yanjunhui2011的专栏
10-18 7180
废话不多说，先上效果图： 代码实现也比较简易，我写了一个类继承了ScrollView，并重写onTouchEvent以支持头部布局的变化。 当然，这么做需要手动关联一下 头布局、图片。 上核心代码： package com.jh.customscroll; import android.content.Context; import android.uti
实战Android 上推下拉——隐藏、显示ActionBar
weixin_34056162的博客
12-26 756
在很多的APP设置中都会有：根据用户的手势上推或下拉页面列表，然后隐藏或显示ActionBar。这样子可以提供用户一个更加友好的界面，增强用户体验。 实践界面效果图： 这里刚刚开始的时候actionbar是全部显示的，随着列表慢慢往上推，actionbar渐渐隐藏，下拉的时候渐渐显示出来。给用户更加友好的视觉效果。 自定义ScrollView MyScrollView public class...
自定义透明背景的Actionbar
来啊 快活啊
06-14 2127
想做一个ActionBar背景透明的效果，找了很多资料发现都没有实际用途，但最终还是实现了。效果图 首先是自定义一个Actionbar的style
Android沉浸式状态栏+actionBar渐变与scrollView顶部伸缩效果实战
本文将深入探讨Android开发中的三个关键特性：沉浸式状态栏、actionBar渐变以及scrollView顶部的伸缩效果，这些效果在诸如QQ好友动态页面等应用中常见。首先，我们从API Level 19（Android 4.4 KitKat）开始，沉浸式...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值