如何在版面中使用css“负边距”的相同技术？

提问者：小点点

如何在版面中使用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上，从而使日志的一半留在外部！我在谷歌上找不到一个导致这样例子的关键词。

共2个答案

匿名用户

给你:

<?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中使用负边距，因为官方不支持负边距，因此需要使用变通方法。在imageview和textview之间添加一个空视图，即space，并将android:layout_marginbottom=“32dp”设置为space视图，您就完成了。

我遵循了Commonsware的这个答案。

匿名用户

至少有2种不同的方法来实现这一点。

1.锚

如果希望徽标的中心正好位于TextView的底部边缘，请使用CoordinatorLayout作为徽标和TextView的直接父视图，并在徽标上使用app:Layout_Anchor和app:Layout_AnchorGravityXML属性。对于您的示例，app:layout_anchor的值将是TextView的ID，app:layout_anchorgravity的值将是“bottomend”。

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

2.负边距（是）

Android实际上支持负页边距，尽管可能没有ConstraintLayout。不过，它绝对可以与RelativeLayout一起工作！考虑到您希望ImageView与TextView重叠，它应该如下所示:

<RelativeLayout
    ...

    <TextView
        android:id="@+id/myTextView"
        ... />

    <ImageView
        android:layout_below="@+id/myTextView"
        android:layout_marginTop="-30dp"
        ... />
 </RelativeLayout>

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