简书链接:高仿腾讯微视首页点击直播tab视频沉浸顶部和tab选项卡,点其他界面恢复正常
文章字数:358,阅读全文大约需要1分钟

image.png

image.png

难点1:
让视频view延伸到底部tab,顶部状态栏
难点2:
让其他fragment view顶部状态栏自动fitWindow针对性的让部分延伸到顶部

解决方法:
我使用相对布局,然后让fragment space区域ABOVE 底部区域 然后取消activity的view的fitWindow属性。然后每一个fragment单独计算fitWindow的高度,也就是测量状态栏高度,给自己的不需要填充状态栏的fragment view设置一个状态栏高度view弄进去产生视觉错感。
在切换到直播fragment的时候移除ABOVE自动填充底部,修改底部导航背景为透明,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
private void switchPosition(int index) {

if (index == mLastPosition) {
return;
}

//view_bottom_wrap
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) binding.fragmentSpace.getLayoutParams();
if (index != 3) {
binding.fragmentSpace.setVisibility(View.VISIBLE);
binding.line1.setBackgroundColor(Color.WHITE);
layoutParams.addRule(RelativeLayout.ABOVE, R.id.view_bottom_wrap);
binding.fragmentSpace.setLayoutParams(layoutParams);
} else {
binding.line1.setBackgroundColor(Color.TRANSPARENT);
binding.fragmentSpace.setVisibility(View.GONE);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
layoutParams.removeRule(RelativeLayout.ABOVE);
binding.fragmentSpace.setLayoutParams(layoutParams);

} else {
layoutParams.addRule(RelativeLayout.ABOVE, 0);
binding.fragmentSpace.setLayoutParams(layoutParams);
}


}

FragmentUtil.replaceFragment(this, arrayList.get(index), false);
mLastPosition = index;
}

布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<?xml version="1.0" encoding="utf-8"?>
<layout>

<data>

</data>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"


tools:context="cn.qssq666.MainActivity">


<FrameLayout
android:id="@+id/fragment_space"


android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/view_bottom_wrap"
/>


<LinearLayout
android:id="@+id/view_bottom_wrap"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:orientation="vertical"

>


<View
style="@style/h_line"
android:id="@+id/line1"
android:layout_width="match_parent"
android:layout_height="1dp" />

<cn.qssq666.radiogroupx.RadioGroupX
android:id="@+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"

android:gravity="center"
android:paddingBottom="@dimen/main_pading_size"
android:paddingTop="@dimen/main_pading_size"


app:orientation="horizontal">

<cn.qssq666.radiogroupx.MyDrawableTopRadioButton
android:id="@+id/radio_btn_1"
style="@style/buttom_strip_radiobutton"
android:layout_weight="1"
android:descendantFocusability="blocksDescendants"
android:textColor="@color/colorThemeBlack"
app:buttontextSize="@dimen/text_size_12"
app:drawableTop="@drawable/selector_btn_tab1"
app:text="头条"
app:textSize="@dimen/text_size_12" />

<RadioButton

android:id="@+id/radio_btn_2"
style="@style/buttom_strip_radiobutton"
android:layout_weight="1"
android:drawableTop="@drawable/selector_btn_tab2"
android:text="营销课" />

<RadioButton

android:id="@+id/radio_btn_3"
style="@style/buttom_strip_radiobutton"
android:layout_weight="1"
android:drawableTop="@drawable/selector_btn_tab2"
android:text="海报" />


<cn.qssq666.radiogroupx.MyBadgeRadioButton
android:id="@+id/radio_btn_4"
style="@style/buttom_strip_radiobuttonx"
android:descendantFocusability="blocksDescendants"
app:badgeRadius="8dp"
app:badgetext=""
app:badgetextColor="@color/colorWhite"
app:badgetextSize="5dp"
app:buttontextColor="@color/colorThemeBlack"
app:buttontextSize="@dimen/text_size_12"
app:drawableTop="@drawable/selector_btn_tab3"
app:minBadgeSize="2dp"
app:onlypointer="true"
app:text="视频" />

<RadioButton
android:id="@+id/radio_btn_5"
style="@style/buttom_strip_radiobutton"
android:drawableTop="@drawable/selector_btn_tab4"

android:text="我的" />

</cn.qssq666.radiogroupx.RadioGroupX>



</LinearLayout>
</RelativeLayout>
</layout>