Android-ui效果UI效果仿写Android控件

高仿腾讯微视首页点击直播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>

上一篇下一篇

猜你喜欢

热点阅读