[英]Android Screen-size and Screen-density Image Selection
I am having problems when trying to use multiple horizontal images on different size devices. 尝试在不同尺寸的设备上使用多个水平图像时遇到问题。 I have 7 separate Ratingbars, each using a different custom image.
我有7个单独的Ratingbars,每个都使用不同的自定义图像。 I have scaled all the images and placed them into their respective dpi drawable folders.
我缩放了所有图像并将它们放入各自的dpi可绘制文件夹中。 The problem I'm having is that on the xlarge mdpi screen (top left of the image below), they fit perfectly, but when I'm viewing them on a smaller screens, the entire 7 ratingbars are too wide to fit within the bounds of the device, as shown below:
我遇到的问题是在xlarge mdpi屏幕上(左下图),它们非常适合,但是当我在较小的屏幕上观看它们时,整个7个评级栏太宽而不适合在界限范围内该设备,如下所示:
I have followed the correct scaling for the images (based on the original base size of the mdpi) as stated in the following answer: https://stackoverflow.com/a/11581786/1634369 我已经按照以下答案中所述跟踪了图像的正确缩放(基于mdpi的原始基本大小): https : //stackoverflow.com/a/11581786/1634369
ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
0.75 | 1 | 1.33 | 1.5 | 2 | 3 | 4
Based on the scaling above, the following are all my drawable folders, showing the dimensions of each of the images within their respective dpi folders (all based off the mdpi ratio): 根据上面的缩放,以下是我的所有可绘制文件夹,显示各自dpi文件夹中每个图像的尺寸(全部基于mdpi比率):
Then in order to display each of the Ratingbars, I set up a selector for each rating bar which will use a default grey image and a coloured image based on the rating value. 然后,为了显示每个评级栏,我为每个评级栏设置了一个选择器,它将使用默认的灰色图像和基于评级值的彩色图像。 The following shows the code I use to display each of the Ratingbars using the layout.
下面显示了我用于使用布局显示每个Ratingbars的代码。 NOTE: I have based the width and height from the base mdpi values.
注意:我已根据基本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>
Would anyone be able to help me ensure that no matter what screen the Ratingbars are displayed on and no matter what density the device is, it will always look the same (the way it looks on the 10.1 mdpi screen which is displayed top left of the image showing all the different screens? Any help would be greatly appreciated. 是否有人能够帮助我确保无论在哪个屏幕上显示Ratingbars,无论设备的密度如何,它总是看起来一样(它在10.1 mdpi屏幕上显示的方式显示在左上角图像显示所有不同的屏幕?任何帮助将不胜感激。
Thanks very much for taking the time to read through this question. 非常感谢您花时间阅读这个问题。 I have placed the code on Github at the following location: https://github.com/gbayo1/RatingBarScalingIssue.git
我已将代码放在Github的以下位置: https : //github.com/gbayo1/RatingBarScalingIssue.git
You can equally distribute Views
across the Screen by using a LinearLayout
and layout_weight
. 您可以使用
LinearLayout
和layout_weight
在屏幕上平均分配Views
。 For layout_weight
to work you have to set layout_width
to 0dp
. 要使
layout_weight
工作,您必须将layout_width
设置为0dp
。 That is normal don't let yourself be confused by that. 这是正常的,不要让自己感到困惑。 If you wanted to equally distribute vertically you would have to set
layout_height
to 0dp
. 如果您想要垂直均匀分布,则必须将
layout_height
设置为0dp
。 The layout_weight
tells the LinearLayout
how big a View
should be compared to the other ones. layout_weight
告诉LinearLayout
应该将View
与其他View
进行比较。 In your case we want all Views
to be equally distributed so they all need to have the same width. 在您的情况下,我们希望所有
Views
均匀分布,因此它们都需要具有相同的宽度。 That's the reason why we assign all Views
the same layout_weight
- 1
. 这就是我们为所有
Views
分配相同layout_weight
- 1
。 You can do a lot more with layout_weight
, for example if you had two Views and you wanted the left view to take up two thirds of the screen and the right one to take up one third of the screen you would assign the left one a layout_weight
of 2, and the right one a layout_weight
of 1. 你可以使用
layout_weight
做更多的事情,例如,如果你有两个视图,并且你希望左视图占据屏幕的三分之二,而右视图占据屏幕的三分之一,你将为左边的视图分配一个layout_weight
2,右边一个layout_weight
为1。
I have modified your layout accordingly: 我相应地修改了你的布局:
<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>
I assume there will eventually be something else in the layout besides the Ratingbars
, that's why I already wrapped everything in a RelativeLayout
. 我假设除了
Ratingbars
之外,布局中最终会有其他东西,这就是为什么我已经将所有内容都包含在RelativeLayout
。 Because of your custom progressDrawable
you might have a few issues with the height of the rating bars since I changed layout_height
to wrap_content
. 由于您的自定义
progressDrawable
,因为我将layout_height
更改为wrap_content
,因此您可能会对评级栏的高度产生一些问题。 If it doesn't work or you want them to have different heights you can set a fixed height for the RatingBars
but leave the layout_width
as it is. 如果它不起作用或者你希望它们具有不同的高度,你可以为
RatingBars
设置一个固定的高度,但保持layout_width
。
On a side note: All those layout_gravity
and gravity
elements you had in your original layout were essentially useless. 在旁注:您在原始布局中拥有的所有
layout_gravity
和gravity
元素基本上都是无用的。 To align all the RatingBars
to the bottom you would only have needed android:gravity="bottom"
on the LinearLayout
itself. 要将所有
RatingBars
对齐到底部,您只需要在LinearLayout
本身上使用android:gravity="bottom"
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.