【问题标题】:Android scroll whole screen instead of only listviewAndroid滚动整个屏幕而不是仅列表视图
【发布时间】:2016-04-20 15:09:38
【问题描述】:

我的布局结构如下:

RelativeLayout
  -LinearLayout(Vertical)
  |  ...
  |  ...
  -LinearLayout(Vertical)
     ListView

ListView 有一堆由ArrayAdapter 设置的项目。目前,只有ListView 是可滚动的,第一个LinearLayout 保留在其位置。但是,我希望整个屏幕都是可滚动的,所以如果用户滚动得足够远,ListView 可能会占据整个屏幕,如果有足够的列表项。

此图像说明了所需的行为(滚动前后) 红框是第一个LinearLayout,绿框是LinearLayoutListView

感谢您的宝贵帮助!

【问题讨论】:

  • 一种快速的解决方法是将您的第一个(标题)LinearLayout 设置为 LsitView 中的第一项 :)
  • 您可以使用ScrollView 滚动屏幕的全部内容,但您不能在其中使用可滚动的 ListView,因此您的选择受限于该设计。我在我的一个应用程序中执行此操作,并且必须创建一个自定义 ListView,在其中手动添加视图以创建模拟列表。但是,这样做的问题是您失去了实际 ListView 的性能和内存优势。
  • 我遵循了将列表视图的标题设置为第一个线性布局的建议,并且成功了!谢谢

标签: android android-layout listview android-coordinatorlayout


【解决方案1】:

如果您不必使用 RelativeLayout,您可以使用 CoordinatorLayout 尝试不同的结构,如下所示:

<CoordinatorLayout >
    <AppBarLayout >
        <CollapsingToolbarLayout >
             <!-- first layout with the property layout_scrollFlags="scroll" -->
        </CollapsingToolbarLayout >
    </AppBarLayout >

    <ListView > <!-- or RecyclerView to be more updated -->
</CoordinatorLayout >

如果您必须使用 RelativeLayout,您可以选择在 Scrollview 中实现所有内容(性能不佳并重新发明轮子),或者您可以将视图添加为列表视图的标题

-----为了清楚起见,这里是我的布局

<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context="it.italia.playground.CollapseActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:padding="@dimen/padding16"
                app:layout_collapseMode="parallax">

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentTop="true"
                    android:layout_centerInParent="true"
                    android:maxHeight="@dimen/padding16"
                    android:scaleType="centerCrop"
                    android:src="@drawable/img"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/image"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="@dimen/padding16"
                    android:text="text title"
                    />
            </RelativeLayout>


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

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


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

【讨论】:

  • CoordinatorLayout 不起作用。但是,我按照您的建议将视图添加为列表视图的标题,它就像一个魅力!非常感谢!
【解决方案2】:

就像 wolfy 说的,CoordinatorLayout 是最好的选择,但ListView 在这种情况下不起作用,因为它没有实现与CoordinatorLayout 通信所需的正确回调接口。 CoordinatorLayout 如何实际协调其子视图的滚动? 您需要切换ListView 以获得实现NestedScrollingChild 接口的视图,您实际上不需要为这些方法编写代码,像RecyclerViewSwipeRefreshLayout 这样的视图会为您完成这项工作;)

CoordinatorLayout 又实现了NestedScrollingParent 接口,从而为您节省了另一份工作量(谷歌文档):

此接口应由希望支持嵌套子视图委托的滚动操作的 ViewGroup 子类实现。

如果您需要滑动刷新操作,SwipeRefreshLayout 实现了这两个接口。查看视图层次结构,它位于CoordinatorLayoutRecyclerView 之间,因此它可以同时处理NestedScrollingChildNestedScrollingParent

底线:将ListView 切换为RecyclerView 或使ListView 实现NestedScrollingChild。它应该可以工作!

关于使用新 API 处理滚动的两个很好的解释:

https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout

https://lab.getbase.com/nested-scrolling-with-coordinatorlayout-on-android/

代码sample 用于从演示中实现NestedScrollingChild

【讨论】:

  • 非常感谢您的解释!我会保留这个作为参考!
【解决方案3】:

使用适合屏幕的滚动布局并使列表视图包裹内容

【讨论】:

    【解决方案4】:

    您可以使用RecyclerView 代替ListView,然后您可以将列表包装在NestedScrollView 中并调用ViewCompat.setNestedScrollingEnabled(recyclerView, false)。在顶部,您可以使用另一个 ScrollView 与所有这些内容(红色标记的视图在您的图形中)并将 NestedScrollView绿色标记的列表)作为一个孩子放在里面。

    NestedScrollView 负责动态设置高度,否则 recyclerView 将只使用一个固定高度。请注意,如果列表变得太长,它可能会有不必要的 UI 延迟,那么通过在列表上膨胀不同的布局将所有内容设置为适配器中列表的一部分会更有效。另一方面,这也可能有点棘手,因为整个布局现在是列表的一部分,并且对其进行的所有更改都需要通过适配器。

    【讨论】:

      【解决方案5】:

      这是解决方案:

      <?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"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:fitsSystemWindows="true">
      
          <!--here if you want a fab-->
          <android.support.design.widget.FloatingActionButton
              android:id="@+id/add_edu_fab"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentBottom="true"
              android:layout_alignParentEnd="true"
              android:layout_marginBottom="@dimen/dim_16dp"
              android:layout_marginEnd="@dimen/dim_16dp"
              app:srcCompat="@drawable/ic_plus_24dp" />
      
      
           <!--starting the scroll of the layout-->
          <ScrollView
              android:layout_width="match_parent"
              android:layout_height="match_parent">
              <!--scroll view-->
              <RelativeLayout
                  android:id="@+id/mainScrollChild"
                  android:layout_width="match_parent"
                  android:layout_height="0dp">
      
                  <!--start adding your red part-->
                  <android.support.v7.widget.CardView
                      android:id="@+id/cardView"
                      android:layout_width="match_parent"
                      android:layout_height="150dp"
                      android:layout_margin="8dp"
                      android:padding="1dp"/>                    
      
                  <!--end Red Part-->
      
                  <!--start the green part (recyclerView)-->
                  <RelativeLayout
                      android:id="@+id/rel2"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:layout_below="@id/cardView">
      
                      <android.support.v4.widget.NestedScrollView
                          android:layout_width="match_parent"
                          android:layout_height="match_parent">
      
                          <android.support.v7.widget.RecyclerView
                              android:id="@+id/recyclerView"
                              android:layout_width="match_parent"
                              android:layout_height="wrap_content" />
                      </android.support.v4.widget.NestedScrollView>
                  </RelativeLayout>
                  <!--end green part-->
              </RelativeLayout>
          </ScrollView>
      </RelativeLayout>
      

      输出:

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-10-13
        • 1970-01-01
        • 2021-10-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多