Android：将图像和文本视图放在另一个图像上

Posted 2023-04-18

技术标签:

【中文标题】Android：将图像和文本视图放在另一个图像上【英文标题】：Android: Put an image and a text view over another image 【发布时间】：2021-12-12 08:07:56 【问题描述】：

我正在尝试创建一个具有两个背景图像和一个带有语言选择下拉菜单的文本视图的屏幕。第一个背景图像填满整个屏幕，第二个背景图像位于中心。然后我们有一个语言下拉菜单，它应该位于底部。我想实现这样的目标：

我看到 FrameLayout 为我们提供了将图像逐个嵌套的能力，但是使用我的代码，我将语言下拉菜单放在顶部而不是底部。我对 android 很陌生，正在修复一些屏幕，非常感谢任何帮助。这是我的代码：

<FrameLayout 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_
android:layout_
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >

<ImageView
    android:layout_
    android:layout_
    android:background="@drawable/image_1"
    android:scaleType="fitXY" />

<ImageView
    android:layout_
    android:layout_
    android:layout_gravity="center_horizontal"
    android:layout_marginBottom="20dip"
    android:background="@drawable/image_2" />

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical"
    tools:context=".ui.instructionview.WelcomeActivity">
    
    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:layout_
            android:layout_
            android:gravity="center"
            android:padding="@dimen/common_10dp"
            android:id="@+id/preferredData"
            android:text=""
            android:layout_marginBottom="@dimen/common_10dp"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="#2c5a99"
            android:textStyle="bold" />

        <RelativeLayout
            android:layout_
            android:layout_
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/common_20dp"
            android:layout_marginRight="@dimen/common_20dp"
            android:background="@drawable/bg_dashboard_line_outline">

            <TextView
                android:id="@+id/language_text"
                android:layout_
                android:layout_
                android:layout_toLeftOf="@+id/change_lang"
                android:gravity="left"
                android:padding="@dimen/common_10dp"
                android:layout_marginLeft="@dimen/common_20dp"
                android:text="English"
                android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                android:textColor="#343f45" />

            <Button
                android:id="@+id/change_lang"
                android:layout_
                android:layout_
                android:layout_alignParentEnd="true"
                android:layout_marginRight="@dimen/common_30dp"
                android:backgroundTint="#183274"
                android:gravity="center_vertical"
                android:text="CHANGE" />

        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

【问题讨论】：

【参考方案1】：

1.这会给你一些开始

2.仔细阅读代码，使用一些margin和padding来美化

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/chemistry">

    <FrameLayout
        android:id="@+id/framelayout"
        android:layout_
        android:layout_
        android:layout_centerInParent="true">

        <ImageView
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:layout_marginBottom="20dip"
            android:background="@drawable/calculator" />
    </FrameLayout>


    <LinearLayout
        android:layout_
        android:layout_
        android:layout_below="@+id/framelayout"
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:id="@+id/preferredData"
            android:layout_
            android:layout_
            android:layout_marginBottom="10dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="fedsgsd vfsm "
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="#2c5a99"
            android:textStyle="bold" />

        <RelativeLayout
            android:layout_
            android:layout_
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:gravity="end">

            <TextView
                android:id="@+id/language_text"
                android:layout_
                android:layout_
                android:layout_marginLeft="20dp"
                android:layout_toLeftOf="@+id/change_lang"
                android:gravity="left"
                android:padding="10dp"
                android:text="English"
                android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                android:textColor="#343f45" />

            <Button
                android:id="@+id/change_lang"
                android:layout_
                android:layout_
                android:layout_alignParentEnd="true"
                android:layout_marginRight="30dp"
                android:backgroundTint="#183274"
                android:gravity="center_vertical"
                android:text="CHANGE" />

        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

【讨论】：

【参考方案2】：

您真的应该考虑使用 ConstraintLayout 而不是 FrameLayout，因为它为您提供了更多的控制权和灵活性。如果您不了解 ConstraintLayout，我建议您尽快学习它。您可以通过 this 播放列表快速深入了解。使用 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"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_
   android:layout_
   android:background="@color/black"
   android:padding="24dp"
   tools:context=".MainActivity">


    <!--Here I have set height and width of the ImageView to 0dp
    So that I can maintain the same aspect ratio for all kind of screen sizes.
    -->
    <ImageView
       android:id="@+id/image"
       android:layout_
       android:layout_
       android:background="@color/white"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintDimensionRatio="1:1"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <Spinner
       android:id="@+id/spinner"
       android:layout_
       android:layout_
       android:layout_marginTop="24dp"
       android:background="@color/white"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/image" />


 </androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

以上是关于Android：将图像和文本视图放在另一个图像上的主要内容，如果未能解决你的问题，请参考以下文章

将图像放在另一个在 Android 中拉伸的图像上

使用python将图像放在另一个图像上

将屏幕分成两半并将图像视图放在两半的两半上

如何将响应式文本 div 放在另一个响应式 div 旁边

Android - 如何将一个片段放在另一个片段上

如何在 XCode 中将图像和文本放在相同的布局中