Android .9 图片

Android .9 图片,顾名思义,就是图片后缀名前有 .9 的图片,如 avatar.9.png 这样的图片

.9 图片能干嘛?

在图片拉伸的时候特定的区域不会发生图片失真,而不失真的区域可以由我们自己绘制

.9 图片用什么做?

工欲善其事,必先利其器,做 .9 图片的工具有

  1. Android Studio (推荐,现在可智能了)

    Android Studio 自带,打开方式是在某个 .png 的图片上点右键,就能看到一个 Create 9-Patch files...

  2. NinePatchEditor

    官网地址 http://weblookandfeel.com/nine-patch-editor/

  3. PhotoShop 这个应该众所周知了,怎么做 .9.png 自己百度吧

.9 图片怎么做?

.9 图片只有一个要诀,就是 左上拉伸,右下内容

我们使用 Android Studio 来制作一个 .9.png 图片

  1. 创建一个 空的 Android 项目 cn.twle.android.NineImage

  2. 修改 res/values/strings.xml 内容添加一个字符串

    <?xml version="1.0" encoding="utf-8" ?>
    <resources>
        <string name="app_name">NineImage</string>
        <string name="hellos">简单教程</string>
        <string name="hello">简单教程,简单变成</string>
    </resources>
    
  3. 下载下面这张图片 /static/i/android/btn_bg.png

    然后放到 res/drawable 目录下

  4. 修改 activity_main.xml 添加一个 TextView 然后设置背景为刚刚下载的图片

    <?xml version="1.0" encoding="utf-8" ?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" 
        android:layout_width="match_parent"  
        android:layout_height="match_parent">
    
        <TextView
            android:layout_margin="16dp"
            android:textColor="#ffffff" 
            android:gravity="center"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:background="@drawable/btn_bg"
            android:text="@string/hellos" />
    
        <TextView
            android:layout_margin="16dp"
            android:textColor="#ffffff"
            android:gravity="center"
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"
            android:background="@drawable/btn_bg"
            android:text="@string/hello"/>
    
    </LinearLayout>
    
  5. 运行结果如下

    内容少的时候还正常,一多起来就惨不忍睹了

    图片被拉伸变形了,很明显,这不合我们的需求,于是乎我们需要对这个图片来进行一些处理,让圆角部分的不随长度拉伸,中间部分才拉伸

  6. btn_bg.png 图片上点右键,然后选择 Create 9-Patch files... 创建一个 .9.png 的图片, 然后双击 btn_bg.9.png 打开 .9.png 编辑框

    右面的预览区域分别是:纵向拉伸,横向拉伸,横纵都拉伸的预览

  7. 好了,接下来我们开始处理这张图片, 调 ZoomPatch scale 设置自己适合的缩放比例,勾选 show patch 可以让 Zoom 足够大,因为后面我们需要处理"斑马线"

  8. 接下来在 "斑马线" 上进行操作就可以了

    黑色那条线是一条条拖出来的,如果想消除点的话:按住 shift 点即可

  9. 然后删除以前的 .png 图片,运行项目

效果不错,无论显示的字符多长,都是图中这个结果

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.