如何將線性布局轉換為約束布局？

Question

我開發了一個應用程序，我在每個活動中都使用了線性布局。當我在手機（諾基亞 5.1 plus）上運行它時，每個活動的布局看起來與我在 android studio 中設計的完全相同。 但是當我在另一部像三星 J1 這樣的小手機上運行應用程序時，布局就搞砸了。一些按鈕，圖像不在屏幕上。所以要解決這個問題，我的意思是讓每個設備的布局都相同，我可以使用約束布局嗎？

實際上我試圖通過右鍵單擊組件樹將布局轉換為約束布局......但轉換后它看起來不一樣。一切都搞砸了。

所以我想知道的是，如何使布局在每個設備中看起來都一樣？

如果方法是將其轉換為約束布局，如何做到沒有我提到的最后一個問題？

這是我的活動的 xml 代碼之一。

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".alkaned">

    <ImageView
        android:id="@+id/ivBack3"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="375dp"
        android:clickable="true"
        app:srcCompat="@drawable/back" />

    <ImageView
        android:id="@+id/imageView198"
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:layout_marginTop="75dp"
        app:srcCompat="@drawable/alkanesnew" />

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneM"
        android:layout_width="match_parent"
        android:layout_height="60dp"

        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView401"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak idod.kakd wdldr "
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView209"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_gravity="center_vertical"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneS"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView405"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak Ndckh jk m%;sl%shd"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView212"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneR"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView406"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak iïnkao mßj¾;k yd m%;sl%shd idrdxYh"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView215"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="70dp"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-3940256099942544/6300978111"></com.google.android.gms.ads.AdView>
</LinearLayout>

Answer 1

您可以使用庫來處理不同尺寸設備上的 UI。

嘗試使用SDP庫。 有關更多信息和用法，您可以在此處查看

將此添加到您的 Gradle 以使用SDP庫。

dependencies {
  implementation 'com.intuit.sdp:sdp-android:1.0.6'
}

而在你的布局而不是dp使用spd作為

代替

android:layout_width="35dp"

用

android:layout_width="@dimen/_35sdp"

Answer 2

即使在 ConstraintLayout 控件上，如果它像您說的那樣小，也會超出屏幕。 要解決此問題，您應該在 LinearLayout 之前實現例如ScrollView ，就像這樣：

<ScrollView 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:fillViewport="true">
<LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content"
    tools:context=".alkaned">

    <ImageView
        android:id="@+id/ivBack3"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="375dp"
        android:clickable="true"
        app:srcCompat="@drawable/back" />

    <ImageView
        android:id="@+id/imageView198"
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:layout_marginTop="75dp"
        app:srcCompat="@drawable/alkanesnew" />

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneM"
        android:layout_width="match_parent"
        android:layout_height="60dp"

        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView401"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak idod.kakd wdldr "
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView209"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_gravity="center_vertical"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneS"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView405"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak Ndckh jk m%;sl%shd"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView212"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/btnAlkaneR"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView406"
                android:layout_width="397dp"
                android:layout_height="70dp"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:fontFamily="@font/newfont"
                android:text="we,aflak iïnkao mßj¾;k yd m%;sl%shd idrdxYh"
                android:textColor="#000000"
                android:textSize="30sp" />

            <ImageView
                android:id="@+id/imageView215"
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/milanpng" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="70dp"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-3940256099942544/6300978111"></com.google.android.gms.ads.AdView>
</LinearLayout>
</ScrollView>