如何在布局中使用 css "negative margin" 的相同技术?
How to use same technique of css "negative margin" in a layout?
我想创建您在图片中看到的这种布局,我想像 CSS 中的 negative margin 但没有结果。请帮助我实现它。
<?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.
上找不到导致此类示例的关键字
给你:
<?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,所以我们需要使用变通方法。添加一个空视图,即 ImageView
和 TextView
之间的 Space
并将 android:layout_marginBottom="32dp"
设置为 Space
视图,您就完成了。
我遵循了 CommonsWare 的 this 答案。
至少有两种不同的方法可以实现这一点。
1.主播
如果您希望徽标的中心恰好位于 TextView 的底部边缘,请使用 CoordinatorLayout 作为徽标和 TextView 的直接父视图,并使用 app:layout_anchor
和 app:layout_anchorGravity
XML 标志上的属性。对于您的示例,app:layout_anchor
的值将是 TextView 的 ID,而 app:layout_anchorGravity
的值将是 "bottom|end".
请注意,通过将徽标封装在父级布局中,将父级锚定到 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 将在其之上绘制。
我想创建您在图片中看到的这种布局,我想像 CSS 中的 negative margin 但没有结果。请帮助我实现它。
<?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.
给你:
<?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,所以我们需要使用变通方法。添加一个空视图,即 ImageView
和 TextView
之间的 Space
并将 android:layout_marginBottom="32dp"
设置为 Space
视图,您就完成了。
我遵循了 CommonsWare 的 this 答案。
至少有两种不同的方法可以实现这一点。
1.主播
如果您希望徽标的中心恰好位于 TextView 的底部边缘,请使用 CoordinatorLayout 作为徽标和 TextView 的直接父视图,并使用 app:layout_anchor
和 app:layout_anchorGravity
XML 标志上的属性。对于您的示例,app:layout_anchor
的值将是 TextView 的 ID,而 app:layout_anchorGravity
的值将是 "bottom|end".
请注意,通过将徽标封装在父级布局中,将父级锚定到 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 将在其之上绘制。