Android 多屏幕支持 - 密度和尺寸限定符答案

【问题标题】：Android Multi Screen Support - Density & Size QualifiersAndroid 多屏幕支持 - 密度和尺寸限定符
【发布时间】：2017-10-06 04:44:09
【问题描述】：

我有 420 dpi 的手机密度屏幕。但是当我将显示从“正常”更改为“小”或“大”或“更大”时，dpi 值会发生变化。如何设计支持所有屏幕的 UI 以及对应使用哪个限定符。

我在dimens.xml 中使用了绝对值，android 将这些值缩放到相应的密度，但它没有按预期生成正确的用户界面。

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/profileCard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false"
    android:elevation="6dp"
    cardview:cardCornerRadius="6dp"
    cardview:cardElevation="6dp"
    cardview:cardPreventCornerOverlap="true"
    cardview:cardUseCompatPadding="true"
    cardview:contentPadding="0dp"
    tools:targetApi="lollipop">

    <LinearLayout
        android:id="@+id/artistLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/artistCoverLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/youtube_thumbnail_background">

            <com.google.android.youtube.player.YouTubeThumbnailView
                android:id="@+id/profileCoverThumbnail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:alpha="0.62"/>

            <ImageView
                android:id="@+id/mCoverImage"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:background="@drawable/youtube_thumbnail_background"
                android:alpha="0.62" />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:background="@null"
                android:src="@mipmap/play" />

        </FrameLayout>

        <LinearLayout
            android:id="@+id/artistDetailLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/artistCoverLayout"
            android:background="#f9f9f9">

            <ImageView
                android:id="@+id/profile_image"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_alignBottom="@id/profileCoverThumbnail"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="13dp"
                android:layout_marginTop="7dp"
                android:src="@mipmap/ic_emp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@+id/profile_image"
                android:layout_toRightOf="@+id/profile_image"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/profileName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@+id/profileCoverThumbnail"
                    android:layout_marginLeft="8.9dp"
                    android:layout_marginTop="7.4dp"
                    android:layout_toEndOf="@+id/profile_image"
                    android:layout_toRightOf="@+id/profile_image"
                    android:text="Name"
                    android:textColor="@color/artistTitleColor"
                    android:textSize="18.7sp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="8.9dp"
                    android:layout_marginTop="7.4dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_location" />

                    <TextView
                        android:id="@+id/profileLocation"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:text="City"
                        android:textColor="#4a4a4a"
                        android:textSize="12sp" />
                </LinearLayout>

                <RatingBar
                    android:id="@+id/ratingBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:rating="3"
                    android:stepSize="1"
                    android:maxWidth="8.7dp"
                    android:layout_marginLeft="8.9dp"
                    android:layout_marginTop="7.4dp"
                    android:theme="@style/RatingBar"
                    style="@style/Widget.AppCompat.RatingBar.Small"/>
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/genreLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/artistDetailLayout"
            android:orientation="vertical"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10.5dp"
                android:layout_marginLeft="17.9dp"
                android:orientation="horizontal">


                <TextView
                    android:id="@+id/genretitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:layout_marginBottom="10dp"
                    android:layout_marginLeft="8.6dp"
                    android:layout_marginRight="9dp"
                    android:text="Genres"
                    android:textColor="@color/artistTitleColor"
                    android:textSize="13.3sp" />

                <View
                    android:id="@+id/separator"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:background="#f2f2f2" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/skillLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/genreLayout"
            android:orientation="vertical"
            android:weightSum="2"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10.5dp"
                android:layout_marginLeft="17.9dp"
                android:orientation="horizontal"
                android:layout_weight="1">

                <TextView
                    android:id="@+id/skilltitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:layout_marginBottom="10dp"
                    android:layout_marginLeft="9.3dp"
                    android:layout_marginRight="9dp"
                    android:text="Skills"
                    android:textColor="@color/artistTitleColor"
                    android:textSize="13.3sp" />

                <View
                    android:id="@+id/separatorSkill"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:background="#f2f2f2" />
            </LinearLayout>
        </LinearLayout>
        <FrameLayout
            android:id="@+id/mVisibilityLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="3dp"
            android:paddingTop="3dp"
            android:paddingLeft="23dp"
            android:paddingRight="14dp"
            android:background="#f6f6f6">

            <TextView
                android:id="@+id/mVisibilityTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visibility"
                android:textSize="16sp"
                android:layout_gravity="center_vertical"
                android:textColor="#4a4a4a"/>

            <android.support.v7.widget.SwitchCompat
                android:id="@+id/mVisibilitySwitch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|right"/>
        </FrameLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

【问题讨论】：

如果您希望我的建议支持所有屏幕，请避免在任何视图的高度或宽度中设置静态数字，请将此静态数字设置为边距，仅向左填充
避免对 UI 使用 dimen.xml 中的硬编码尺寸，而是使用 wrap_content 和 weight 以便 UI 可以在不同设备上相应地缩放。
@rajesh 但 UI 未按预期正确对齐，缩放时出现更多空白空间

标签： android android-layout user-interface android-studio

【解决方案1】：

创建文件夹以支持多屏设计，例如

                layout-sw300dp,
                layout-sw330dp,
                layout-sw480dp,
                layout-sw600dp,
                layout-sw720dp.

并创建 values 文件夹

                values-sw300dp,
                values-sw330dp,
                values-sw480dp,
                values-sw600dp,
                values-sw720dp.

将您的活动放在所有布局文件夹中，并在每个值文件夹中提及dimens.xml。

【讨论】：

480dp是标准密度，对应XXHDPI，但是300和330dp怎么确定呢？
有些分辨率比如Micromax AQ4501支持300dp，Moto E2支持330dp。
我用 oneplus 3t 进行了测试，正常密度为 420dpi，但当我们更改小显示尺寸时，它变为 380dpi。如何解决这个问题？？
基本上android在后台做什么，它寻找等效的屏幕设计分辨率，如果没有找到它会移动到较低的分辨率。
这将涵盖几乎所有的屏幕分辨率。layout-sw300dp、layout-sw330dp、layout-sw480dp、layout-sw600dp、layout-sw720dp。

【解决方案2】：

您可以将drawables放在不同的文件夹中，例如defauld drawable和drwable-xhdpi等，并且在xml中您不需要给任何视图的静态大小使用包装内容或匹配父级而不是静态大小，也是一个如果可以的话，更多的东西尝试使用 CSS，这样图像在高分辨率下就不会模糊。

希望对你有所帮助。

【讨论】：

【解决方案3】：

利用带有 weightsum 和 weight 属性的线性布局。它会根据屏幕尺寸动态改变它的高度和宽度。 :)

试试这个

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="160dp">
    <FrameLayout
        android:id="@+id/artistCoverLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">

        <com.google.android.youtube.player.YouTubeThumbnailView
            android:id="@+id/profileCoverThumbnail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:alpha="0.62"/>

        <ImageView
            android:id="@+id/mCoverImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:alpha="0.62" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:background="@null"
            android:src="@mipmap/ic_launcher" />

    </FrameLayout>
</LinearLayout>

这可能会有所帮助

【讨论】：

我使用了垂直方向的线性布局。第一个元素是 youtube 视频播放器。 youtube 播放器视图中出现空白
发布布局文件以便我可以帮助@Jay
还发布存在问题的快照
我添加了代码。玩家视图周围的棕色层
相同的快照