不同密度支持
Different density support
我在我的项目中创建了以下 .xml 布局,以创建支持不同屏幕尺寸和密度的可缩放布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="@color/colorPrimary">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="@dimen/_8sdp"
android:layout_marginEnd="@dimen/_8sdp"
android:layout_marginStart="@dimen/_8sdp"
android:layout_marginTop="@dimen/_8sdp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/card_details_open" />
<android.support.constraint.Guideline
android:id="@+id/hor_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="113dp" />
<TextView
android:id="@+id/first"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/_8sdp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
android:textColor="@color/white"
android:textSize="@dimen/_14ssp"
app:layout_constraintEnd_toStartOf="@+id/vert_right"
app:layout_constraintStart_toStartOf="@+id/vert_left"
app:layout_constraintTop_toTopOf="@+id/hor_top" />
<TextView
android:id="@+id/second"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_marginEnd="@dimen/_6sdp"
android:layout_marginTop="@dimen/_14sdp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
android:textColor="@android:color/holo_blue_light"
android:textSize="@dimen/_14ssp"
app:layout_constraintEnd_toStartOf="@+id/vert_right"
app:layout_constraintStart_toStartOf="@+id/first"
app:layout_constraintTop_toBottomOf="@+id/first" />
<TextView
android:id="@+id/third"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/_12sdp"
android:layout_marginEnd="@dimen/_6sdp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:paddingBottom="@dimen/_2sdp"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
android:textColor="@color/white"
android:textSize="@dimen/_14ssp"
app:layout_constraintBottom_toTopOf="@+id/hor_bot"
app:layout_constraintEnd_toStartOf="@+id/vert_right"
app:layout_constraintStart_toStartOf="@+id/second" />
<android.support.constraint.Guideline
android:id="@+id/hor_bot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="@dimen/_206sdp" />
<LinearLayout
android:id="@+id/Stats"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_8sdp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_35sdp"
android:layout_weight="1"
android:text="TextView"
android:textColor="@color/white" />
<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/_10sdp"
android:layout_marginStart="@dimen/_25sdp"
android:layout_weight="0.30"
android:text="TextView"
android:textColor="@color/white" />
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_50sdp"
android:layout_weight="1"
android:text="TextView"
android:textColor="@color/white" />
</LinearLayout>
<android.support.constraint.Guideline
android:id="@+id/vert_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="@dimen/_80sdp" />
<android.support.constraint.Guideline
android:id="@+id/vert_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="@dimen/_72sdp" />
</android.support.constraint.ConstraintLayout>
但是,我仍然面对相同的 problem.In 第一张图片,phone 为 5",密度为 ~380dp,而在第二张图片中,phone 又是 5",但密度为 ~441dp。
如您所见,我的布局的 textView 在这两种布局中都没有保持在正确的位置。我需要做什么才能在 Android Studio 中创建可缩放布局?我已经阅读了大量帖子,但实际上没有人告诉您这是如何完成的。如果您根据自己的个人经验知道如何做到这一点,或者在您的工作空间中与开发团队合作过,请帮助业余开发人员。提前谢谢你。
PS:请不要评论那些只是说我应该为不同的分辨率创建不同的布局文件夹的帖子链接,因为我已经这样做了。
我的布局目录如下:layout,layout-hdpi-layout-xhdpi,layout-xxhdpi and layout-xxxhdpi.
旁注:在我创建可缩放布局的过程中,我还使用了 sdp/ssp 库,但它不是很有用。
对于任何回到这个话题的人,在与 UI/UX 设计师交谈后我了解到,为了让如此复杂的布局在多个维度上工作,您可能应该 "cut" 将它们分成多个件(例如:将顶部的 HP、ATT 和 DEF 框分开,将图像的预定义文本(橙色文本)创建为实际单独的 TextView
等)。然后使用您在 Android 开发者网站上找到的 文档 和 ConstraintLayout
您应该没问题!
我在我的项目中创建了以下 .xml 布局,以创建支持不同屏幕尺寸和密度的可缩放布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="@color/colorPrimary">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="@dimen/_8sdp"
android:layout_marginEnd="@dimen/_8sdp"
android:layout_marginStart="@dimen/_8sdp"
android:layout_marginTop="@dimen/_8sdp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/card_details_open" />
<android.support.constraint.Guideline
android:id="@+id/hor_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="113dp" />
<TextView
android:id="@+id/first"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/_8sdp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
android:textColor="@color/white"
android:textSize="@dimen/_14ssp"
app:layout_constraintEnd_toStartOf="@+id/vert_right"
app:layout_constraintStart_toStartOf="@+id/vert_left"
app:layout_constraintTop_toTopOf="@+id/hor_top" />
<TextView
android:id="@+id/second"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_marginEnd="@dimen/_6sdp"
android:layout_marginTop="@dimen/_14sdp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
android:textColor="@android:color/holo_blue_light"
android:textSize="@dimen/_14ssp"
app:layout_constraintEnd_toStartOf="@+id/vert_right"
app:layout_constraintStart_toStartOf="@+id/first"
app:layout_constraintTop_toBottomOf="@+id/first" />
<TextView
android:id="@+id/third"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/_12sdp"
android:layout_marginEnd="@dimen/_6sdp"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:fontFamily="monospace"
android:marqueeRepeatLimit="marquee_forever"
android:paddingBottom="@dimen/_2sdp"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="LEADER SKILL OR SOMETHING that's long and will make the text scroll in order to show something"
android:textColor="@color/white"
android:textSize="@dimen/_14ssp"
app:layout_constraintBottom_toTopOf="@+id/hor_bot"
app:layout_constraintEnd_toStartOf="@+id/vert_right"
app:layout_constraintStart_toStartOf="@+id/second" />
<android.support.constraint.Guideline
android:id="@+id/hor_bot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="@dimen/_206sdp" />
<LinearLayout
android:id="@+id/Stats"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/_8sdp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_35sdp"
android:layout_weight="1"
android:text="TextView"
android:textColor="@color/white" />
<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/_10sdp"
android:layout_marginStart="@dimen/_25sdp"
android:layout_weight="0.30"
android:text="TextView"
android:textColor="@color/white" />
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_50sdp"
android:layout_weight="1"
android:text="TextView"
android:textColor="@color/white" />
</LinearLayout>
<android.support.constraint.Guideline
android:id="@+id/vert_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="@dimen/_80sdp" />
<android.support.constraint.Guideline
android:id="@+id/vert_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="@dimen/_72sdp" />
</android.support.constraint.ConstraintLayout>
但是,我仍然面对相同的 problem.In 第一张图片,phone 为 5",密度为 ~380dp,而在第二张图片中,phone 又是 5",但密度为 ~441dp。
如您所见,我的布局的 textView 在这两种布局中都没有保持在正确的位置。我需要做什么才能在 Android Studio 中创建可缩放布局?我已经阅读了大量帖子,但实际上没有人告诉您这是如何完成的。如果您根据自己的个人经验知道如何做到这一点,或者在您的工作空间中与开发团队合作过,请帮助业余开发人员。提前谢谢你。
PS:请不要评论那些只是说我应该为不同的分辨率创建不同的布局文件夹的帖子链接,因为我已经这样做了。 我的布局目录如下:layout,layout-hdpi-layout-xhdpi,layout-xxhdpi and layout-xxxhdpi.
旁注:在我创建可缩放布局的过程中,我还使用了 sdp/ssp 库,但它不是很有用。
对于任何回到这个话题的人,在与 UI/UX 设计师交谈后我了解到,为了让如此复杂的布局在多个维度上工作,您可能应该 "cut" 将它们分成多个件(例如:将顶部的 HP、ATT 和 DEF 框分开,将图像的预定义文本(橙色文本)创建为实际单独的 TextView
等)。然后使用您在 Android 开发者网站上找到的 文档 和 ConstraintLayout
您应该没问题!