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

Question

I have developed an app and I used a linear layout in every activity.Layouts of every activity look exactly the same like the one I designed in android studio when I run it on my phone (Nokia 5.1 plus).我开发了一个应用程序，我在每个活动中都使用了线性布局。当我在手机（诺基亚 5.1 plus）上运行它时，每个活动的布局看起来与我在 android studio 中设计的完全相同。 But when I run the app on another small phone like Samsung J1 layout is messed up.Some buttons,images are out of the screen.So to fix that, i mean make the layout same for every device can i use a constraint layout?但是当我在另一部像三星 J1 这样的小手机上运行应用程序时，布局就搞砸了。一些按钮，图像不在屏幕上。所以要解决这个问题，我的意思是让每个设备的布局都相同，我可以使用约束布局吗？

Actually i tried to convert the layout to constraint layout by right clicking on the component tree ......But after converting it doesn't look the same.Everything is messed up.实际上我试图通过右键单击组件树将布局转换为约束布局......但转换后它看起来不一样。一切都搞砸了。

So what I want to know is, How to make a layout looks the same in every device?所以我想知道的是，如何使布局在每个设备中看起来都一样？

If the method is to convert it into constraint layout,how to do it without the last problem I mentioned?如果方法是将其转换为约束布局，如何做到没有我提到的最后一个问题？

Here is one of the xml codes of my activities.这是我的活动的 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

You can use a library to handle your UI on different size devices.您可以使用库来处理不同尺寸设备上的 UI。

Try using the SDP library.尝试使用SDP库。 For more info & usage, you can check it out over here有关更多信息和用法，您可以在此处查看

Add this to your Gradle for using the SDP library.将此添加到您的 Gradle 以使用SDP库。

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

And in your layouts instead of dp use spd as而在你的布局而不是dp使用spd作为

instead of代替

android:layout_width="35dp" android:layout_width="35dp"

use用

android:layout_width="@dimen/_35sdp"

Answer 2

Even on ConstraintLayout controls will be out of screen if it is so small as you said.即使在 ConstraintLayout 控件上，如果它像您说的那样小，也会超出屏幕。 To workaround this, you should implement for example ScrollView before your LinearLayout, just like this:要解决此问题，您应该在 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>

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

问题描述

2 个解决方案

解决方案1
1 2020-02-11 14:03:50

解决方案2
0 2020-02-11 13:31:07

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

问题描述

2 个解决方案

解决方案1 1 2020-02-11 14:03:50

解决方案2 0 2020-02-11 13:31:07

解决方案1
1 2020-02-11 14:03:50

解决方案2
0 2020-02-11 13:31:07