制作Nine-Patch圖片(九點圖)

為什么制作九點圖

今天簡單記錄一下九點圖的制作方式,那么制作九點圖的作用是什么呢,我們先看一個例子,下面是一個聊天氣泡的照片:


下面一段代碼將氣泡作為了背景:

    <LinearLayout
        android:background="@drawable/message_left"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

然后我們在看一下將它設置為背景的情況:


可以明顯看到非常的難看,由于圖片的寬度不足以填滿整個屏幕所以就被均勻拉伸了,沒有人能接受這樣的聊天背景圖吧。

這個時候就要制作成九點圖了。

制作九點圖的工具

很多書上和網上較早的博客會說可以在sdk的文件路徑下找到tools文件夾,下面有一個draw9patch.bat,不過現在已經被集成在Android Studio中了。所以現在步驟簡單許多,直接對要制作的圖片右鍵選擇Create 9-Patch file然后直接回車確認就可以在同路徑下生成一張后綴.9.png的九點圖,然后雙擊打開進行制作就可以了,原圖如果沒有必要即可刪除。

雙擊打開后的編輯界面:

制作九點圖本身就比較簡單了,直接用鼠標選中邊上的像素點拖動涂黑既可,取消的話按住shift鍵覆蓋就可以擦除,其中上邊框,左邊框的表示可以拉伸的區域,右邊框和下邊框表示內容會被放置的區域。

下面是繪制后的效果:

最后用這張制作過的九點圖替換原來的引用在布局中加入一個TextView:

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/message_left">
        <TextView
            android:text="this is a test text .this is a test text ."
            android:layout_gravity="center_vertical"
            android:textSize="25sp"
            android:maxLines="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

結果如下:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,251評論 4 61
  • 14年開始工作,至今已近三年。棕先生常常想起剛從學校步入社會時自己的志大才疏;經過三年的磨練,他的身上發生...
    棕先生閱讀 428評論 0 0
  • 最近手頭很緊,又想換個手機,正好這時候男朋友說要送我個手機當禮物。他以前也提過,被我拒絕了,當時并不覺得自己多需要...
    不萊閱讀 3,779評論 1 4
  • 毀譽參半的“血膽老將”——《巴頓將軍》 巴頓將軍,一位因戰績顯赫聞名于二戰的老將,也因為自己暴怒的性格而飽受批判的...
    6Day閱讀 176評論 0 0
  • 仿佛在昨天 還能摸到她的臉龐 感受她的呼吸 傾聽她的語言 仿佛風才會知道 如何一夜之間將她刮落 這一去 便是兩個世...
    逍遙復逍遙閱讀 494評論 2 2