矢量圖UI + 9-Patch適配

github：
https://github.com/Gong-Shijie/icon-9-Patch

首先矢量圖網(wǎng)站：
https://www.iconfont.cn/
里面提供了豐富的矢量圖標(biāo)，供開(kāi)發(fā)者使用
效果：

矢量圖庫(kù)

下載圖標(biāo) + 導(dǎo)入到Android Studio

圖標(biāo)

插入矢量圖

Android Studio導(dǎo)入方法

這就是你導(dǎo)入的資源

9-Patch

9-patch圖是可以根據(jù)內(nèi)容來(lái)自動(dòng)適配的圖片資源
可以根據(jù)設(shè)置的內(nèi)容來(lái)伸縮
利用這一特性可以設(shè)計(jì)出自適應(yīng)屏幕時(shí)出現(xiàn)的拉伸不適于拉伸部分導(dǎo)致的變形問(wèn)題
比如我們的message發(fā)送的氣泡始終會(huì)根據(jù)信息長(zhǎng)度自動(dòng)的伸縮

通過(guò)png創(chuàng)建9-Patch文件

上下左右四邊

左邊和上邊框用來(lái)標(biāo)記需要被拉伸的區(qū)域

右邊和下邊的邊框用來(lái)標(biāo)記內(nèi)置的內(nèi)容對(duì)齊的區(qū)域

使用9-Patch來(lái)作為View或者Layout的background可以用來(lái)適配不同尺寸的屏幕

主要代碼

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"

    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:id="@+id/l1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:layout_marginTop="100dp">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="20dp"
            android:src="@drawable/ic_course"
            android:layout_gravity="top|left"
            ></ImageView>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="40dp"
            android:src="@drawable/ic_back"></ImageView>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"

            android:layout_marginLeft="50dp"
            android:src="@drawable/ic_0"></ImageView>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/l2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/l1"
        android:layout_marginTop="30dp"
        android:orientation="horizontal">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_1"
                android:layout_marginLeft="20dp"
                android:layout_gravity="left"
                ></ImageView>
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="40dp"
                android:src="@drawable/ic_2"></ImageView>
            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"

                android:layout_marginLeft="50dp"
                android:src="@drawable/ic_3"></ImageView>

    </LinearLayout>
    <LinearLayout
        android:layout_below="@id/l2"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_marginTop="100dp"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/message_left"
            android:text="hello world!">
        </TextView>
        <TextView
            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/message_left"
            android:text="這是一條長(zhǎng)文本游盲，測(cè)試伸縮效果旋圆。">
        </TextView>
    </LinearLayout>
</RelativeLayout>