美文网首页
CollapsingToolbarLayout+Toolbar+

CollapsingToolbarLayout+Toolbar+

作者: 学无止境的cy | 来源:发表于2018-11-10 16:49 被阅读0次

实际开发中有个这样的需求,先上效果图

gif5新文件.gif

需求点
1.利用CollapsingToolbarLayout需要达到一个折叠的效果tab吸顶
2.顶上沉浸式播放视频或者图片
3.在viewpager当中的有个横向的recyclerview进行展示
这篇文章主要说的是遇到的问题,第一点应该是一个很常规的需求所以略过。
第二点沉浸式展示的时候,之前使用的是直接在图片或者视频布局以及上面的父布局加上

android:fitsSystemWindows="true"

在我们显示的图片的时候他的滑动是完全正常的,但是我们显示的是视频VideoView的时候会发现一个很奇怪的问题,我们整个布局收起的时候本该是正常显示我们状态栏的地方还是透明的。
这里先放上我们整个页面的布局,后面我再截取出关键部分的布局

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:id="@+id/audio_coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff5f9fa"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/audio_barlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff5f9fa"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/audiocollapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            fresco:contentScrim="@color/colorPrimary"
            fresco:layout_scrollFlags="scroll|exitUntilCollapsed"
            fresco:toolbarId="@+id/toolbar">
            <!--封面图片-->

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/audio_iv"
                android:layout_width="match_parent"
                android:layout_height="213dp"
                android:layout_gravity="top"
                android:fitsSystemWindows="true"
                fresco:layout_collapseMode="parallax"
                fresco:layout_collapseParallaxMultiplier="0.7" />

            <FrameLayout
                android:id="@+id/audiolayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:visibility="visible"
                fresco:layout_collapseMode="parallax" />
            <RelativeLayout
                android:fitsSystemWindows="true"
                android:id="@+id/audio_video"
                android:layout_width="match_parent"
                android:layout_height="213dp"
                android:layout_gravity="top"
                android:visibility="gone"
                fresco:layout_collapseMode="parallax"
                fresco:layout_collapseParallaxMultiplier="0.7">

                <VideoView
                    android:id="@+id/sv_video"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true" />

                <com.facebook.drawee.view.SimpleDraweeView
                    android:id="@+id/iv_video_cover"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/iv_video_play_big"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_centerInParent="true"
                    android:src="@mipmap/icon_video_play_big"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/iv_volume"
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:layout_above="@id/rl_control"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="44dp"
                    android:layout_marginRight="15dp"
                    android:src="@mipmap/icon_volume"
                    android:visibility="gone" />

                <RelativeLayout
                    android:id="@+id/rl_control"
                    android:layout_width="match_parent"
                    android:layout_height="32dp"
                    android:layout_alignParentBottom="true"
                    android:background="#50000000"
                    android:paddingRight="10dp">

                    <RelativeLayout
                        android:id="@+id/rl_video_status"
                        android:layout_width="40dp"
                        android:layout_height="match_parent"
                        android:layout_centerVertical="true">

                        <ImageView
                            android:id="@+id/iv_video_status"
                            android:layout_width="20dp"
                            android:layout_height="20dp"
                            android:layout_centerInParent="true"
                            android:src="@mipmap/icon_video_play_small" />
                    </RelativeLayout>

                    <TextView
                        android:id="@+id/tv_time_progress"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_toRightOf="@id/rl_video_status"
                        android:text="00:00"
                        android:textColor="@color/white"
                        android:textSize="14sp" />

                    <TextView
                        android:id="@+id/tv_time_total"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="6dp"
                        android:text="00:00"
                        android:textColor="@color/white"
                        android:textSize="14sp" />

                    <SeekBar
                        android:id="@+id/play_seekBar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="8dp"
                        android:layout_toLeftOf="@id/tv_time_total"
                        android:layout_toRightOf="@id/tv_time_progress"
                        android:maxHeight="3dp"
                        android:minHeight="3dp"
                        android:paddingEnd="0dp"
                        android:paddingStart="0dp"
                        android:progressDrawable="@drawable/seekbar_style"
                        android:thumb="@mipmap/seekbarthumb"
                        android:thumbOffset="0dp" />
                </RelativeLayout>

            </RelativeLayout>


            <LinearLayout
                android:id="@+id/ll_intro"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginTop="213dp"
                android:background="#fff5f9fa"
                android:orientation="vertical"
                android:paddingBottom="15dp"
                fresco:layout_collapseMode="parallax">

                <RelativeLayout
                    android:id="@+id/rl_price"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:paddingBottom="10dp"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp"
                    android:paddingTop="10dp">

                    <com.facebook.drawee.view.SimpleDraweeView
                        android:id="@+id/iv_vip_icon"
                        android:layout_width="18dp"
                        android:layout_height="18dp"
                        android:layout_centerVertical="true" />

                    <RelativeLayout
                        android:id="@+id/rl_discount_price"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="8dp"
                        android:layout_toRightOf="@id/iv_vip_icon">

                        <TextView
                            android:id="@+id/tv_discount_price"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textSize="22sp"
                            android:textStyle="bold" />

                        <TextView
                            android:id="@+id/tv_count_down_tip"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:text="距涨价"
                            android:textColor="@color/white"
                            android:textSize="12sp"
                            android:visibility="gone" />
                    </RelativeLayout>

                    <RelativeLayout
                        android:id="@+id/rl_old_price"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/rl_discount_price"
                        android:layout_marginLeft="8dp"
                        android:layout_toRightOf="@id/iv_vip_icon">

                        <TextView
                            android:id="@+id/tv_old_price"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:textSize="12sp" />

                        <cn.iwgang.countdownview.CountdownView
                            android:id="@+id/tv_count_down_time"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_centerVertical="true"
                            android:visibility="gone"
                            fresco:isHideTimeBackground="true"
                            fresco:isShowDay="true"
                            fresco:isShowHour="true"
                            fresco:isShowMillisecond="false"
                            fresco:isShowMinute="true"
                            fresco:isShowSecond="true"
                            fresco:isTimeTextBold="false"
                            fresco:suffixDay="天"
                            fresco:suffixGravity="center"
                            fresco:suffixHour=":"
                            fresco:suffixMinute=":"
                            fresco:suffixTextColor="@color/white"
                            fresco:suffixTextSize="15sp"
                            fresco:timeTextColor="@color/white"
                            fresco:timeTextSize="15sp" />
                    </RelativeLayout>
                </RelativeLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:orientation="vertical"
                    android:paddingBottom="10dp"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp">

                    <TextView
                        android:id="@+id/tv_course_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:maxLines="2"
                        android:textColor="@color/textColor"
                        android:textSize="15sp" />

                    <TextView
                        android:id="@+id/tv_course_nick_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:textColor="@color/textColor3"
                        android:textSize="12sp" />

                    <RelativeLayout
                        android:id="@+id/rl_expiry"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp">

                        <TextView
                            android:id="@+id/tv_expiry_day"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/textColor3"
                            android:textSize="12sp" />

                        <TextView
                            android:id="@+id/tv_student_num"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:textColor="@color/textColor3"
                            android:textSize="12sp" />
                    </RelativeLayout>
                </LinearLayout>

                <RelativeLayout
                    android:id="@+id/rl_gift"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:background="@color/white"
                    android:padding="15dp"
                    android:visibility="gone">

                    <TextView
                        android:id="@+id/tv_gift_course"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="赠送"
                        android:textColor="#FF4F00"
                        android:textSize="13sp" />

                    <android.support.v7.widget.RecyclerView
                        android:id="@+id/lv_gift"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_toRightOf="@id/tv_gift_course"
                        android:divider="@null"
                        android:scrollbars="none">

                    </android.support.v7.widget.RecyclerView>

                    <LinearLayout
                        android:id="@+id/ll_gift_expand_status"
                        android:layout_width="match_parent"
                        android:layout_height="30dp"
                        android:layout_below="@id/lv_gift"
                        android:gravity="center"
                        android:orientation="horizontal"
                        android:paddingTop="10dp"
                        android:visibility="gone">

                        <TextView
                            android:id="@+id/tv_gift_expand_status"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="查看全部"
                            android:textColor="#01A0EB"
                            android:textSize="14sp" />

                        <ImageView
                            android:id="@+id/iv_gift_expand_status"
                            android:layout_width="15dp"
                            android:layout_height="15dp"
                            android:layout_marginLeft="5dp"
                            android:src="@mipmap/arrowdown" />
                    </LinearLayout>
                </RelativeLayout>
            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/audio_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                fresco:layout_collapseMode="pin"
                fresco:popupTheme="@style/AppTheme.PopupOverlay"
                fresco:titleEnabled="false"
                fresco:contentInsetStart="0dp"
                fresco:titleTextColor="@color/white">

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"
        android:orientation="vertical"
        fresco:layout_behavior="@string/appbar_scrolling_view_behavior"
        fresco:layout_scrollFlags="scroll|exitUntilCollapsed">

        <RadioGroup
            android:id="@+id/rg_title"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/white"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_course_intro"
                style="@style/radiobutton_tran_list"
                android:background="@drawable/tran_list_radio"
                android:checked="true"
                android:gravity="center"
                android:text="简介" />

            <View style="@style/view_vertical_line" />

            <RadioButton
                android:id="@+id/rb_course_list"
                style="@style/radiobutton_tran_list"
                android:background="@drawable/tran_list_radio"
                android:checked="false"
                android:gravity="center"
                android:text="课时" />

            <View style="@style/view_vertical_line" />

            <RadioButton
                android:id="@+id/rb_course_data"
                style="@style/radiobutton_tran_list"
                android:background="@drawable/tran_list_radio"
                android:checked="false"
                android:gravity="center"
                android:text="资料" />
        </RadioGroup>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:src="@mipmap/rightshadow" />

        <android.support.v4.view.ViewPager
            android:id="@+id/audio_vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/rl_buy"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@color/white"
        android:visibility="gone">

        <View style="@style/view_line" />

        <Button
            android:id="@+id/audio_buybutton"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_centerInParent="true"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@drawable/border_course_buy_red"
            android:text="购买课程"
            android:textColor="@color/white"
            android:textSize="16sp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/distribution_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginTop="80dp"
        android:background="@mipmap/share_buy_bg"
        android:visibility="gone">

        <ImageView
            android:id="@+id/share_icon_buy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@mipmap/share_buy_icon" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/share_icon_buy"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:text="分享赚"
                android:textColor="@color/textColor"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/rebateCoin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="2dp"
                android:text="888.88"
                android:textColor="#FC293D"
                android:textSize="12sp" />
        </LinearLayout>

    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

好多啊,偷了懒没有单独提出来一部分布局现在看的自己都头疼

<com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/audio_iv"
                android:layout_width="match_parent"
                android:layout_height="213dp"
                android:layout_gravity="top"
                android:fitsSystemWindows="true"
                fresco:layout_collapseMode="parallax"
                fresco:layout_collapseParallaxMultiplier="0.7" />

        
            <RelativeLayout
                android:fitsSystemWindows="true"
                android:id="@+id/audio_video"
                android:layout_width="match_parent"
                android:layout_height="213dp"
                android:layout_gravity="top"
                android:visibility="gone"
                fresco:layout_collapseMode="parallax"
                fresco:layout_collapseParallaxMultiplier="0.7">

                <VideoView
                    android:id="@+id/sv_video"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true" />
            </RelativeLayout>


            <LinearLayout
                android:id="@+id/ll_intro"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginTop="213dp"
                android:background="#fff5f9fa"
                android:orientation="vertical"
                android:paddingBottom="15dp"
                fresco:layout_collapseMode="parallax"/>

我们单独分析这一部分布局,当我们布局id为ll_intro的布局的属性marginTop设置为213dp的时候,我们的封面图片显示和滑动都是没有问题,唯独我们VideoView会出问题,说明有可能是我们ll_intro这个布局在显示VideoView计算距离到顶部的高度时候并没有算进状态栏的高度,导致我们VideoView的布局拉伸,最后折叠收起的时候也会空出一个状态栏的高度。
根据这个思路我们可以想到在显示VideoView的时候动态设置ll_intro这个布局到顶部的高度如下

private void initIntroPosition() {
        //获取状态栏高度
        int statusHeight = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            statusHeight = getResources().getDimensionPixelSize(resourceId);
        }
        CollapsingToolbarLayout.LayoutParams params = new CollapsingToolbarLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT);
        params.topMargin = DeviceUtil.dpToPx(213);
        llIntro.setLayoutParams(params);
}

经过这个动态设置发现收起的时候确实解决了在显示VideoView的时候状态栏透明的情况。但是如果你用了这个解决办法去解决你会发现ll_intro布局下面会多出一个状态栏的高度,而且你去动态修改他的高度还不行。。。
这个也坑了8,这个时候气急败坏的我果然舍去android:fitsSystemWindows="true"这个东西了,

改用代码进行沉浸式。如下

    private void setStatusBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

    }

这里你只需要注意自己的toolbar距离顶部的高度就Ok了,也没那么多问题..

第三个问题:viewpager布局当中存在recyclerview并且它是要横向滚动的时候。

如果你实际开发当中有这种情况你会发现在touch这个recyclerview竖直方向进行滚动的时候,我们肯定是想它能够响应CollapsingToolbarLayout收起或者展开的动作的啊,但是你会发现完全没反应啊。。。其实很简单只用将我们的横向recyclerview加上

setNestedScrollingEnabled(false)

原因也很简单:CoordinatorLayout实现了NestedScrollingParent,纵向RecyclerView是CoordinatorLayout的子View,RecyclerView的滑动能通知到CoordinatorLayout,继而由CoordinatorLayout协调让CollapsingToolbarLayout发生折叠。横向RecyclerView的父View是纵向RecyclerView,而RecyclerView只实现了NestedScrollingChild,无法像CoordinatorLayout一样响应。所以要关闭横向RecyclerView的嵌套滑动功能,让横向RecyclerView如同其他嵌入纵向RecyclerView的view一样,触发折叠。

相关文章

网友评论

      本文标题:CollapsingToolbarLayout+Toolbar+

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