Android 如何将LayoutBackground移动到ImageView后面
我试图在我的应用程序的右上角添加一个通知栏,显示收件箱中有多少MSG。 稍后,我想添加一个自定义绘图到我的背景,现在我只添加了一个黑色作为背景,以达到我的目标,正如您在我的图像左侧看到的那样:这是我的ImageView结尾的TextView约束。我希望我的背景位于imageview之后,但不要超出其尺寸,也不要在imageview之前开始(您将看到textview矩形的左上角和右下角) 我被以下代码卡住了:Android 如何将LayoutBackground移动到ImageView后面,android,xml,android-layout,kotlin,android-constraintlayout,Android,Xml,Android Layout,Kotlin,Android Constraintlayout,我试图在我的应用程序的右上角添加一个通知栏,显示收件箱中有多少MSG。 稍后,我想添加一个自定义绘图到我的背景,现在我只添加了一个黑色作为背景,以达到我的目标,正如您在我的图像左侧看到的那样:这是我的ImageView结尾的TextView约束。我希望我的背景位于imageview之后,但不要超出其尺寸,也不要在imageview之前开始(您将看到textview矩形的左上角和右下角) 我被以下代码卡住了: <androidx.constraintlayout.widget.Constr
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black"
app:layout_constraintStart_toEndOf="@+id/imageView"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="@color/white"
android:paddingStart="@dimen/default_padding"
android:padding="@dimen/small_padding"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="@+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@drawable/ic_contact"/>
</androidx.constraintlayout.widget.ConstraintLayout>
如何解决此问题?将textview的约束更改为从imageView开始,并将文本对齐添加到textview
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/msg_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/black"
app:layout_constraintStart_toStartOf="@+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="@color/white"
android:paddingStart="@dimen/default_padding"
android:padding="@dimen/default_padding"
android:textAlignment="textEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="@+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@drawable/ic_contact" />
</androidx.constraintlayout.widget.ConstraintLayout>
约束布局作为框架布局工作。对于此类设计,我们可以使用指南。指南对于此类视图非常有效。 我对你的布局做了一些修改,希望能对你有所帮助
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/text_msg_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/black_primary"
android:paddingStart="@dimen/space_28"
android:text="0 MSGs"
android:textAlignment="textEnd"
android:textColor="@color/white_color"
android:layout_marginEnd="@dimen/space_28"
android:paddingEnd="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="@id/imageView"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="@+id/imageView" />
<ImageView
android:id="@+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:layout_margin="@dimen/space_28"
android:background="@drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"
app:layout_constraintEnd_toEndOf="@id/imageView"
app:layout_constraintStart_toStartOf="@id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
如果没有其他视图被限制到文本视图,您可以简单地对文本视图应用负“x”翻译:
android:translationX=“-15dp”
。我选择了-15dp
,但它可能是另一个适用于布局的负值
SebastienRieu的解决方案应该可行,但您可能需要在TextView的开头添加边距,以隐藏其左上角和左下角
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/msg_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:padding="@dimen/small_padding"
android:paddingStart="@dimen/default_padding"
android:text="0 MSGs"
android:textColor="@color/white"
android:translationX="-15dp"
app:layout_constraintBottom_toBottomOf="@id/imageView"
app:layout_constraintStart_toEndOf="@+id/imageView"
app:layout_constraintTop_toTopOf="@id/imageView" />
<ImageView
android:id="@+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:background="@drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>