使用AndroidStudio制作Nine-Patch【.9】图片,以及为什么要制作Nine-Patch【.9】图片【以聊天气泡为例】

 

新建一个Module

修改activity_main.xml文件,

  1.  
    <?xml version="1.0" encoding="utf-8"?>
  2.  
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.  
    xmlns:app="http://schemas.android.com/apk/res-auto"
  4.  
    xmlns:tools="http://schemas.android.com/tools"
  5.  
    android:layout_width="match_parent"
  6.  
    android:orientation="vertical"
  7.  
    android:layout_height="match_parent"
  8.  
    tools:context=".MainActivity">
  9.  
     
  10.  
    <TextView
  11.  
    android:gravity="center|left"
  12.  
    android:background="@drawable/nine"
  13.  
    android:layout_width="match_parent"
  14.  
    android:layout_height="wrap_content"
  15.  
    android:textSize="35sp"
  16.  
    android:textColor="@color/colorAccent"
  17.  
    android:text="小白阳" />
  18.  
     
  19.  
    </LinearLayout>

程序运行结果如下图所示:

这UI体验。对用户来说极差。如果有这样效果的出现,那么用户肯定是要卸载APP的呢。

所以,就有了Nine-Patch【.9】图片的效果。

Nine-Patch【.9】图片,它是一种被特殊处理过的png图片,能够指定那些区域被拉伸、那些区域不可以。

在AndroidStudio2.3之前,在Android sdk目录下有一个tools文件夹,在这个文件夹中找到draw9patch.bat文件,我们可以使用它来制作Nine-Patch图片。

现在,AndroidStudio2.3之后,不再提供单独的draw9patch.bat文件,这个功能直接被集成到了Android Studio当中。在Android Studio中对着任意一张png图片右击——>Create 9-Patch file,即可创建Nine-Patch图片,接下来我们来制作一张Nine-Patch【.9】图片。


Nine-Patch【.9】图片介绍

.9图片和一般的png图片相比,会多出四条黑线,如果所示共有 上(区域1)、左(标识2)、 右(标识3)、 下(标识4)四个区域,其中

(1)标识1和标识2 :表示图片可以拉伸的区域

标识1: 图片水平方向可以拉伸的区域,非黑色区域是不会进行拉伸的 标识2: 图片竖直方向可以拉伸的区域,非黑色区域是不会进行拉伸的

如图:图片水平方向拉伸时,只有标识1的图片区域可以进行拉伸,其它区域将保持原来的像素而不会由于拉伸而变形;

图片竖直方向进行拉伸时,只有标识2图片区域会进行像素拉伸,其它竖直方向的图片区域将保持原来的像素而不会由于拉伸而变形。

(2) 标识3和标识4:表示内容可以拉伸的区域

标识3:表示竖直方向内容可以显示的区域 标识4:表示水平方向内容可以显示的区域

如图:竖直方向上,标识3所表示的区域(图片的整个高度)都可以展示内容。 水平方向上,标识4所标识的区域,可以展示内容,水平方向其它位置中内容将不会展示出来。


使用AndroidStudio制作Nine-Patch【.9】图片

即时通讯手机软件聊天气泡png格式图片一张

将图片放入res包下drawable包中。

右击图片

选中Create 9-Patch file,然后出现一个.9图片编辑的页面,左边是我们制作的.9图片样式,右边是.9图片的拉伸效果。

绘制符合我们想要的效果的两个小技巧:

  • 当鼠标放在.9图片上时,在.9图片的边界将会出现4条直线,要绘制水平方向的黑线时,会出现竖直的两条直线,要绘制竖直方向的黑线时,会出现水平方向的两条直线。我们可以拖动直线来给图片设置黑线。

  • 另外当我们要绘制两条不连续的黑线时,我们可以点击图片以外的区域,再次出现两条直线,并通过拖动直线,再次绘制第二条黑线。

我们想要的效果是尖尖不变,图片的内容体要大。进行拉伸。

点击Show patches,能看到我们想要拉伸的内容,和不想被拉伸的内容。

Nine-Patch【.9】图片的使用和普通的png图片使用一样。在XML文件中对制作好的Nine-Patch【.9】图片进行使用,重新运行程序,结果如下图:

AndroidStudio制作Nine-Patch【.9】图片的更多相关文章

  1. AndroidStudio制作登录和注册功能的实现,界面的布局介绍

    前言 大家好,给大家带来AndroidStudio制作登录和注册功能的实现,界面的布局介绍的概述,希望你们喜欢 每日一句: Success is connecting with the world a ...

  2. AndroidStudio制作欢迎界面与应用图标

    前言 大家好,给大家带来AndroidStudio制作欢迎界面与应用图标的概述,希望你们喜欢 欢迎界面与应用图标 本项目使用Android Studio 3.0.1作为开发工具 activity_sp ...

  3. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

  4. AndroidStudio制作“我”的界面,设置,修改密码,设置密保和找回密码

    前言 大家好,给大家带来AndroidStudio制作"我"的界面,设置,修改密码,设置密保和找回密码的概述,希望你们喜欢 学习目标 掌握修改密码功能的开发,和实现用户密码的修改: ...

  5. AndroidStudio制作个人资料界面模块以及SQLite数据库的使用

    前言 大家好,给大家带来AndroidStudio制作个人资料界面模块以及SQLite数据库的使用的概述,希望你们喜欢 学习目标 掌握SQLite数据库的使用,能够实现用数据库来保存用户的信息: 学会 ...

  6. 使用imageMagick 制作圆角矩形和图片加水印

    制作圆角矩形好图片水印都是图片合成的操作 composite -gravity southeast mask175.png  src.jpg  dest.jpg -gravity southeast ...

  7. Expression Blend4经验分享:制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  8. [转]制作png格式透明图片的简易方法

    原文地址:http://blog.csdn.net/zhouyingge1104/article/details/24460743 photoshp之类的专业软件太复杂,其实,制作透明图标有比较简易的 ...

  9. $Android制作和使用Nine-Patch图片

    Nine-Patch图片是一种经过特殊处理的png图片,能够指定图片的哪些区域可以被拉伸而哪些区域不可以. (一)普通图片被拉伸时的缺陷 有如下xml文件,其中子LinearLayout的背景图片设置 ...

随机推荐

  1. null和空的区别

    python中None和Null的区别 首先了解python对象的概念 python中,万物皆对象,所有的操作都是针对对象的. 那什么是对象?5是一个int对象,‘oblong’是一个str对象,异常 ...

  2. P1351 联合权值[鬼畜解法]

    题目描述 无向连通图 G 有 n 个点,n−1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 Wi​,每条边的长度均为 1.图上两点 (u,v) 的距离定义为 u 点到 v 点的最短距离 ...

  3. 前端知识总结--html

    1.  doctype的作用是什么? <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HT ...

  4. 新闻系统——SQLHelper助手优化

    在前面我们机房重构的时候已经用过了SQLHelper,但当时就是只会应用,知道利用SQLHelper能够帮助我们连接数据库,但对于怎样书写还是不太清楚,今天就揭开这层神秘的面纱,来真正体验如何来编写S ...

  5. 使用Java实现数据库编程-----------查询学生记录

    查询所有学生记录,包含年级名称 @Override public LIst<Student>getAllStudent() throws Exception{ List<Studen ...

  6. PHP基础语法之 三元运算符和其它运算符

    三元运算符和其它运算符 此外还有一些特殊的运算符和符号,我们再来进行讲解.可能以后我们需要用到.直线电机选型 符号 说明 $x? 真代码段:假代码段 判断是否为真假 ? 真情况 : 假情况; ``(反 ...

  7. LOJ P10149 凸多边形的划分 题解

    Analysis 区间dp+压位高精 dp五分钟,高精两小时 #include<iostream> #include<cstdio> #include<cstring&g ...

  8. 十一.简单MariaDB数据库的管理

    默认端口:3306 1.安装 ]# yum -y install mariadb-server ]# systemctl restart mariadb 2.基本操作 ]# mysql #进入 ]&g ...

  9. Python2.7学习

    网上很多代码都不适用于python3版本,所以还是转回版本2来学习了 install 安装模块特别简单 E:\01_SOFT\Python27\python  -m easy_install sunb ...

  10. java文件上传下载组件

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...