代码之家 › 专栏 › 技术社区 › Ariam1

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

android-constraintlayout layout android-layout android

1

Ariam1 · 技术社区 · 8 年前

我想创建一种你在图片中看到的布局,我想 负边距 在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上找不到一个关键字可以找到这样的例子。

2 回复 | 直到 8 年前

1

5

Vikasdeep Singh 7 年前

干得好:

<?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" 到 空间 看了你就完了。

我跟着 this 公共软件的答案。

2

1

Ovidiu 8 年前

至少有两种不同的方法可以实现这一点。

1。锚

如果希望徽标的中心正好位于textView的底部边缘,请使用coordinatorLayout作为徽标和textView的直接父视图,并使用 app:layout_anchor 和 app:layout_anchorGravity 徽标上的XML属性。例如, 应用程序:布局锚点 将是textView的ID,以及 应用程序:Layout_Anchorgravity 会是“底端”。

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

2.负边距(是)

android实际上支持负利润,尽管可能没有限制布局。不过,它确实是相对延迟的!考虑到您希望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将被绘制在它的上面。