如何使布局在不同的屏幕尺寸上縮放？

Question

我的布局簡單，可以玩4種不同的關卡/模式。 問題是當我在不同屏幕尺寸上預覽布局時，它看起來不一樣： 圖片

這是布局代碼：

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="#000000">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/one"
        android:layout_alignParentTop="true"
        android:background="@drawable/mode1background"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:textColor="#000000" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/two"
        android:background="@drawable/mode2background"
        android:layout_below="@+id/one"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"
        android:textColor="#000000" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/three"
        android:background="@drawable/mode3background"
        android:layout_below="@+id/two"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:textColor="#000000" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/four"
        android:background="@drawable/mode4background"
        android:layout_below="@+id/three"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:textColor="#000000" />

</RelativeLayout>

如何使每個TextView成為屏幕大小的1/4。

Answer 1

您可以使用具有android:layout_weight屬性的垂直LinearLayout 。

像這樣：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#000000"
              android:orientation="vertical">

    <TextView
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode1background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

    <TextView
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode2background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

    <TextView
        android:id="@+id/three"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode3background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

    <TextView
        android:id="@+id/four"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode4background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

</LinearLayout>

查看有關LinearLayout和布局權重的開發人員指南： https : //developer.android.com/guide/topics/ui/layout/linear.html

Answer 2

將父布局更改為具有垂直方向的LinearLayout 。 然后將每個孩子的身高設置為0dp並將體重設置為1

例：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="1"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="2"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="3"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="4"/>

</LinearLayout>

Answer 3

在resourcefolder中創建以下目錄，並將不同分辨率的背景圖像放置在各個目錄中

可繪制ldpi

繪圖分辨率

drawable-hdpi

drawable-xhdpi

drawable-xxhdpi

drawable-xxxhdpi

請注意，所有文件夾中的圖片名稱應相同，Android會根據手機的dpi自動從相應文件夾中選擇圖片

Answer 4

如果要占據設備的整個高度，則需要使用具有垂直方向的線性布局，並為所有TextView賦予屬性'layout_weight'= 1。 樣例代碼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_weight="1"
        android:background="@drawable/mode1background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

    <TextView
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/one"
        android:layout_weight="1"
        android:background="@drawable/mode2background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

    <TextView
        android:id="@+id/three"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/two"
        android:layout_weight="1"
        android:background="@drawable/mode3background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

    <TextView
        android:id="@+id/four"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/three"
        android:layout_weight="1"
        android:background="@drawable/mode4background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

</LinearLayout>