"Android App Development technology: User Interface" 9Patch picture design

Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email:[email protected]
Blog: http://blog.csdn.net/allenwells
Github:https://github.com/allenwells

"Android App Development technology: User Interface" Chapter list

The 9Patch image is a special PNG image with a. 9.png suffix, which adds a 1-pixel-wide line around the original image, which determines the scaling rules and content display of the image.

Display rules for a 9Patch picture

9Patch picture the left edge and top edge of the line together determine the zoom area of the picture, the right side of the line to draw a rectangle, the area it covers can be scaled vertically, with the line above the upper boundary of the drawing rectangle, the area it covers can be scaled horizontally, the intersection of the two can be scaled in two directions.

9Patch pictures The straight and bottom lines together determine the display area of the picture content, draw a rectangle directly to the right, and draw a rectangle in the bottom line, where the intersection of the two is the display area of the picture content.

These 4 lines divide the picture into 9 parts, so it's called a. 9.png

How to make 9Patch pictures

Android provides the Drew9patch.bat tool for making 9Patch images, which is shown below in the tools directory of the Android SDK installation path:

@echo offREMCopyright (C) -The AndroidOpenSource ProjectREMREMLicensed under the Apache License, Version2.0(The"License");REMMay not  UseThisfileExceptinchCompliance withThe License.REMMay obtain a copy ofThe License atREMREMhttp://www.apache.org/licenses/license-2.0REMREMUnless required by applicableorAgreed to inchWriting, SoftwareREMDistributed under the License isDistributed onAn" as is"BASIS,REMWithout warrantiesORCONDITIONS ofAny KIND, either expressorImplied.REMSee the License forThe specific language governing permissions andREMLimitations under the License.REMDon' tModify the caller' sEnvironmentsetlocalREMSet up Prog toBe the path ofThis script, including following symlinks,REM  andSet up Progdir toBe the fully-qualified pathname ofIts directory.set prog=%~f0REMChange current directory andDrive towhere the script is, toAvoidREMIssues withDirectories containing whitespaces.cd/d%~dp0REMCheck we have a valid Java.exeinchThe Path.set java_exe=call Lib\find_java.batif  notDefined Java_exe goto:eofset jarfile=draw9patch.jarset frameworkdir=.set libdir=ifexist%frameworkdir%\%jarfile% Goto Jarfileok Set Frameworkdir=libifexist%frameworkdir%\%jarfile% goto Jarfileok set frameworkdir=. \framework:jarfileokset Jarpath=%frameworkdir%\%jarfile%call"%java_exe%" "-djava.ext.dirs=%frameworkdir%"-jar%jarpath%%*

2.1 Open a PNG image

As shown, PNG images are distorted when stretched horizontally and vertically, as shown in:

2.2 Define an interval that is not stretched

By pulling a straight line covering the robot from the top side, you can find that the longitudinal robot displays normally, as shown in:

We pull straight lines from the left side until the entire robot is covered, and we can see that the horizontal robot also shows normal, as shown in:

Three Android system for 9Patch image processing

Bitmap when reading the image stream data will determine the image of the 9Patch data block, that is, ninepatchchunk, if Ninepatchchunk is not empty, then the image is ninepatchdrawable.

The ninepatchdrawable will be disposed of by Ninepatch as follows:

setNinePatchState(new NinePatchState(               new"XML 9-patch"),               padding, dither), r);

The Ninepatch test succeeds by calling the local method and drawing the final picture as follows:

nativeDraw(canvas.mNativeCanvas, location,                null0,                canvas.mDensity, mBitmap.mDensity);

Copyright NOTICE: When we seriously to do one thing, we can find the endless fun, colorful technology like the scenery on the road, while walking to appreciate.

"Android App Development technology: User Interface" 9Patch picture design