Android development screen adaptation

As we all know, Android models have various sizes, so screen adaptation has become a very important part of Android development. Android screen adaptation may be encountered by some developers. Let’s share the screen adaptation today. You will find that Android screen adaptation can also be very simple.

basic concepts

Some concepts that must be understood in Android screen adaptation may be boring, but as the saying goes, "the one who wants to be good at work must first be a sharp weapon", which translates to "what kind of gun you have determines what kind of gun you have "Bird", once you understand these concepts, screen adaptation will naturally feel easier for you.

  • px

It is an abbreviation of the English word pixel, which means pixel, a point on the screen. What we usually call the resolution such as 480X800 refers to pixels.

In the field of design, pixels are the smallest unit used to calculate digital images. The image displayed in the computer is not composed of continuous lines, but composed of many small dots that are invisible to the naked eye. If you enlarge the image several times, you will find that these continuous tones are actually composed of many small dots with similar colors. These small dots are the smallest unit "pixels" that constitute the image. Since it is the smallest independent display unit, px is an integer, so 0.5px will not appear. Such as:

Look at this colorful LED light (original size)

Can you imagine that this is his true color? (After zooming in)

  • in

Represents inches, which is the physical size of the screen. Each inch is equal to 2.54 centimeters. For example, the screen sizes of mobile phones we often talk about are 5 (English) inches and 4 (English) inches refer to this unit. These dimensions are the diagonal length of the screen. If the screen of the mobile phone is 4 inches, it means that the diagonal length of the screen (viewable area) of the mobile phone is 4 X 2.54 = 10.16 cm.

  • dpi

dpi is the abbreviation of Dots Per Inch, dots per inch, that is, the number of pixels per inch. For example, a 320X480 resolution mobile phone is 2 inches wide and 3 inches high. The number of pixels contained in each inch is 320/2=160dpi (horizontal) or 480/3=160dpi (vertical). 160 is the dpi of this mobile phone. The horizontal and vertical values ​​are the same, because most mobile phone screens use square pixels.

  • density

Screen density, the relationship between density and dpi is density = dpi/160

  • dp

That is dip, the abbreviation of device independent pixels, device independent pixels, a unit unique to Android, on a screen with a screen density of dpi = 160, 1dp = 1px.

  • sp

Similar to dp, it is generally used to set the font size. The difference from dp is that it can be scaled according to the user's font size preference.

Android Drawable

After we create a new Android project, we should be able to see many drawable folders, corresponding to different dpi

  • drawable-ldpi (dpi=120, density=0.75)

  • drawable-mdpi (dpi=160, density=1)

  • drawable-hdpi (dpi=240, density=1.5)

  • drawable-xhdpi (dpi=320, density=2)

  • drawable-xxhdpi (dpi=480, density=3)

Most of the Android tutorials on the market teach a set of image resources for each dpi. This is certainly a solution, but it is also a very stupid method, which adds a lot to art or design. Not to mention the workload, it will also make your apk package very large. So is there any good way to not only ensure screen adaptation, but also minimize design resources, and it is best to use only a set of dpi image resources? Let's explain the method summarized in the next project.

First of all, you must be clear about the concept of automatic rendering. The Android SDK will automatically select the corresponding resource file for the screen size for rendering. If the SDK detects that your phone's dpi is 160, it will first go to the drawable-mdpi folder to find the corresponding image resources. First, suppose your phone’s dpi is 160, but you only have corresponding image resource files in the xhpdi folder, and the program can run normally. So theoretically speaking, it’s ok to only provide a picture resource of one specification. If only pictures of ldpi specification are provided, it will be unclear if the picture is enlarged for a mobile phone with large resolution, so it is necessary to provide a set of the maximum you need to support. dpi picture, so that even if the user’s mobile phone has a small resolution, the picture is still very clear when reduced.

xhdpi becomes the first choice

上面说了只需要提供一套大的dpi的图片就ok了,现在市面手机分辨率最大可达到1080X1920的分辨率,如Nexus5,dpi属于xxhdpi,但是毕竟还没普及,目前市面上最普遍的高端机的分辨率还多集中在720X1080范围,也就是多集中在xhdpi,所以目前来看xhpdi规格的图片成为了首选。当然随着技术规格的提高以后发展,以后可能市场上xxdpi的手机会越来越普遍,但这是后话。

设计资源紧张怎么办?

在现在的App开发中,基本都会有iOS和Android版本,有些公司为了保持App不同版本的体验交互一致,还有些公司的设计资源可能比较紧张,这些情况下iOS和Android版本基本是一个设计师主导,而大多数情况下设计师可能更会以iPhone手机为基础进行设计,包括后期的切图之类的。这个时候身为Android开发人员你是否还要求设计师单独为Android端切一套图片资源呢?这会让你们的设计师崩溃的,下面就来告诉一个项目中总结的更棒的方法。

相信设计师们一般都会用最新的iPhone5(5s和5的尺寸以及分辨率都一样)来做原型设计,而iPhone5的屏幕分辨率为640X1164, 屏幕尺寸为4英寸,根据勾股定理(a^2 + b^2 = c^2)640^2+1164^2=1764496, 然后再对其开根号可求出屏幕对角线的分辨率为:1328,除以4可得出iphone5的dpi:1328/4≈332 可以看出iPhone5的屏幕的dpi约等于320, 刚好属于xhdpi,所以你可以很自豪的像你们的设计师说不用专门为Android端切图,直接把iPhone的那一套切好的图片资源放入drawable-xhdpi文件夹里就ok了。

wrap_content VS dp

wrap_content和dp都是在Android开发中应该经常用到的,然后它们冥冥中是有关系的。

假设你看了这篇文章后都是统一有xhdpi的资源,那么你用wrap_content完全没有问题,Android会自动为其他规格的dpi屏幕适配,比如你在xhdpi放了一张120X120px大小的图片,那么在在hdpi屏幕上显示的就只有120/2*1.5=90px大小,但是如果你不小心同样把这张图片也放入了mdpi了,这个时候用wrap_content显示就会有问题,具体看下面的例子:

例如假设你只在drawable_xhdpi文件夹下放了test图片,xhdpi的设备会去xhdpi文件夹下找到test图片并直接显示,而mdpi的设备优先会去mdpi文件夹里查找test图片,但是没找到,最后在xhdpi文件夹下找到,然后会自动根据density计算并缩放显示出来,实际显示出来的大小是120/2=60px, 所以整体的显示比例才会看起来比较正常

  • mdpi

  • xhdpi

但是如果你在mdpi文件夹里也放入了同样的图片,那么mdpi的设备会直接去mdpi文件夹里寻找到test图片,并直接显示,而这时候显示不会缩放,实际显示大小就是120X120,在mdpi的屏幕上看起来就会比较大,如图:

通过上面整个过程,大家应该理解了Android加载资源的整个过程, wrap_content同样可以用dp来代替,就拿上面这个例子,在xhdpi文件夹内放入了一张120X120像素的test图片,宽高直接除density就得出dp的数值,即这种情况下以下代码是等同的.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/test" />
<ImageView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/test" />

总结

相信通过以上的讲解,对Android UI中的一些基本概念有个很好的理解,实际开发工作中也有一些高效的方法可以参考,应该可以应对大部分的屏幕适配工作。但是项目中仍然有一些比较特殊的适配需求满足不了,以后会针对一些特殊的需求进行示例讲解。

Guess you like

Origin blog.csdn.net/xhf_123/article/details/49931547