使用customview自定义AppbarLayout

时间：2018-10-22 04:59:10

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

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

除一个问题外，它均正常工作。当recycleview中出现异常时，自定义视图的最后一部分变为可见。但是我想让工具栏在recycleview中向上滚动时可见。我已尽力阐明了自己的观点。 我的主要观点。

my main view

它现在的行为是这样的。

enter image description here

我想要实现的目标。 enter image description here

我的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>

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

2 个答案:

答案 0 :(得分：0)

添加一个带有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应该留在原处。

输出：

enter image description here

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

请注意，不建议使用过多的LinearLayout或RelativeLayout 。

答案 1 :(得分：0)

这是您要具有的层次结构[1]：

<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周围，CollapsingToolbarLayout（注）包含工具栏作为最后一个视图，而自定义视图位于其顶部。 然后，您可以通过工具栏的 app：layout_collapseMode 和CollapsingToolbarLayout的 app：layout_scrollFlags 正确设置行为部分。

  1. https://material.io/develop/android/components/collapsing-toolbar-layout/
相关问题
最新问题