使用 customview 自定义 AppbarLayout答案

【问题标题】：Customize AppbarLayout with customview使用 customview 自定义 AppbarLayout
【发布时间】：2018-10-22 04:59:09
【问题描述】：

我将 CoordinatorLayout 与 AppBarLayout 一起使用。在 AppBarLayout 下方，我有一个带有内容列表的 RecyclerView。在 AppbarLayout 我有自定义视图作为工具栏。在该视图下方，我有另一个自定义视图。我已将app:layout_scrollFlags="scroll|enterAlways" 设置为工具栏，将app:layout_scrollFlags="scroll" 设置为自定义视图。

除了一个问题外，它工作正常。当 recycleview 中有一个 fling 时，自定义视图的最后一部分变得可见。但我希望工具栏在 recycleview 中一扔（向上滚动）时可见。我试图尽可能清楚地表达我的观点。我的主要观点。

它现在的行为是这样的。

我想要达到的目标。

我的 MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    android:id="@+id/navbar">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="enterAlways|scroll"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"
            android:paddingBottom="10dp">

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/weather"
                android:layout_centerVertical="true"
                android:layout_marginRight="0dp"
                android:layout_marginLeft="10dp"
                android:id="@+id/weather"
                android:layout_alignParentRight="true"/>

            <TextView
                android:id="@+id/location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Dhaka"
                android:textSize="10sp"
                android:textColor="#FF4A4A4A"
                android:layout_toLeftOf="@id/weather"
                android:gravity="right" />

            <TextView
                android:id="@+id/temperature"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=""
                android:textSize="10sp"
                android:textColor="#FF4A4A4A"
                android:layout_toLeftOf="@id/weather"
                android:layout_below="@id/location"
                android:gravity="right"/>


            <ImageView
                android:id="@+id/brand_logo"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_centerVertical="true"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="0dp"
                android:layout_marginRight="10dp"
                android:src="@drawable/rn_logo" />


            <TextView
                android:id="@+id/brand_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="RIDMIK NEWS"
                android:textSize="10sp"
                android:textColor="#212933"
                android:layout_toRightOf="@id/brand_logo"
                android:gravity="right"
                android:layout_gravity="right"/>

            <TextView
                android:id="@+id/date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text=""
                android:textSize="10sp"
                android:textColor="#FF9B9B9B"
                android:textAllCaps="true"
                android:layout_toRightOf="@id/brand_logo"
                android:layout_below="@id/brand_title"/>


        </RelativeLayout>

        <include layout="@layout/spprts_score_segment_layout" />

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">


    <LinearLayout
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:id="@+id/end"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@android:color/background_light"
    android:orientation="horizontal">

    <com.ridmic.rc.newsic.UI.FontNavigationButton
        android:id="@+id/feed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:clickable="true"
        app:iconSize="7sp"
        app:iconUnicode="@string/bottom_icon_now"
        app:middleSpace="5dp"
        app:topPadding="10dp"
        app:usageText="now"
        app:usageTextSize="3sp" />

    <com.ridmic.rc.newsic.UI.FontNavigationButton
        android:id="@+id/briefing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:iconSize="7sp"
        app:iconUnicode="\ue802"
        app:middleSpace="5dp"
        app:topPadding="10dp"
        app:usageText="briefing"
        app:usageTextSize="3sp" />

    <com.ridmic.rc.newsic.UI.FontNavigationButton
        android:id="@+id/add"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:iconSize="7sp"
        app:iconUnicode="\ue803"
        app:middleSpace="5dp"
        app:topPadding="10dp"
        app:usageText="add story"
        app:usageTextSize="3sp" />

    <com.ridmic.rc.newsic.UI.FontNavigationButton
        android:id="@+id/topics"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:iconSize="7sp"
        app:iconUnicode="\ue805"
        app:middleSpace="5dp"
        app:topPadding="10dp"
        app:usageText="@string/menu_bottom_topics_en"
        app:usageTextSize="3sp" />

    <com.ridmic.rc.newsic.UI.FontNavigationButton
        android:id="@+id/profile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:iconSize="7sp"
        app:iconUnicode="\ue806"
        app:middleSpace="10dp"
        app:topPadding="10dp"
        app:usageText="@string/menu_bottom_profile_en"
        app:usageTextSize="3sp" />

</LinearLayout>



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

spprts_score_segment_layout.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="0dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="15dp"
    android:layout_marginTop="10dp"
    android:orientation="vertical"
    android:id="@+id/live_score_view"
    android:visibility="visible"
    app:layout_scrollFlags="scroll">

    <LinearLayout
        android:id="@+id/cricket_score"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@drawable/upper"
        android:padding="20dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/segment_title"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="@string/sports_live"
            android:textAllCaps="true"
            android:textStyle="bold"
            android:textColor="#15DEA8"
            android:textSize="18sp"/>
        <TextView
            android:id="@+id/last_update_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:paddingRight="20dp"
            android:textSize="10sp"
            android:layout_gravity="center_vertical"/>

        <com.ridmic.rc.newsic.customClass.CustomTextView
            android:id="@+id/cancel_view"
            app:fontName="ridmik.ttf"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="\ue81d"
            android:layout_alignParentRight="true"
            android:layout_margin="0dp"
            android:paddingLeft="15dp"
            android:paddingRight="10dp"
            android:gravity="center"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/score_layer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <com.ridmic.rc.newsic.customClass.CircleImageView
                android:id="@+id/first_team_flag"
                android:layout_width="35dp"
                android:layout_height="20dp"
                android:layout_gravity="center_vertical"
                android:background="@drawable/flag_australia"/>

            <TextView
                android:id="@+id/first_team_name"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_marginLeft="10dp"
                android:layout_gravity="center_vertical"
                android:layout_below="@id/first_team_flag"/>


        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="vs"
            android:background="@drawable/circular_background"
            android:gravity="center"
            android:textColor="@color/white_with_alpha"
            android:layout_gravity="center_vertical"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/second_team_name"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text=""
                android:gravity="right"
                android:layout_marginRight="10dp"
                android:layout_gravity="center_vertical"
                android:layout_below="@id/first_team_flag"/>

            <com.ridmic.rc.newsic.customClass.CircleImageView
                android:id="@+id/second_team_flag"
                android:layout_width="35dp"
                android:layout_height="20dp"
                android:layout_gravity="center_vertical"
                android:background="@drawable/flag_australia"/>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/team_name_layer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/score_layer"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:id="@+id/first_team_run"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_marginLeft="0dp"
                android:textSize="14sp"
                android:textStyle="bold"
                android:textColor="#353B50"/>
            <TextView
                android:id="@+id/first_team_over"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_toRightOf="@id/first_team_flag"
                android:layout_marginLeft="0dp"
                android:textSize="10sp"
                android:textColor="#353B50"
                android:layout_alignParentBottom="true"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="right"
            android:layout_marginRight="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:id="@+id/second_team_run"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_marginLeft="0dp"
                android:textSize="14sp"
                android:textStyle="bold"
                android:textColor="#353B50"
                android:gravity="right"/>
            <TextView
                android:id="@+id/second_team_over"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_toRightOf="@id/first_team_flag"
                android:layout_marginLeft="0dp"
                android:textSize="10sp"
                android:textColor="#353B50"
                android:gravity="right"
                android:layout_alignParentBottom="true"/>
        </LinearLayout>

    </LinearLayout>

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollIndicators="none"
        android:scrollbars="none"
        >
        <TextView
            android:id="@+id/latest_score_layer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/team_name_layer"
            android:scrollbars = "horizontal"
            android:textSize="18sp"
            android:maxLines="1"
            android:textScaleX ="1"
            android:background="@drawable/bottom_border"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:fontFamily="@font/icomoon"
            android:textColor="@null"
            android:scrollHorizontally="true"
            android:scrollIndicators="none"
            android:scrollbarSize="0dp"
            android:text=""/>
    </HorizontalScrollView>

    <LinearLayout
        android:layout_marginTop="5dp"
        android:id="@+id/player_layer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/latest_score_layer">

        <RelativeLayout
            android:id="@+id/batsman_layer"
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_marginRight="20dp"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/batsman_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/batsman"
                android:textAllCaps="true"
                android:textStyle="bold"
                android:textColor="#353B50"
                android:textSize="9sp"/>
            <LinearLayout
                android:paddingTop="5dp"
                android:layout_below="@id/batsman_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/first_batsman_name"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:text=""
                    android:textSize="10sp"
                    android:layout_marginRight="0dp"/>

                <TextView
                    android:id="@+id/second_batsman_name"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:text=""
                    android:textSize="10sp"
                    android:layout_marginRight="0dp"/>

            </LinearLayout>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/bowler_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bowler"
                android:textAllCaps="true"
                android:textStyle="bold"
                android:textColor="#353B50"
                android:textSize="9sp"/>
            <LinearLayout
                android:paddingTop="5dp"
                android:layout_below="@id/bowler_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                    <TextView
                        android:id="@+id/bowler_name"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="10sp"
                        android:layout_marginRight="10dp"/>

                    <TextView
                        android:id="@+id/bowler_over"
                        android:layout_width="match_parent"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"
                        android:textSize="10sp"/>


            </LinearLayout>

        </RelativeLayout>

    </LinearLayout>
</LinearLayout>

<TextView
    android:id="@+id/match_status"
    android:layout_marginTop="0dp"
    android:text=""
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit ="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:scrollHorizontally="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/player_layer"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="0dp"
    android:paddingTop="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:gravity="center"
    android:paddingBottom="15dp"
    android:background="@drawable/bottom"/>
</LinearLayout>

我希望我已经清楚地解释了我的问题。

【问题讨论】：

请分享您的主要活动 xml 布局，这就是我们需要查看的全部内容：)
抱歉，我已经编辑了我的问题。
你为什么不用CollapsingToolbarLayout？
你写过你有一个 RecyclerView，但我在 xml 中看不到任何内容......相反，我看到很多 LinearLayout(s)，这显然是错误的......摆脱它们，并在this 之后使用 RecyclerView 类

标签： android android-toolbar android-coordinatorlayout android-appbarlayout

【解决方案1】：

添加带有此标志的CollapsingToolbarLayout scroll|exitUntilCollapsed 作为AppBarLayout 孩子：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:minHeight="100dp"
    android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        ...
        ..

并将app:layout_collapseMode="pin" 添加到您的Toolbar，以便当CollapsingToolbarLayout 折叠时，Toolbar 应该留在该位置。

输出：

查看示例： https://antonioleiva.com/collapsing-toolbar-layout/

请注意，使用过多的LinearLayouts 或RelativeLayout不推荐。

【讨论】：

【解决方案2】：

这是你想要的层次结构collapsing-toolbar-layout：

<android.support.design.widget.CoordinatorLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <!-- Scrollable view here -->
  <android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view_activity_main_items"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

  <com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/tall_toolbar_height">

    <com.google.android.material.appbar.CollapsingToolbarLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:contentScrim="?attr/colorPrimary"
      app:expandedTitleGravity="top"
      app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

      <!-- your custom view goes here-->

      <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"/>
    </com.google.android.material.appbar.CollapsingToolbarLayout>

  </com.google.android.material.appbar.AppBarLayout>

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

而您可以看到 RecyclerView 是在 AppBarLayout 之前绘制的，AppBarLayout 环绕在 CollapsingToolbarLayout 周围，其中（注意）包含 Toolbar 作为您的最后一个视图，以及您在其顶部的自定义视图。然后你可以通过 Toolbar 的 app:layout_collapseMode 和 CollapsingToolbarLayout 的 app:layout_scrollFlags 正确设置行为部分。

【讨论】：