Question

我想创建您在图片中看到的这种布局，并且我认为CSS中的负边距却没有结果。请帮助我实现它。

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity">
    <TextView
    android:id="@+id/txt_home_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:elegantTextHeight="true"
    android:padding="30dp"
    android:text="Welcome!"
    android:textColor="#ffffff"
    android:textSize="28sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp">
    <ImageView
        android:id="@+id/home_logo"
        android:layout_width="90dp"
        android:layout_height="80dp"
        android:scaleType="fitCenter"
        android:src="@drawable/mylogo" />
</FrameLayout>
</android.support.constraint.ConstraintLayout>

这是盒子：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#2d3669"></solid>
            <corners android:radius="50dp"></corners>
            <gradient android:angle="90"
                android:startColor="#392800"
                android:endColor="#faae03"/>
        </shape>
    </item>
</selector>

我在ConstraintLayout中知道如何使物品彼此靠近，但我不知道如何在TextView上放置日志，以便其中一半留在外面！我在Google上找不到导致此类示例的关键字。

Answer 1

您在这里：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">

<TextView
    android:id="@+id/txt_home_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:elegantTextHeight="true"
    android:padding="30dp"
    android:text="Welcome!"
    android:textColor="#ffffff"
    android:textSize="28sp"
    tools:layout_editor_absoluteX="129dp"
    tools:layout_editor_absoluteY="0dp" />

<android.support.v4.widget.Space
    android:id="@+id/space"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="32dp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_home_title"
    app:layout_constraintLeft_toLeftOf="@id/txt_home_title"
    app:layout_constraintRight_toRightOf="@id/txt_home_title" />

<ImageView
    android:id="@+id/home_logo"
    android:layout_width="98dp"
    android:layout_height="84dp"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintHorizontal_bias="0.687"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space" />

</android.support.constraint.ConstraintLayout>

输出：

说明：

我们不能在ConstraintLayout中使用负边距，因为它是not officially supported，因此我们需要使用变通方法。在Space和ImageView之间添加一个空白视图，即TextView，并将android:layout_marginBottom="32dp"设置为Space视图，就可以完成。

我遵循了CommonsWare的this答案。

Answer 2

至少有两种方法可以实现这一目标。

1。锚点

如果您希望徽标的中心正好位于TextView的底部边缘，请使用CoordinatorLayout作为徽标和TextView的直接父视图，并使用app:layout_anchorGravity和app:layout_anchor XML徽标上的属性。对于您的示例，app:layout_anchorGravity的值将是TextView的ID，而<RelativeLayout ... <TextView android:id="@+id/myTextView" ... /> <ImageView android:layout_below="@+id/myTextView" android:layout_marginTop="-30dp" ... /> </RelativeLayout>的值将是“ bottom | end”。

请注意，通过将徽标封装在父级布局中，将父级锚定到TextView，然后在徽标上设置边距以在透明父级中移动徽标，应该能够实现所需的任何定位。

2。负边距（yep）

Android实际上支持负边距，尽管可能不支持ConstraintLayout。它绝对可以与RelativeLayout一起使用！考虑到您希望ImageView与TextView重叠，它看起来像这样：

<div class="container">
  <div class="child">
  </div>
  <div class="child-2">
  </div>
</div>

在执行此操作时也请记住Z顺序。在上面的示例中，ImageView将绘制在TextView的顶部，因为它是在其父级的TextView之后声明的。如果首先要声明ImageView，则将在其顶部绘制TextView。

如何在布局中使用CSS“负边距”的相同技术？

2 个答案: