Use android Nine-Patch (required to create a chat interface) and androidnine-patch

Use android Nine-Patch (required to create a chat interface) and androidnine-patch

I recently learned how to create a chat interface, designed image stretching problems, and so on. I learned how to create Nine-Patch images by referring to some books.

First readCode and effects without using Nine_patch:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
 >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_left2"
        android:text="hello!I'am xujiajia 654684684613" 
        android:textSize="20sp"
        android:layout_marginRight="50dp"/>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_right2"
        android:textSize="30sp"
        android:text="hello!I'am linghang" 
        android:layout_marginLeft="50dp"/>
   
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <Button 
            android:id="@+id/Next"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="NextActivity"
            />
    </LinearLayout>
</LinearLayout>

 

 

Let's take a look.Code and effects using Nine_Patch:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    >
    
     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_left3"
        android:text="hello!I'am xujiajia 654684684613" 
        android:textSize="20sp"
        android:layout_marginRight="50dp"/>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_right3"
        android:textSize="30sp"
        android:text="hello!I'am linghang" 
        android:layout_marginLeft="50dp"/>
    
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <Button 
            android:id="@+id/Return"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="Return"
            />
    </LinearLayout>
</LinearLayout>

 

We can clearly see that the two are different in the Code only in the image used in the background, and the others are the same, which is the role of Nine_patch.

First, let's take a look.Images in drawable:

The name of the image processed using Nine_patch will be ". 9", but it does not need to be written during use.For example, the above Code:

android:background="@drawable/frame_left3"
android:background="@drawable/frame_right3"

Next we will talk about the use of Nine_patch.

First, find Nine_patch.

It is located in tools in the SKD folder named draw9patch. bat. Find it and double-click it.

The following is the directory on my computer: D: \ Android environment \ adt-bundle-windows-x86_64-20140702 \ sdk \ tools

This is the result:

The other is show.Before and after the image is compared:

In png images, there are only a few more black ones, but they are completely different in layout images.

(I am stupid. I have been struggling for a long time here. I have been wondering why the pictures I have done have not changed. I will understand it after I use them)

 

The blacklist bar opens the file by clicking the mouse. Here we will talk about the different functions of the blacklist bar on the top, bottom, and left sides.

Line on the left: when the image is vertically stretched, the horizontal movement of the line from the left side of the image to the area on the right side of the image can be vertically stretched, without stretching outside the area, retain original results;

Top Line: when the image is horizontally stretched, the vertical displacement of the line from the top of the image to the area formed below the image can be horizontally stretched, without stretching outside the area, retain original results;

(Simply put, the lines on the left and top determine the area where your image is stretched)

 

Right line: controls the vertical padding of the image content to be white;

Below line: controls the horizontal padding of the image content to be white;

(These two points are the columns of your text)