Easy Tutorial
❮ Scala Option Some None Python Func Decorators ❯

1.6 How to Play with 9-Patch Images

Category Android Basic Tutorial

1. Introduction:

>

Some possible questions:

1. What is a .9 image?

2. What can a .9 image do? Answer: When the image is stretched, specific areas do not distort, and the non-distorting areas can be drawn by us.

3. What tools are used to create .9 images? Answer: To do a job well, you need good tools. Tools for creating .9 images include:

Android SDK自带:draw9patch.bat, but this tool hasn't been updated by Google for a long time...

NinePatchEditor, which has been optimized compared to the built-in tool, supports batch operations, and has a more aesthetically pleasing interface. Interested users can download it from NinePatchEditor.zip.

NinePng九图神器, a mobile version of the .9 image processing tool, is quite impressive but requires WiFi for image transfer, which can be cumbersome. It has powerful features, and interested users can search for it in relevant app markets.

PhotoShop, which is quite advanced and typically used by graphic designers. Interested users can search for related tutorials!


2. How to Create a .9 Image?

!!Core Points: Top-left for stretching, bottom-right for content!! The core is as mentioned above! Let's start by trying it out with an image!


1. Creating a .9 Image with draw9patch.bat:

Here is an image:

Open our draw9patch.bat, click on File in the top-left corner, navigate to the directory where our image material is located, and open it. Next, you can see the main interface of our tool:

The preview area on the right shows: vertical stretching, horizontal stretching, and both vertical and horizontal stretching.

Now, let's start processing the image:

Step 1. Adjust Zoom and Patch scale: Set a suitable zoom ratio, and check show patch. Make the Zoom large enough because we need to handle the "zebra lines."

Step 2. Next, we only need to operate on the "zebra lines": PS: The black line is drawn point by point. To remove a point, hold down shift and click.

Step 3. Save the image with a .9.png extension, such as back.9.png.

The effect is great, and no matter how long the displayed text is, it will look like this. New skill acquired~


2. See How Others Create .9 Images:

Depending on different situations, we may need different .9 images. Let's look at a few examples of more complex .9 images created by others! Examples:

  1. Original link: http://www.miued.com/2074/ I like this material, but it's not available, QAQ!

  2. Original link: http://blog.csdn.net/lizzy115/article/details/7950959

  3. Original link: http://www.cnblogs.com/vanezkw/archive/2012/07/19/2599092.html


3. Summary:

This concludes the tutorial on creating stretchable images with .9. It's relatively simple, just remember our mantra: top-left for stretching, bottom-right for content! After making a few .9 images, you'll have a deep understanding. Goodbye~

-1.0 Android Basic Tutorial

-1.0.1 2015年最新Android基础入门教程目录

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Using Eclipse + ADT + SDK to Develop Android APP

-1.2.2 Using Android Studio to Develop Android APP

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial: Basic Operations on Local Repository

-1.5.2 Git: Using GitHub to Build Remote Repository

-1.7 Interface Prototype Design

-1.8 Project Source Analysis (Various Files, Resource Access)

-1.9 Android App Signing and Packaging

-1.11 Decompiling APK to Get Code & Resources

-2.1 Concepts of View and ViewGroup

-2.2.1 LinearLayout (Linear Layout)

-2.2.2 RelativeLayout (Relative Layout)

-2.2.3 TableLayout (Table Layout)

-2.2.4 FrameLayout (Frame Layout)

-2.2.5 GridLayout (Grid Layout)

-2.2.6 AbsoluteLayout (Absolute Layout)

-2.3.1 TextView (Text Box) Detailed Explanation

-2.3.2 EditText (Input Box) Detailed Explanation

-2.3.3 Button and ImageButton

-2.3.4 ImageView (Image View)

-2.3.5.RadioButton (Radio Button) & Checkbox (Checkbox)

-2.3.6 ToggleButton and Switch

-2.3.7 ProgressBar (Progress Bar)

-2.3.8 SeekBar (Drag Bar)

-2.3.9 RatingBar (Star Rating Bar)

-2.4.1 ScrollView (Scroll Bar)

-2.4.2 Date & Time Components (Part 1)

-2.4.3 Date & Time Components (Part 2)

-2.4.4 Adapter Basics

-2.4.5 Simple Usage of ListView

-2.4.6 BaseAdapter Optimization

-2.4.7 ListView Focus Issues

-2.4.8 Solving ListView Checkbox Misalignment Issues

-2.4.9 ListView Data Update Issues

-2.5.0 Building a Reusable Custom BaseAdapter

-2.5.1 Implementing Multi-Layout ListView Items

-2.5.2 Basic Usage of GridView (Grid View)

-2.5.3 Basic Usage of Spinner (List Option Box)

-2.5.4 Basic Usage of AutoCompleteTextView (Auto-Complete Text Box)

-2.5.5 Basic Usage of ExpandableListView (Collapsible List)

-2.5.6 Basic Usage of ViewFlipper (Flip View)

-2.5.7 Basic Usage of Toast

-2.5.8 Detailed Explanation of Notification (Status Bar Notification)

-2.5.9 Detailed Explanation of AlertDialog (Dialog Box)

-2.6.0 Basic Usage of Other Common Dialogs

-2.6.1 Basic Usage of PopupWindow (Floating Box)

-2.6.2 Menu

-2.6.3 Simple Usage of ViewPager

-2.6.4 Simple Usage of DrawerLayout (Official Side Menu) -3.1.1 Event Handling Mechanism Based on Listening

-3.2 Event Handling Mechanism Based on Callback

-3.3 Analysis of Handler Message Passing Mechanism

-3.4 TouchListener vs OnTouchEvent + Multi-touch

-3.5 Listening for Content Changes in EditText

-3.6 Responding to System Setting Events (Configuration Class)

-3.7 AsyncTask Asynchronous Task

-3.8 Gestures

-4.1.1 Activity Beginner

-4.1.2 Activity Intermediate

-4.1.3 Activity Advanced

-4.2.1 Service Introduction

-4.2.2 Service Advanced

-4.2.3 Service Expert

-4.3.1 BroadcastReceiver Beginner

-4.3.2 BroadcastReceiver Advanced

-4.4.1 ContentProvider Introduction

-4.4.2 ContentProvider Deep Dive - Document Provider

-4.5.1 Basic Usage of Intent

-4.5.2 Passing Complex Data with Intent

-5.1 Fragment Basic Overview

-5.2.1 Fragment Example Analysis - Bottom Navigation Bar Implementation (Method 1)

-5.2.2 Fragment Example Analysis - Bottom Navigation Bar Implementation (Method 2)

-5.2.3 Fragment Example Analysis - Bottom Navigation Bar Implementation (Method 3)

-5.2.4 Fragment Example Analysis - Bottom Navigation Bar + ViewPager Swipe to Switch Pages

-5.2.5 Fragment Example Analysis - Simple Implementation of News (Shopping) App List Fragment

-6.1 Data Storage and Access - File Storage and Reading

-6.2 Data Storage and Access - SharedPreferences for Saving User Preferences

-6.3.1 Data Storage and Access - Introduction to SQLite Database

-6.3.2 Data Storage and Access - Deep Dive into SQLite Database

-7.1.1 Android Network Programming Essentials and HTTP Protocol Study

-7.1.2 Android HTTP Request and Response Headers Study

-7.1.3 Android HTTP Request Method: HttpURLConnection

-7.1.4 Android HTTP Request Method: HttpClient

-7.2.1 Android XML Data Parsing

-7.2.2 Android JSON Data Parsing

-7.3.1 Android File Upload

-7.3.2 Android File Download (1)

-7.3.3 Android File Download (2)

-7.4 Android Calling WebService

-7.5.1 WebView (Web View) Basic Usage

-7.5.2 WebView and JavaScript Interaction Basics

-7.5.3 WebView Considerations After Android 4.4

-7.5.4 WebView File Download

-7.5.5 WebView Cache Issues

-7.5.6 WebView Handling Webpage Error Code Information

-7.6.1 Socket Network Basics Preparation

-7.6.2 TCP Protocol Based Socket Communication (1)

-7.6.3 TCP Protocol Based Socket Communication (2)

-7.6.4 UDP Protocol Based Socket Communication

-8.1.1 13 Drawable Types in Android Summary Part 1

-8.1.2 13 Drawable Types in Android Summary Part 2

-8.1.3 13 Drawable Types in Android Summary Part 3

-8.2.1 Bitmap (Bitmap) Comprehensive Analysis Part 1

-8.2.2 Bitmap-induced OOM Issues

-8.3.1 Detailed Explanation of Three Drawing Tools

-8.3.2 Drawing Tool Practical Examples

-8.3.3 Paint API - MaskFilter (Mask)

-8.3.4 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 1)

-8.3.5 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 2)

-8.3.6 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 3)

-8.3.7 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 4)

-8.3.8 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 5)

-8.3.9 Paint API - ColorFilter (Color Filter) (1/3)

-8.3.10 Paint API - ColorFilter (Color Filter) (2/3)

-8.3.11 Paint API - ColorFilter (Color Filter) (3/3)

-8.3.12 Paint API - PathEffect (Path Effect)

-8.3.13 Paint API - Shader (Image Rendering)

-8.3.14 Paint Enum/Constants and ShadowLayer Shadow Effect

-8.3.15 Paint API - Typeface (Font Style)

-8.3.16 Canvas API Detailed Explanation (Part 1)

-8.3.17 Canvas API Detailed Explanation (Part 2) Clipping Methods Collection

-8.3.18 Canvas API Detailed Explanation (Part 3) Matrix and drawBitmapMesh

-8.4.1 Frame Animation in Android Animation Collection

Follow on WeChat

❮ Scala Option Some None Python Func Decorators ❯