如何使用ConstrainLayout作为空视图

时间:2017-10-10 01:34:46

标签: android listview

我在另一个内部使用两个子ConstraintLayouts。第一个子视图包含空视图,第二个子视图包含我的列表视图和浮动操作按钮。当列表视图中没有数据时,空视图会正确显示在其位置。但是,当列表视图中有数据时,列表视图会在布局上的大空区域后显示,就像空视图仍然占用其空间一样,尽管它未显示。
这是布局:

<?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_toTopOf="parent"
        android:layout_below="@+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_constraintRight_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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/content_area"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="?attr/actionBarSize"
        >
        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"

            />
        <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>

以下是包含和不包含listview项目的应用启动时的布局:
enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

在您的代码中使用此功能。

view.setVisibility(View.VISIBLE);
view.setVisibility(View.GONE);

默认的xml布局。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    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="584dp"
    android:layout_height="64dp"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>


<android.support.constraint.ConstraintLayout
    android:id="@+id/empty_view"
    android:layout_width="584dp"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:layout_marginTop="64dp"
    android:visibility="gone"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="8dp">

    <TextView
        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"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="0dp"/>

    <ImageView
        android:id="@+id/iv_empty_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/list_is_empty"
        android:src="@drawable/emptybox"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_empty_view"/>
</android.support.constraint.ConstraintLayout>

<android.support.constraint.ConstraintLayout
    android:id="@+id/content_area"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="64dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ListView
        android:id="@+id/listview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_below="@+id/listview"
        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>

content_area可见,empty_view已消失。

并在您的代码中。

  • 如果ListView的数据不为空,则不做任何事情。
  • 如果ListView的数据为空,则应执行此操作。

    // set empty_view visible
    ConstraintLayout empty_view = (ConstraintLayout) findViewById(R.id.empty_view);
    empty_view.setVisibility(View.VISIBLE);
    // set content_area gone
    ConstraintLayout content_area = (ConstraintLayout) findViewById(R.id.content_area);
    content_area.setVisibility(View.GONE);