如何将线性布局转换为约束布局？

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>