【问题标题】:How to put RelativeLayout inside CoordinatorLayout如何将 RelativeLayout 放入 CoordinatorLayout
【发布时间】:2015-10-25 00:30:54
【问题描述】:

我正在尝试重新创建 Airbnb Android 应用程序中的搜索框。 所以我将 CoorinatorLayoutToolbarRecyclerView 一起使用。

但是当我在 Coordinator 中插入除这两件事之外的其他内容时,它不会显示出来。 这是我的代码:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/slidingLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/red"
        app:layout_scrollFlags="scroll|enterAlways" />

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="50dp"
    android:layout_marginRight="50dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/rounded_background"
    android:orientation="horizontal"
    android:padding="6dp"
    app:layout_scrollFlags="scroll|enterAlways">

    <EditText
        android:id="@+id/search"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="6"
        android:background="@null"
        android:fontFamily="sans-serif-light"
        android:hint="Unesite grad"
        android:paddingLeft="16dp"
        android:paddingStart="16dp" />

    <ImageView
        android:id="@+id/cancelSearch"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:padding="10dp"
        android:src="@drawable/ic_cancel" />
</LinearLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/appbar"
    android:background="#ffffff"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

但实际上,如果这能奏效,我将很难将搜索框放在 RecyclerView 上方。

我尝试将所有内容都放在 RelativeLayout 中,但没有成功。

这也是我正在尝试制作的图片

编辑:

这里是RelativeLayout的代码

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       <android.support.design.widget.AppBarLayout
           android:id="@+id/appbar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           android:background="#00000000">

           <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:background="@color/red"
               app:layout_scrollFlags="scroll|enterAlways"/>
   </android.support.design.widget.AppBarLayout>

   <RelativeLayout
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
       <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginLeft="50dp"
          android:layout_marginRight="50dp"
          android:layout_marginTop="20dp"
          android:background="@drawable/rounded_background"
          android:orientation="horizontal"
          android:padding="6dp"
          app:layout_scrollFlags="scroll|enterAlways">

          <EditText
              android:id="@+id/search"
              android:layout_width="0dp"
              android:layout_height="fill_parent"
              android:layout_weight="6"
              android:background="@null"
              android:fontFamily="sans-serif-light"
              android:hint="Unesite grad"
              android:paddingLeft="16dp"
              android:paddingStart="16dp" />

          <ImageView
              android:id="@+id/cancelSearch"
              android:layout_width="0dp"
              android:layout_height="40dp"
              android:layout_weight="1"
              android:padding="10dp"
              android:src="@drawable/ic_cancel" />
      </LinearLayout>
      <android.support.v7.widget.RecyclerView
           android:id="@+id/recyclerView"
           android:layout_width="match_parent"
           android:layout_height="fill_parent"
           android:layout_below="@id/appbar"
           android:background="#ffffff"
           app:layout_behavior="@string/appbar_scrolling_view_behavior" />
   </RelativeLayout>

【问题讨论】:

  • 尝试RelativeLayout放入CoordinatorLayout的代码在哪里?
  • 我尝试了两种方法。首先,我将所有视图包装在 CoordinatorLayout 中,因此 Relative 是第一个也是唯一的孩子。这导致失去所有元素的滚动行为。另一个在 EDIT 中,我将 RecyclerView 和这个搜索框包装在 Relative 中。
  • @NikolaMilutinovic 滚动行为将适用于CoordinatorLayout 的所有直接子元素,因此如果将布局行为设置为RelativeLayout,嵌套滚动将起作用。

标签: android android-coordinatorlayout android-relativelayout android-support-design


【解决方案1】:

我试图做一些类似的事情,但在屏幕底部有一个广告横幅。我的解决方案是将RelativeLayout 包裹在CoordinatorLayout 之外:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <android.support.design.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@+id/ad_view">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|enterAlways"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

  <com.google.android.gms.ads.AdView
      android:id="@+id/ad_view"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_alignParentBottom="true"
      android:layout_gravity="center|bottom"
      app:adSize="SMART_BANNER"
      app:adUnitId="@string/admob_id" />

</RelativeLayout>

RecyclerView 内滚动时,工具栏会正确隐藏,并且一切似乎都运行良好。我想如果你遵循类似的原则,你应该做好准备。

【讨论】:

    【解决方案2】:

    如果要删除状态栏白色,则必须删除下一行

    <item name="android:statusBarColor">@android:color/transparent</item>`
    

    v21/styles.xml

    谢谢举例。

    【讨论】:

      【解决方案3】:
      <android.support.design.widget.CoordinatorLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:id="@+id/slidingLayout"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
          <android.support.design.widget.AppBarLayout
              android:id="@+id/appbar"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">
      
              <android.support.v7.widget.Toolbar
                  android:id="@+id/toolbar"
                  android:layout_width="match_parent"
                  android:layout_height="?attr/actionBarSize"
                  android:background="@color/red"
                  app:layout_scrollFlags="scroll|enterAlways"/>
      
              <LinearLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginLeft="50dp"
                  android:layout_marginRight="50dp"
                  android:layout_marginTop="20dp"
                  android:background="@drawable/rounded_background"
                  android:orientation="horizontal"
                  android:padding="6dp"
                  app:layout_scrollFlags="scroll|enterAlways">
      
                  <EditText
                      android:id="@+id/search"
                      android:layout_width="0dp"
                      android:layout_height="fill_parent"
                      android:layout_weight="6"
                      android:background="@null"
                      android:fontFamily="sans-serif-light"
                      android:hint="Unesite grad"
                      android:paddingLeft="16dp"
                      android:paddingStart="16dp"/>
      
                  <ImageView
                      android:id="@+id/cancelSearch"
                      android:layout_width="0dp"
                      android:layout_height="40dp"
                      android:layout_weight="1"
                      android:padding="10dp"
                      android:src="@drawable/ic_cancel" />
              </LinearLayout>
          </android.support.design.widget.AppBarLayout>
      
          <android.support.v7.widget.RecyclerView
              android:id="@+id/recyclerView"
              android:layout_width="match_parent"
              android:layout_height="fill_parent"
              android:layout_below="@id/appbar"
              android:background="#ffffff"
              app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
      </android.support.design.widget.CoordinatorLayout>
      

      检查这是否适合您。

      【讨论】:

        猜你喜欢
        • 2011-03-30
        • 2019-10-22
        • 2017-05-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-06-11
        • 1970-01-01
        相关资源
        最近更新 更多