ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 应用开发 > IT综合 > 实现直播系统源代码的沉浸式状态栏效果

实现直播系统源代码的沉浸式状态栏效果

IT综合 作者：云豹科技晓彤 时间：2021-09-24 17:05:21 0 删除 编辑

Google 在 4.4 给全屏阅读文字或玩游戏这种情景增加了透明状态栏和透明导航栏的功能。

首先上两张乐家驿站应用的截图，其实在直播系统源代码开发中，也可以用到这样的状态栏效果。

    

注意：本文是自定义标题栏，不用android默认自带的标题栏。

第一步：设置 Acitivity 所在 window 的属性

    

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // Translucent status bar
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
      
    }

        //透明状态栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //透明导航栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

只要加入上面两行代码，就可以实现直播系统源代码的沉浸式通知栏了。效果如图：


设置直播系统源代码状态栏的颜色

状态栏的颜色跟两个属性有关：

    android:fitsSystemWindows="true"
    android:clipToPadding="true"

只要在某个view设置了该属性，那么状态栏的颜色就跟该view的背景色保持一致。

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:fitsSystemWindows="true"
        android:clipToPadding="true"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#009959"
        android:text="你好，请问你有男朋友吗"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="#ff669d"/>
</LinearLayout>


由于我们要实现的是直播系统源代码的状态栏和顶部的控件是同一个颜色，同时，控件内容也不和状态栏重复，所以只要把那两行代码放到我们顶部的控件就可以了。

上面内容部分来自carlos123456789博客，感谢原作者。

下面我们来解决兼容性问题。

由于这个特性是andorid4.4支持的，最少要api19才可以使用，那么低于4.4的怎么办呢？这里直播系统源代码还是通过自定义标题栏的方式解决。

首先我们来看怎么实现文章开头界面的效果。

本应用是FragmentAcitity+Framgment实现，故主界面是四个fragment组成。

MainUIAcitivy中onCreate方法：

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // Translucent status bar
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        // 强制更新
        UmengUpdateAgent.setDialogListener(new UmengDialogButtonListener() {
            @Override
            public void onClick(int status) {
                switch (status) {
                    case UpdateStatus.Update:
                        break;
                    default:
                        // close the app
                        AppToast.showShortText(MainUIActivity.this,
                                "非常抱歉，您需要更新应用才能继续使用");
                        MainUIActivity.this.finish();
                }
            }
        });
    }


首页布局的加载如下代码，大家可以看到根据当前api是否大于4.4，加载不同的布局，归根到底就是标题栏的不同。

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view = inflater.inflate(R.layout.fragment_home_v19, container, false);
        }
        return view;
    }


fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    >
        <!--其他布局-->
    <RelativeLayout
        android:id="@+id/index_title_bar"
        android:layout_alignParentTop="true"
        style="@style/title_bar_style_home"
        android:fitsSystemWindows="true"
        android:gravity="center"
        >
        <TextView
            android:id="@+id/current_city_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:drawableTop="@drawable/ic_location"
            android:drawablePadding="2dp"
            android:text="北京"
            android:textColor="#fff"
            android:textSize="10sp" />
        <TextView
            android:id="@+id/tv_title"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="33dp"
            android:gravity="center_vertical"
            android:layout_weight="10"
            android:background="@drawable/shape_edit_corners_bg"
            android:hint="请输入商品名称"
            android:imeOptions="actionSearch"
            android:singleLine="true"
            android:textColor="@color/black_text"
            android:textColorHint="#ffb6b6b6"
            android:textSize="14sp"
            android:maxLength="10"
            android:paddingLeft="5dp"
            android:paddingRight="3dp"
            android:drawableLeft="@drawable/ic_search"
            android:drawableRight="@drawable/bg_btn_voice"
            android:layout_toLeftOf="@+id/image_right"
            android:layout_toRightOf="@+id/current_city_text"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>
        <TextView
            android:id="@+id/image_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:drawableTop="@drawable/ic_category"
            android:drawablePadding="2dp"
            android:text="分类"
            android:textColor="#fff"
            android:textSize="10sp" />
    </RelativeLayout>
</RelativeLayout>


fragment_home_v19.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:orientation="vertical"
    >
        <!-- 其他布局 -->
    <RelativeLayout
        android:id="@+id/index_title_bar"
        android:layout_alignParentTop="true"
        style="@style/title_bar_style_home_v19"
        android:fitsSystemWindows="true"
        android:gravity="center"
        android:paddingTop="@dimen/title_bar_padding_top"
        >
        <TextView
            android:id="@+id/current_city_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:drawableTop="@drawable/ic_location"
            android:drawablePadding="2dp"
            android:text="北京"
            android:textColor="#fff"
            android:textSize="10sp" />
        <TextView
            android:id="@+id/tv_title"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="33dp"
            android:gravity="center_vertical"
            android:layout_weight="10"
            android:background="@drawable/shape_edit_corners_bg"
            android:hint="请输入商品名称"
            android:imeOptions="actionSearch"
            android:singleLine="true"
            android:textColor="@color/black_text"
            android:textColorHint="#ffb6b6b6"
            android:textSize="14sp"
            android:maxLength="10"
            android:paddingLeft="5dp"
            android:paddingRight="3dp"
            android:drawableLeft="@drawable/ic_search"
            android:drawableRight="@drawable/bg_btn_voice"
            android:layout_toLeftOf="@+id/image_right"
            android:layout_toRightOf="@+id/current_city_text"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>
        <TextView
            android:id="@+id/image_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:drawableTop="@drawable/ic_category"
            android:drawablePadding="2dp"
            android:text="分类"
            android:textColor="#fff"
            android:textSize="10sp" />
    </RelativeLayout>
</RelativeLayout>

style.xml

<style name="title_bar_style_home"><!-- 首页用 -->
        <item name="android:background">#ffc6003b</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">48dp</item>
    </style>
    <style name="title_bar_style_home_v19"><!-- 首页用v19 -->
        <item name="android:background">#ffc6003b</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">65dp</item>
    </style>


values/dimens.xml

<dimen name="title_bar_padding_top">0dp</dimen>

values-v19/dimens.xml

<dimen name="title_bar_padding_top">20dp</dimen>

首页的关键代码就这么多，下面我们来重点看第二个fragment。

跟首页不同的是，fragment界面的标题栏是白色的,如果实现侵色，状态栏也是白色的，这样状态栏的白色字就看不见了，下面给出解决方法。

解决的办法还是直播系统源代码自定义标题栏。

原理：自定义标题栏（包含状态栏），背景为黑色，也就是状态栏的颜色。高度为68dp，然后设置paddingTop=20dp，这个20dp就是状态栏的高度。剩下的48dp就是我们真正的标题栏。

首先还是根据当前api是否大于4.4，加载不同的布局，归根到底就是状态栏的不同。

@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_life, container, false);
		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
			view = inflater.inflate(R.layout.fragment_life_v19, container, false);
		}
		
		return view;
	}


fragment_life.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include layout="@layout/title_bar_main" />
    <!-- 其他布局 -->
</LinearLayout>

title_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_title_bar"
    style="@style/title_bar_style_main"
    android:fitsSystemWindows="true"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFEFEFE">
        <TextView
            android:id="@+id/title_text"
            style="@style/title_text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="end"
            android:singleLine="true" />
        <ImageView
            android:id="@+id/right_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:contentDescription="@null"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:src="@drawable/ic_notice"
            android:visibility="gone"/>
    </RelativeLayout>
</LinearLayout>

fragment_life_v19.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include layout="@layout/title_bar_main_v19" />
    <!-- 其他布局 -->
    
</LinearLayout>


title_bar_main_v19.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_title_bar"
    style="@style/title_bar_style_main_19"
    android:fitsSystemWindows="true"
    android:paddingTop="@dimen/title_bar_padding_top">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFEFEFE">
        <TextView
            android:id="@+id/title_text"
            style="@style/title_text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="end"
            android:singleLine="true" />
        <ImageView
            android:id="@+id/right_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:contentDescription="@null"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:src="@drawable/ic_notice"
            android:visibility="gone"/>
    </RelativeLayout>
</LinearLayout>


style.xml

<style name="title_bar_style_main">
        <item name="android:background">#FFFEFEFE</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">48dp</item>
        <item name="android:gravity">center_vertical</item>
    </style>
    <style name="title_bar_style_main_19">
        <item name="android:background">@android:color/black</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">68dp</item>
        <item name="android:gravity">center_vertical</item>
    </style>

就这么简单，希望大家能够提出搭建直播系统源代码更好意见！

声明：本文由云豹科技转发自一叶飘舟博客，如有侵权请联系作者删除


来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70002045/viewspace-2793581/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： 实现直播系统源代码的屏幕截图，并保存截图内容
下一篇： 进行直播app开发，ab切换环效果的实现很重要
请登录后发表评论 登录
全部评论
云豹科技晓彤
音视频软件开发相关知识科普账号

注册时间：2021-06-11

  • 博文量
    163
  • 访问量
    60341

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593