高仿腾讯微视首页点击直播tab视频沉浸顶部和tab选项卡,点其他
2018-04-19 本文已影响210人
吉凶以情迁
image.png
image.png
难点1:
让视频view延伸到底部tab,顶部状态栏
难点2:
让其他fragment view顶部状态栏自动fitWindow
针对性的让部分延伸到顶部
解决方法:
我使用相对布局,然后让fragment space区域ABOVE
底部区域 然后取消activity的view的fitWindow
属性。然后每一个fragment单独计算fitWindow的高度,也就是测量状态栏高度,给自己的不需要填充状态栏的fragment view设置一个状态栏高度view弄进去产生视觉错感。
在切换到直播fragment的时候移除ABOVE
自动填充底部,修改底部导航背景为透明,
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;
}
布局文件
<?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>