在ConstraintLayout中使用ListView [英] Using ListView inside ConstraintLayout

问题描述

我在 Android开发人员上已读到可以使用ConstraintLayout为应用程序设计响应式布局.有一个父ConstraintLayout，其中包含一个工具栏和另外两个ConstraintLayouts.第一个子ConstraintLayout将用作我的ListView的空视图.第二个ConstraintLayout保存我的列表视图和一个浮动操作按钮.当前，列表视图显示在工具栏下方，而不是下方.另外，如屏幕截图所示，浮动操作按钮显示在可见区域之外.
请参见下面的屏幕截图:

I have read on Android Developers that ConstraintLayout can be used to design a responsive layout for an application. There is a parent ConstraintLayout which houses a toolbar and two other ConstraintLayouts. The first child ConstraintLayout is going to act as empty view for my ListView. The second ConstraintLayout holds my listview and a floating action button. Currently, the the listview appears under the Toolbar, rather than below it. Also as seen in the screenshot, the floating action button appears outside visible area.
See the screenshot below:

这是列表为空时的应用布局:

And this is the app layout when the list is empty:

这是我的布局代码:

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


<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


    <android.support.constraint.ConstraintLayout
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        android:id="@+id/empty_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="?attr/actionBarSize">

        <TextView
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/tv_empty_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/list_is_empty"
            android:textSize="@dimen/large_text"
            android:textStyle="bold"
            />

        <ImageView
            android:id="@+id/iv_empty_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/tv_empty_view"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:contentDescription="@string/list_is_empty"
            android:src="@drawable/emptybox" />
    </android.support.constraint.ConstraintLayout>
    <android.support.constraint.ConstraintLayout
        android:id="@+id/main_area"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="?actionBarSize"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintBottom_toBottomOf="parent">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="?attr/actionBarSize"
        android:layout_marginLeft="@dimen/margin_side"
        android:layout_marginStart="@dimen/margin_side"
        android:layout_marginRight="@dimen/margin_side"
        android:layout_marginEnd="@dimen/margin_side"
        android:layout_marginTop="?attr/actionBarSize"
        />
    <android.support.design.widget.FloatingActionButton
        android:layout_below="@+id/listview"
        android:id="@+id/fab"
        android:layout_width="@android:dimen/notification_large_icon_width"
        android:layout_height="@android:dimen/notification_large_icon_height"
        android:layout_gravity="end|bottom"
        android:src="@drawable/plus"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    </android.support.constraint.ConstraintLayout>



</android.support.constraint.ConstraintLayout>

推荐答案

这是您想要的结果，为了使它在我的工作室中正常工作，我进行了一些更改，例如margin，src等，因此您必须选择任何内容您正在使用，只需用您的src和边距等替换我的...

Here is your desired result, I've made some changes like margins, src just to make it work in my studio, so you'll have to choose whatever you were using, just replace mine with your src's and margins etc...

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/content"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 >

 <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="56dp"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>


<android.support.constraint.ConstraintLayout
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    android:id="@+id/empty_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <TextView
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/tv_empty_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="list_is_empty"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ImageView
        android:id="@+id/iv_empty_view"
        android:layout_width="20dp"
        android:layout_height="20dp"
        app:layout_constraintTop_toBottomOf="@+id/tv_empty_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#fff222" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
    android:id="@+id/main_area"

    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <ListView
        android:id="@+id/listview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <android.support.design.widget.FloatingActionButton
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        android:id="@+id/fab"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@drawable/bg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

以下是输出:

Here's the output:

这篇关于在ConstraintLayout中使用ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！