我们如何支持不同的屏幕尺寸，例如背景图像?[Android Studio]

问题描述

我像新手一样遇到问题，我想根据背景图片放置TextViews，我做得很好，在虚拟设备中测试应用程序时一切都很好，但是当我在真实设备TextView上测试它时，一切都很好在我期望的其他位置(略向下).

I'm having a problem as am newbie, I want to put my TextViews according to the background image, i did it well, all good when tested app in virtual device, But when i tested it on my real device, TextView is at some other place (slightly downwards) to what I was expecting.

有没有办法拉伸背景图像，以便我们的XML代码在所有设备上(以不同的分辨率)显示相同的显示结果.我只想要与android studio设计"标签上显示的设计结果相同的

Is there any way to stretch the background image so that our XML code shows same display results on all devices (with different resolutions).I just want same design results as shown on android studio Design tab.

示例:-

我希望在所有设备上获得此结果

在我的真实设备上获取此

请大家提出最好的方法.

Please guys suggest the best way to do so.

我的XML布局代码:-

My XML Layout code :-

    <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="@drawable/main_bg"
        tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="245dp"
        android:text="@string/app_name2"
        android:textColor="@color/colorPrimary"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:text="@string/Admin"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="24dp"
        android:background="@drawable/rounded_box"
        android:backgroundTint="@android:color/white"
        android:elevation="1dp"
        android:ems="10"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:padding="9dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.39" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="19dp"
        android:layout_marginEnd="24dp"
        android:ems="10"
        android:hint="Password"
        android:padding="9dp"
        android:background="@drawable/rounded_box"
        android:backgroundTint="@android:color/white"
        android:elevation="1dp"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />

    <Button
        android:id="@+id/button"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="167dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="156dp"
        android:text="Log In"
        android:background="@drawable/rounded_corners"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />
    </androidx.constraintlayout.widget.ConstraintLayout>

推荐答案

对于此 ConstraintLayout 是一个非常好的选择.如何?让我们看看

For this ConstraintLayout is a very good choice. how? Let's see

首先，您没有完全提供布局文件，所以我不知道您在做什么.

First, You've not provided your layout file completely so I don't know what you're doing.

现在，要根据任何设备定位视图，您应该诉诸于独立于比例的解决方案，例如使用偏差，根据屏幕尺寸设置不同的 dimen 值，以及使用约束，因此当屏幕尺寸更改时，它们不会自由浮动到任何位置.

Now, To position views according to any device, you should resort to scale independent solutions like using bias, setting-up different dimen values as per screen sizes and connecting widgets to each other using Constraints so they don't free float to any position when screen size changes.

• 使用偏差和百分比-尝试最小化固定边距值(例如20dp，30dp)的使用，并使用垂直/水平偏差，width_percent，height_percent和0dp. 0dp 在 ConstraintLayout 中充当 fill_contraint .

• Using Bias and Percent - Try to minimize use of fixed margin values like 20dp, 30dp and use Vertical/Horizontal bias, width_percent, height_percent and 0dp with it. 0dp acts as fill_contraint in ConstraintLayout.

在图片中可以看到，除了背景，一个按钮，两个EditText和两个TextView之外，您有五个小部件.

As I can see in the pictures, you've five widgets except background, One button, Two EditTexts and two TextViews.

因此，将约束按钮设置到父对象的底部和顶部，并将其垂直偏差设置为 0.8 或 0.9 .

So, constraint button to bottom and top of parent and give it a vertical bias of 0.8 or 0.9.

作为:

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintVertical_bias="0.8"
    app:layout_constraintWidth_percent="0.4"
/>
<!--Vertical bias will place it on 80% height of the screen and width_percent will
assign it 40% width of the screen. This will remain same in any size of the screen.-->

现在，约束使用 Bottom_toTopOf 将两个editTexts都添加到按钮上，并为第二个文本留出大约 50dp 的边距.该按钮将始终停留在屏幕的80％上，并且两个editText都将始终停留在该按钮上方.并通过为它提供 vertical_bias 为 0.4 / 0.45 / 0.5 (无论您是什么)来约束"GK Quiz" TextView首选)并将第二个textview限制在其底部.

Now, Constraint Both editTexts to the button using Bottom_toTopOf and give the second one a margin of approx 50dp. The button will always stay on 80% of the screen and both the editText will always stay above the button. And constraint the 'GK Quiz' TextView by giving it a vertical_bias of 0.4/0.45/0.5 (whatever you prefer) and constraint the second textview to its bottom.

这是您定义在每种屏幕尺寸下都将保留在同一位置的布局的方式.

This is how you define a layout that will stay on same place in every screen size.

定义自定义dimen.xml -为此，您可以检查问题.如果您不想弄乱自定义值，则可以使用两个简单的库- SDP (对于版式大小)和 SSP (对于文本大小)，它们提供了所有自定义值，每个值都保持不变屏幕尺寸.我使用这些库，因此我知道它们运行良好.关于这些有一篇中等文章-如何使用单个布局资源文件为不同的Android屏幕尺寸进行构建.

Defining custom dimen.xml - For this you can check this question out. If you don't want to mess with custom values, you can resort to two easy libraries - SDP(For layout Size) and SSP(For Text Size) which provide all the custom values which stays same in every screen size. I use these libraries so I know they work well. There's a medium article on these - How to build for different Android screen sizes using a single layout resource file.

使用约束-请记住，当您使用边距或x/y值在屏幕上放置小部件时，您应该意识到它们可能会在任何屏幕尺寸下混乱.因此，您应始终相互约束布局以创建紧密的包，以防止布局元素自由流动.自由流动是指屏幕上不同尺寸的不同位置.

Using Constraints - Remember, the moment you use margins or x/y values to position a widget on screen, you should be aware that they can mess up in any screen size. So, you should always constraints layout with each other to create a tight pack preventing the free flow of the layout elements. By free flow, I mean the different positions on screen in different sizes.

ConstraintLayout 最强大我相信这里有可用的布局，并且它有很多方法可以解决不同屏幕尺寸的问题.它还使用其子类 MotionLayout 支持Animation.阅读这些官方文档，您将学到更多.

ConstraintLayout is most powerful layout available out there I believe and it has many ways to tackle the issues of different screen sizes. It also supports Animation using its subclass MotionLayout. Read these official docs, you'll learn more.

这篇关于我们如何支持不同的屏幕尺寸，例如背景图像?[Android Studio]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！