【问题标题】:Position view outside of ConstraintLayout在 ConstraintLayout 之外定位视图
【发布时间】:2018-03-27 23:52:49
【问题描述】:

我想将视图定位在 ConstraintLayout 之外,以使用滑动动画为它们设置动画。我尝试过设置 constraintBottom_toTopOf="parent" 之类的约束,但 View 保留在容器内。

请注意,我想通过使用内置动画的约束来实现这一点,而不是使用代码内动画。

知道我该怎么做吗?

我在 Android Studio 3.0 Beta 7 中使用 compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

这是一个简单的 xml 文件,应该将视图放在容器之外:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent">

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

但这就是结果

【问题讨论】:

  • 我从未尝试过,但是将偏差从 0 变为 1 怎么样?
  • 请分享你的xml
  • 发布您使用的ConstraintLayout 的版本。确保您没有定义将视图拉回布局的其他约束。此外,查看 XML 也会有所帮助。
  • 我添加了xml和ConstraintLayout版本
  • 我能够通过设置填充和 clipToPadding="false" 来完成这项工作1. 当在 ConstraintLayout 的右/左边缘时,imageView 被剪成两半。通过将 ConstraintLayout 的 rightPadding 和 leftPadding 设置为 ImageView 宽度的一半,它不再被裁剪(并且百分比定位仍然有效)。

标签: android android-layout material-design android-view android-constraintlayout


【解决方案1】:

这似乎是ConstraintLayout 1.1.0-beta1 的问题;它在ConstraintLayout 1.1.0-beta3 中按预期工作。

更新到ConstraintLayout 1.1.0-beta3。我还要注意,您需要通过执行以下操作来水平限制您的视图。

<View
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toTopOf="parent" />

附带说明,ConstraintLayout 不接受负边距。请参阅this Stack Overflow 有关负边距的问题和ConstraintLayout

【讨论】:

  • 我接受了这个答案,因为它解决了这个特殊问题,但知道它带回了一个老问题,即 ConstraintLayout 在嵌套滚动视图中被搞砸了
  • @DavidSeroussi 很遗憾听到另一个问题出现了。您可以使用导致问题的 XML 发布问题来解决嵌套滚动视图问题。
【解决方案2】:

在每个视图中都可以使用负边距,这会将视图置于父视图之外,然后设置裁剪参数。

android:clipChildren="false"
android:clipToPadding="false"

这将使视图不被裁剪。

【讨论】:

  • 负边距在问题中提到的约束布局中不起作用。
【解决方案3】:

我有另一种解决问题的方法:

1.添加锚点(anchor_left)layout_constraintStart_toStartOf="parent"

2.添加YourViewlayout_constraintEnd_toStartOf="@+id/anchor_left"

就是这样!

代码:

<android.support.constraint.ConstraintLayout>
    <View
        android:id="@+id/anchor_left"
        app:layout_constraintStart_toStartOf="parent"/>

    <YourView
        android:id="@+id/ll_left"
        app:layout_constraintEnd_toStartOf="@+id/anchor_left"/>
</android.support.constraint.ConstraintLayout>

【讨论】:

  • 锚视图也对我有用。我只是控制锚视图而不是视图。直接对parent 施加约束使其超出父级,但它只停留在那个位置
【解决方案4】:

我所做的是:

  • 在 ConstraintLayout 内创建了一个 0dp 高度的视图,例如“假视图”
  • 将新的 fakeView 放置在 ConstraintLayout 的顶部

当我需要隐藏视图时,将其翻译到约束之外..

  • 更改要隐藏的视图的约束,以使 BOTTOM 连接到 FakeView 的顶部。

我认为您可以使用相同的技术将对象移动到 fakeview 的左侧或右侧。

【讨论】:

    【解决方案5】:

    一个技巧是在ConstraintLayout 本身中为您想要的一侧设置负边距。这要求对该侧有约束的其他视图进行偏移:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        ...
        android:layout_marginBottom="-48dp">
    
        <ImageButton
            android:id="@+id/leftButton"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginEnd="24dp"
            android:layout_marginBottom="72dp"
            android:background="@drawable/shape_next_button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    
        <ImageButton
            android:id="@+id/rightButton"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="24dp"
            android:background="@drawable/shape_previous_button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-07-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-29
      • 1970-01-01
      相关资源
      最近更新 更多