【问题标题】:ContraintLayout: Optional top viewConstraintLayout:可选顶视图
【发布时间】:2018-05-30 19:43:10
【问题描述】:

我想使用 ConstraintLayout 进行以下设计。屏幕应分为顶部(屏幕的 50%)和底部(屏幕的 50%)。根据一些应用逻辑,顶部应该可以隐藏,让底部使用顶部剩余的空白空间。

我的布局如下:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:visibility="visible"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0"
    app:srcCompat="@android:drawable/ic_input_add" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

比较图像在左侧显示布局的外观,两个部分均可见。在右侧,顶部已消失,但底部 RecyclerView 不会拉伸以使用顶部空间。我为 ImageView 和 RecyclerView 添加了填充以更好地说明视图之间的关系。

【问题讨论】:

    标签: android android-layout android-constraintlayout


    【解决方案1】:

    您可以为链中的两个views 设置相等的垂直权重,这样每个都占据 50% 的空间。如果您在代码或 XML 中将顶部 view 的可见性设置为 GONE,则底部 view 将填充剩余空间。

    <?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:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/recyclerView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:drawable/ic_input_add"
            app:layout_constraintVertical_weight="1" />
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            app:layout_constraintVertical_weight="1" />
    
    </android.support.constraint.ConstraintLayout>
    

    【讨论】:

    • 谢谢。这确实解决了我的问题,而且看起来更简单。虽然我仍然认为我发布的解决方案应该是一个有效的工作解决方案,但由于一些奇怪的问题它不起作用。
    • 您的代码按预期工作。指南只是一个辅助对象,并且有一个固定的位置。即使顶部视图消失,底部视图也没有理由向上扩展超出此准则。
    • 底部视图以 ImageView 为界,而不是指南。由于 ImageView 是 gone 并显示在左上角,因此 RecyclerView 应该展开以保持其顶部限制在 ImageView 的底部。
    • 哦,是的,你是对的,我错过了。尽管 ImageView 为gone,但仍会遵守约束,并且不会更改实际尺寸(在右侧,它仍受指南的约束)。
    猜你喜欢
    • 2020-07-06
    • 1970-01-01
    • 2019-07-03
    • 1970-01-01
    • 1970-01-01
    • 2020-06-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多