安卓屏幕尺寸和屏幕密度图像选择

Question

我在尝试在不同大小的设备上使用多个横向图片时遇到了问题。 我有7个单独的Ratingbars，每个都使用不同的自定义图像。 我已经缩放了所有图像并将它们放入相应的dpi可绘制文件夹中。我的问题是在xlarge mdpi屏幕（如下图左上角）上，它们完美地适合，但是当我在较小的屏幕上查看它们时，整个7个评级栏太宽而无法适应设备的范围，如下所示：

我已按照以下答案所述的正确缩放图像的比例（基于mdpi的原始基准大小）进行了操作：https://dev59.com/DGgu5IYBdhLWcg3wGTad#11581786。

ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
0.75 | 1    | 1.33  | 1.5  | 2     | 3      | 4

根据上述缩放比例，以下是我所有可绘制文件夹，显示其各自dpi文件夹中每个图像的尺寸（全部基于mdpi比率）：

然后为了显示每个评分条，我为每个评分条设置了一个选择器，使用默认的灰色图像和基于评分值的彩色图像。以下展示了我使用布局来显示每个Ratingbar的代码。请注意：我已经根据基本的mdpi值设置了宽度和高度。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RatingBar            
        android:numStars="1"
        android:rating="1"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="75dp"
        android:layout_height="77dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_a" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="73dp"
        android:layout_height="114dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_b" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="63dp"
        android:layout_height="132dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_c" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="79dp"
        android:layout_height="145dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_d" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="79dp"
        android:layout_height="161dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_e" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="108dp"
        android:layout_height="168dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_f" />

    <RatingBar            
        android:numStars="1"
        android:rating="0.5"
        android:stepSize="0.01"
        android:isIndicator="true"
        android:layout_width="147dp"
        android:layout_height="189dp"
        android:layout_gravity="bottom"
        android:gravity="bottom"                                                          
        android:progressDrawable="@drawable/selector_g" />

</LinearLayout>

请问是否有人能帮我确保无论在哪个屏幕上显示Ratingbars，无论设备的密度如何，它都会始终保持相同的外观（就像显示所有不同屏幕的顶部左侧的10.1 mdpi屏幕上的外观一样）？非常感谢任何帮助。

非常感谢您抽出时间阅读这个问题。我已将代码放在Github上，位置如下：https://github.com/gbayo1/RatingBarScalingIssue.git

- Graham Baitson

---

真的需要完全相同的大小吗？在较小的设备上评分栏是否可以小一些呢？它应该从一开始就更小，因为较小的设备空间更少。而在较大的设备上它为什么不能更大呢？它们有更多的屏幕空间，浪费吗？我想说的是：不要为你的视图使用固定大小。请改用wrap_content或match_parent。有很多方法可以使你的布局与设备一起缩放。如果告诉我你希望它看起来怎样，我可以帮助你。 - Xaver Kapeller

非常感谢您的评论。它不必完全相同，只要在不同的屏幕上可读和易于阅读即可。它们不必具有相同的大小或占用相同的空间，只要它们看起来合理就可以了。当我尝试使用wrap content时，评分栏没有正确显示图像，这就是为什么我使用固定大小的原因。 - Graham Baitson

你想让它看起来怎样？例如，我可以向您展示如何在屏幕上均匀分布所有的“RatingBars”。 - Xaver Kapeller

它应该显示一个进度。因此，这是为一个有100个关卡的游戏而设计的。第一个评分条（在上面的情况下为A）可能代表前5个关卡。因此，如果您完成第1关，您将在A上获得20％，第2关则为A的40％，依此类推...然后第二个评分条可能代表接下来的10个关卡，第三个评分条代表接下来的22个关卡，等等...因此，每个评分条在它们所代表的方面不是直接成比例的。一旦它们靠在一起，看起来还可以，用户基本上可以看到并理解他们在游戏过程中的进度。 - Graham Baitson

Answer 1

你可以使用LinearLayout和layout_weight在屏幕上均匀分布Views。为了让layout_weight起作用，你必须将layout_width设置为0dp。这是正常的，不要被困惑。如果你想垂直均匀分布，你需要将layout_height设置为0dp。layout_weight告诉LinearLayout一个View相对于其他View应该有多大。在你的情况下，我们希望所有的Views都能均匀分布，所以它们都需要具有相同的宽度。这就是为什么我们给所有的Views分配相同的layout_weight-1的原因。你可以使用layout_weight做更多的事情，例如，如果你有两个Views，你想让左边的View占据屏幕的三分之二，右边的View占据屏幕的三分之一，你会给左边的View分配一个layout_weight为2，右边的View分配一个layout_weight为1。

我已经相应地修改了你的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true">

        <RatingBar
                android:numStars="1"
                android:rating="1"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_a"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_b"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_c"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_d"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_e"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_f"/>

        <RatingBar
                android:numStars="1"
                android:rating="0.5"
                android:stepSize="0.01"
                android:isIndicator="true"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/selector_g"/>

    </LinearLayout>
</RelativeLayout>

我假设布局中最终会有除了Ratingbars之外的其他内容，这就是为什么我已经将所有内容包装在一个RelativeLayout中。由于您的自定义progressDrawable，您可能会遇到一些问题，因为我将layout_height更改为wrap_content，所以评分条的高度可能会有所不同。如果它不起作用或者您想要它们具有不同的高度，则可以为RatingBars设置固定高度，但保留layout_width不变。

顺便说一句：您原始布局中所有那些layout_gravity和gravity元素实际上都是无用的。要将所有RatingBars对齐到底部，您只需要在LinearLayout本身上使用android:gravity="bottom"即可。

- Xaver Kapeller

---

感谢 @XaverKapeller。在实现您的代码时，虽然它均匀地分配了评分条，但没有显示完整的评分条，这是最初的问题。使用您的代码时，所有评分条图像都在底部和右侧被裁剪。现在显示了每个评分条的左上角，但缺少它们的底部和右半部分（评分条图像越大，我错过的右侧和底部的部分就越多）。 - Graham Baitson

是的，我遇到的问题就是这个，我无法使代表RatingBar的图像正确缩放。我实际上正在考虑你建议的使用权重和图像，然后通过填充/覆盖默认的完整图像来计算进度。我会在周末尝试一下，并告诉你我的进展如何。这是我正在开发的应用程序的最后一部分，所以希望我能让它正常工作，否则我只能使用文本。但某种形式的评级标准会更具吸引力。感谢您的所有帮助。 - Graham Baitson

也许你的 "progressDrawable" 出了点问题，能把它给我看看吗？ - Xaver Kapeller

嗨，@XaverKapeller，你能看到progressDrawable了吗？ - Graham Baitson

没错。所以我在背景中显示默认图像（带有可绘制图像的ImageView），然后用完整的剪切可绘制图像（带有剪切XML作为可绘制图像的ImageView）覆盖它。然后，我计算出在游戏的每个级别上需要剪切的完整图像的百分比。效果相当不错。而且，由于我在同一个布局中将两个图像设置为完全相同的大小，任何缩放都会同时发生在背景和前景图像上，从而保持它们对齐。 - Graham Baitson