美文网首页
制作Nine-Patch图片(九点图)

制作Nine-Patch图片(九点图)

作者: 暮城悠然丶 | 来源:发表于2017-08-24 14:31 被阅读0次
    为什么制作九点图

    今天简单记录一下九点图的制作方式,那么制作九点图的作用是什么呢,我们先看一个例子,下面是一个聊天气泡的照片:


    下面一段代码将气泡作为了背景:

        <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>
    

    结果如下:

    相关文章

      网友评论

          本文标题:制作Nine-Patch图片(九点图)

          本文链接:https://www.haomeiwen.com/subject/zofedxtx.html