Android：將影像和文本視圖放在另一個影像上-有解無憂

我正在嘗試創建一個具有兩個背景影像和一個帶有語言選擇下拉選單的文本視圖的螢屏。第一個背景影像填滿整個螢屏，第二個背景影像位于中心。然后我們有一個語言下拉選單，它應該位于底部。我想實作這樣的目標：

Android：將影像和文本視圖放在另一個影像上

我看到 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_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/image_1"
    android:scaleType="fitXY" />

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.instructionview.WelcomeActivity">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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_width="match_parent"
            android:layout_height="wrap_content"
            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_width="match_parent"
                android:layout_height="wrap_content"
                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_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_marginRight="@dimen/common_30dp"
                android:backgroundTint="#183274"
                android:gravity="center_vertical"
                android:text="CHANGE" />

        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

uj5u.com熱心網友回復：

1.這會給你一些開始

2.仔細閱讀代碼使用一些邊距和填充使這個漂亮

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

    <FrameLayout
        android:id="@ id/framelayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <ImageView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:layout_marginBottom="20dip"
            android:background="@drawable/calculator" />
    </FrameLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@ id/framelayout"
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:id="@ id/preferredData"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:gravity="end">

            <TextView
                android:id="@ id/language_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                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_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_marginRight="30dp"
                android:backgroundTint="#183274"
                android:gravity="center_vertical"
                android:text="CHANGE" />

        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

uj5u.com熱心網友回復：

您真的應該考慮使用ConstraintLayout而不是FrameLayout，因為它為您提供了更多的控制和靈活性。如果您不了解 ConstraintLayout，我建議您盡快學習。您可以通過此播放串列進行快速深入的概覽。使用 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_width="match_parent"
   android:layout_height="match_parent"
   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_width="0dp"
       android:layout_height="0dp"
       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_width="match_parent"
       android:layout_height="40dp"
       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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339493.html

標籤：安卓安卓布局 android-线性布局 android-相对布局 android-framelayout

上一篇：如何在Mac上升級Node.js？

下一篇：如何將AWS區域傳遞給lambda函式？