美文网首页
Android通用透明/沉浸式状态栏

Android通用透明/沉浸式状态栏

作者: _李沉舟 | 来源:发表于2017-09-08 16:47 被阅读152次

1. 话不多说,先上图,有需要再往下看

  • 对于沉浸式的说法是不准确,具体可以去百度

1. 状态栏颜色与标题栏颜色一致

Title.gif

2. 滑动渐变标题栏

scrolltitle.gif

2. 说说大概写法

1. Demo 整体是基于 github 上的开源框架

  1. compile 'com.roughike:bottom-bar:2.3.1'

  2. compile 'com.youth.banner:banner:1.4.10'

  3. 用法什么的,网站上面写的很清楚了,有不懂的可以共同探讨

2. 具体实现:标题栏

  1. 标题栏使用的是 Material Design 风格的 ToolBar

  2. 使用 ToolBar,我们需要隐藏原来的 ActionBar

  3. AndroidManifest.xml 中修改:

     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
     </style>
    
  4. 项目中标题栏样式大部分是可以使用公共的布局

     <?xml version="1.0" encoding="utf-8"?>
     <android.support.v7.widget.Toolbar
         xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:background="#3f51b4"
         >
     
         <RelativeLayout
             android:id="@+id/mLeftAction"
             android:layout_width="50dp"
             android:layout_height="50dp"
             android:layout_centerVertical="true"
             android:background="?attr/selectableItemBackground"
             android:visibility="visible"
             >
     
             <ImageView
                 android:id="@+id/mLeftImg"
                 android:layout_width="30dp"
                 android:layout_height="30dp"
                 android:layout_centerInParent="true"
                 android:src="@drawable/back"
                 android:visibility="gone"
                 />
     
             <TextView
                 android:id="@+id/mLeftLabel"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_centerInParent="true"
                 android:text="关闭"
                 android:textColor="#ffffff"
                 android:visibility="gone"
                 />
     
         </RelativeLayout>
     
         <TextView
             android:id="@+id/mMiddleLabel"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerInParent="true"
             android:layout_gravity="center_horizontal"
             android:layout_marginTop="12dp"
             android:gravity="center"
             android:singleLine="true"
             android:text="@string/app_name"
             android:textColor="#ffffff"
             android:textSize="18sp"
             />
     
         <RelativeLayout
             android:id="@+id/mRightAction"
             android:layout_width="wrap_content"
             android:layout_height="match_parent"
             android:layout_alignParentRight="true"
             android:background="?attr/selectableItemBackground"
             android:paddingLeft="15dp"
             android:paddingRight="15dp"
             android:visibility="visible"
             >
     
             <ImageView
                 android:id="@+id/mRightImg"
                 android:layout_width="28dp"
                 android:layout_height="28dp"
                 android:layout_centerInParent="true"
                 android:layout_centerVertical="true"
                 android:scaleType="centerCrop"
                 android:src="@drawable/setting"
                 android:visibility="gone"
                 />
     
             <TextView
                 android:id="@+id/mRightLabel"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_centerInParent="true"
                 android:text="余额说明"
                 android:textColor="#ffffff"
                 android:textSize="16sp"
                 android:visibility="gone"
                 />
     
         </RelativeLayout>
     </android.support.v7.widget.Toolbar>
    
  5. 有特殊样式的标题栏,使用 ToolBar 自己定制,比如搜索首页

3. 具体实现:透明状态栏

  1. 最开始的做法就是去掉状态栏,然后給状态栏的添加一个 View,View 的背景色设置和 TitleBar 的颜色一致,可以达到要求的效果

  2. 但是,以上做法并不适用于 状态栏+标题栏 滑动渐变的效果

  3. so so 在网上搜了 N 多资料,整合后达到了这一效果(站在巨人的肩膀上)

  4. 具体资料出自哪里,已经记不起来了,如果有侵权的话,@我 删除

  5. 具体用法很简单,只用传入一个当前页面的 ToolBar 对象即可:


    w.png
  6. StatusBarUtil 关键代码:

     /** 增加View的paddingTop,增加的值为状态栏高度 (智能判断,并设置高度)*/
     public static void setPaddingSmart(Context context, View view) {
         if (Build.VERSION.SDK_INT >= 16) {
             ViewGroup.LayoutParams lp = view.getLayoutParams();
             if (lp != null && lp.height > 0) {
                 lp.height += getStatusBarHeight(context);//增高
             }
             view.setPadding(view.getPaddingLeft(), view.getPaddingTop() + getStatusBarHeight(context),
                     view.getPaddingRight(), view.getPaddingBottom());
         }
     }
    

4. 具体实现:滑动渐变

  1. 实现思路:滑动监听 banner 的高度,设置背景色

  2. 控件的高度需要通过 LayoutParams 去获取

     ViewGroup.LayoutParams bannerParams = mBanner.getLayoutParams();
         ViewGroup.LayoutParams titleBarParams = mToolbar.getLayoutParams();
         h = bannerParams.height - titleBarParams.height;
    
         mScrollView.setScrollViewListener(new MyScrollView.ScrollViewListener() {
             private int lastScrollY = 0;
    
             private int color = ContextCompat.getColor(mContext, R.color.colorAccent) & 0x00ffffff;
    
             @Override
             public void onScrollChanged(MyScrollView scrollView, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
    
                 if (lastScrollY < h && scrollY >= 0) {
                     scrollY = Math.min(h, scrollY);
                     mScrollY = scrollY > h ? h : scrollY;
                     mToolbar.setBackgroundColor(((255 * mScrollY / h) << 24) | color);
                 }
                 lastScrollY = scrollY;
             }
         });
    
     mToolbar.setBackgroundColor(0);
    
  3. 测试结果:

    1. 模拟器: 4.4 到 7.1 可以达到预期
    2. 真机: 小米note 6.0,三星 7.1 可以达到预期
    3. Github - https://github.com/bbccoolly/TransTitleBar

相关文章

  • AndroidView

    Android 沉浸式 (透明) 状态栏适配 Android 沉浸式状态栏仿淘宝、京东拖拽商品详情(可嵌套View...

  • Android通用透明/沉浸式状态栏

    1. 话不多说,先上图,有需要再往下看 对于沉浸式的说法是不准确,具体可以去百度 1. 状态栏颜色与标题栏颜色一致...

  • 沉浸式

    google在Android4.4以后提供了设置沉浸式状态栏的方法 true 设置状态栏为透明android:fi...

  • Android 沉浸式状态栏原理

    首先: android 的透明状态栏和沉浸式是两个不同的东西,但是又相互交错,不要混淆。透明状态栏是指将状态栏设置...

  • 透明statusbar的一些小建议

    大家都知道android4.4出现了沉浸式状态栏一说,5.0以上则是透明状态栏,其实呢都是透明状态栏。最近公司要求...

  • Android 沉浸式风格(为毛叫沉浸式这么唬人)

    一、参考 1、Android 沉浸式状态栏攻略 让你的状态栏变色吧2、android设置状态栏颜色(沉浸式状态栏)...

  • android沉浸式状态栏 轻量 简便

    android沉浸式状态栏 android 沉浸式状态栏 网上看了很多沉浸式,感觉用起来麻烦,而且有些库非常大,于...

  • android沉浸式状态栏

    android沉浸式状态栏 参考文章 另外两种android沉浸式状态栏实现思路 android4.4+实现MD状...

  • Android 透明状态栏(伪沉浸式)

    4.4 以上要做所谓沉浸式,其实不是真正意义上的沉浸式,只是一种透明状态栏。 而由于 Android API 的不...

  • Android 补充 LayerDrawable 沉浸式状态栏

    小菜前些日子整理了两次小小的沉浸式状态栏的总结:Android 沉浸式状态栏的多种样式 和 Android 沉浸式...

网友评论

      本文标题:Android通用透明/沉浸式状态栏

      本文链接:https://www.haomeiwen.com/subject/hqhgjxtx.html