Android UI: Advanced and extensible Images

 

Today is New Year's Eve. I have time to write a blog. After writing, I will go to dinner. I wish you a successful career and good health in the new year!

Today, we will discuss the Extensible images that are often used in Android UI design. In addition to the basic png, jpg and GIF formats, androidalso has an extended figure named nine-patch.9.png. Different from PNG, it will change its size as the size of the property changes to adapt to the size of the property. This feature is very practical in our general UI design. The most common picture is the button background to adapt to the font size. At this time, you will find that this extended image is very useful.

Let's talk about how to use it. The android SDK provides a tool to create such images. There is a draw9patch. BAT file under the tools directory of the android SDK. Run it and drag our image into it. The following figure is displayed.

 

On the left side of the window is the original image. You can adjust the image size by zoom. pathc scale adjusts the maximum extended rate of the PNG image. The extended result is displayed in the right side of the window. Click in a pixel and draw lines at the edge of the image to define the Extensible part. Note that you must draw lines at least on the top and left edges of the image. Otherwise, an error will be reported after the image is imported. After adjustment, click File-save. Note that the file must be saved as * .9.png. The usage in the program is exactly the same as that in normal images.

Let's look at the example below.

The code in xmlis provided, in which popupis 9.png, and popup1 is normal PNG.

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent" <br/> Android: background = "# c5ccd4ff" <br/> <button <br/> Android: Id = "@ + ID/small" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: text = "small" <br/> Android: textsize = "10sp" <br/> Android: textcolor = "# ffffffff" <br/> Android: background = "@ drawable/popup1" <br/> <button <br/> Android: id = "@ + ID/large" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: TEXT = "largenotfit" <br/> Android: textsize = "40sp" <br/> Android: textcolor = "# ffffffff" <br/> Android: background = "@ drawable/popup1" <br/> <button <br/> Android: id = "@ + ID/largefit" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: TEXT = "largefit" <br/> Android: textsize = "40sp" <br/> Android: textcolor = "# ffffffff" <br/> Android: background = "@ drawable/popup" <br/> </linearlayout> <br/> 

Check the running effect.

 

 

 

The rational use of nine-patch images is very important in the UI design. I believe everyone can understand it. This is the end of the day and dinner.