[英]How to scale UI elements for different screen sizes in Android using ConstraintLayout
my goal is to design a layout using ConstraintLayout in Android that scales to different screen sizes and thus to devices.我的目标是使用 Android 中的 ConstraintLayout 设计一个布局,该布局可以扩展到不同的屏幕尺寸,从而扩展到不同的设备。 I read quite often that you should use dp and sp for designing layouts.
我经常读到你应该使用 dp 和 sp 来设计布局。 Basically I think that using dp and sp does not make the layout scalable for different screen sizes so I don't agree on that.
基本上我认为使用 dp 和 sp 不会使布局针对不同的屏幕尺寸进行扩展,所以我不同意这一点。 Here you can see how a designed layout looks on a 5' and 7' screen.
在这里,您可以看到设计布局在 5' 和 7' 屏幕上的外观。
You can clearly see (the screenshots have the same zoom level) that on the 7' display the buttoms and imageviews (whose height and width was specified with dp) and the textviews (whose size was specified with sp) look smaller or the same size as in the 5' device.
您可以清楚地看到(屏幕截图具有相同的缩放级别)在 7' 上显示的按钮和图像视图(其高度和宽度由 dp 指定)和文本视图(其大小由 sp 指定)看起来更小或相同大小就像在 5' 设备中一样。 But on a 7' display the elemnts should be larger and scale to the display size which I do not think is possible using dp and sp.
但是在 7' 显示器上,元素应该更大并且可以缩放到我认为使用 dp 和 sp 不可能的显示尺寸。
So my question is how can I design the layout in a way that it scales to the current screen size meaning that the elements should be smaller in small devices and larger in large-screen devices.所以我的问题是如何设计布局以使其缩放到当前的屏幕尺寸,这意味着元素在小型设备中应该更小,在大屏幕设备中应该更大。
Here you can see the XML layout file:在这里可以看到 XML 布局文件:
<?xml version="1.0" encoding="utf-8"?>
<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">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="265dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription" />
<ImageButton
android:id="@+id/commentButton"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@null"
android:contentDescription="comment_Button"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.82"
app:srcCompat="@mipmap/comment" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/comment"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.753" />
<Button
android:id="@+id/button"
android:layout_width="163dp"
android:layout_height="72dp"
android:background="@drawable/custom_button"
android:text="Button"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.867" />
<TextView
android:id="@+id/textViewS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Textview"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.012"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.581" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'd appreciate every comment and would be quite thankful for your advices.我会感谢每一条评论,并非常感谢您的建议。
My apps have different dimension resources, scaling all dp and sp values for smaller screens.我的应用程序有不同的维度资源,为更小的屏幕缩放所有 dp 和 sp 值。 For example in
res/values/dimens.xml
例如在
res/values/dimens.xml
<dimen name="dp20">20dp</dimen>
<dimen name="dp24">24dp</dimen>
<dimen name="dp28">28dp</dimen>
<dimen name="dp30">30dp</dimen>
<dimen name="dp32">32dp</dimen>
<dimen name="dp36">36dp</dimen>
and in res/values-w320dp/dimens.xml
:在
res/values-w320dp/dimens.xml
:
<dimen name="dp16">12dp</dimen>
<dimen name="dp18">14dp</dimen>
<dimen name="dp20">15dp</dimen>
<dimen name="dp24">18dp</dimen>
<dimen name="dp28">21dp</dimen>
<dimen name="dp30">23dp</dimen>
<dimen name="dp32">24dp</dimen>
<dimen name="dp36">27dp</dimen>
Then, when setting sizes with @dimen/dp16
instead od 16dp
, the screen scales better.然后,当使用
@dimen/dp16
而不是 od 16dp
设置尺寸时,屏幕的缩放效果会更好。 You can add more qualified resources for more types of screens.您可以为更多类型的屏幕添加更多合格资源。
There is one third-party library that can manage your issue easily.有一个第三方库可以轻松管理您的问题。
check this for the different size for the component: https://github.com/intuit/sdp检查组件的不同尺寸: https://github.com/intuit/sdp
And this is for text size: https://github.com/intuit/ssp这是文本大小: https://github.com/intuit/ssp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.