AndroidStudio制作Nine-Patch【.9】图片
使用AndroidStudio制作Nine-Patch【.9】图片,以及为什么要制作Nine-Patch【.9】图片【以聊天气泡为例】
新建一个Module
修改activity_main.xml文件,
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout 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:orientation="vertical"
- android:layout_height="match_parent"
- tools:context=".MainActivity">
- <TextView
- android:gravity="center|left"
- android:background="@drawable/nine"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:textSize="35sp"
- android:textColor="@color/colorAccent"
- android:text="小白阳" />
- </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】图片的更多相关文章
- AndroidStudio制作登录和注册功能的实现,界面的布局介绍
前言 大家好,给大家带来AndroidStudio制作登录和注册功能的实现,界面的布局介绍的概述,希望你们喜欢 每日一句: Success is connecting with the world a ...
- AndroidStudio制作欢迎界面与应用图标
前言 大家好,给大家带来AndroidStudio制作欢迎界面与应用图标的概述,希望你们喜欢 欢迎界面与应用图标 本项目使用Android Studio 3.0.1作为开发工具 activity_sp ...
- AndroidStudio制作底部导航栏以及用Fragment实现切换功能
前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...
- AndroidStudio制作“我”的界面,设置,修改密码,设置密保和找回密码
前言 大家好,给大家带来AndroidStudio制作"我"的界面,设置,修改密码,设置密保和找回密码的概述,希望你们喜欢 学习目标 掌握修改密码功能的开发,和实现用户密码的修改: ...
- AndroidStudio制作个人资料界面模块以及SQLite数据库的使用
前言 大家好,给大家带来AndroidStudio制作个人资料界面模块以及SQLite数据库的使用的概述,希望你们喜欢 学习目标 掌握SQLite数据库的使用,能够实现用数据库来保存用户的信息: 学会 ...
- 使用imageMagick 制作圆角矩形和图片加水印
制作圆角矩形好图片水印都是图片合成的操作 composite -gravity southeast mask175.png src.jpg dest.jpg -gravity southeast ...
- Expression Blend4经验分享:制作一个简单的图片按钮样式
这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...
- [转]制作png格式透明图片的简易方法
原文地址:http://blog.csdn.net/zhouyingge1104/article/details/24460743 photoshp之类的专业软件太复杂,其实,制作透明图标有比较简易的 ...
- $Android制作和使用Nine-Patch图片
Nine-Patch图片是一种经过特殊处理的png图片,能够指定图片的哪些区域可以被拉伸而哪些区域不可以. (一)普通图片被拉伸时的缺陷 有如下xml文件,其中子LinearLayout的背景图片设置 ...
随机推荐
- LTS秘钥协商算法分析
1.根据RCF文档说法 在1-RTT中有两种密钥协商算法(1-RTT ECDHE和 1-RTT PSK )和4中0-RTT密钥协商方式(0-RTT PSK, 0-RTT ECDH ,0-RTT EC ...
- CEIWEI CommMonitor 串口监控精灵v11.0 串口过滤 串口监控
CEIWEI CommMonitor 串行端口监控精灵是用于 RS232 / RS422 / RS485 端口监控的专业 强大的系统实用程序软件.CEIWEI CommMonitor 监控显示, ...
- 【转】provisional headers are shown 知多少
前言 请求里面provisional headers are shown(显示临时报头) 出现的情况很多,但原因是多样的.如果你去直接匹配关键字搜索,得到的结果可能与你自己的情况大相径庭.网上大部分都 ...
- Redis未授权漏洞检测工具
Redis未授权检测小工具 #!/usr/bin/python3 # -*- coding: utf-8 -*- """ @Author: r0cky @Time: 20 ...
- 【PAT-一道看着很难的水题】L2-023. 图着色问题
水题!没其他想说的,还以为可以搞点高大上的搜索呢!十五分钟,暴力两重循环就OK了! 代码如下: #include<iostream> #include<stdio.h> #in ...
- 前端学习笔记--Visual Studio Code安装及中文显示
1.在官网https://code.visualstudio.com/下载对应的版本: 2.安装 一路点击下一步,选中 添加到PATH后,安装. 安装成功,可以直接打开使用: 把界面改成中文显示: ...
- WebStorm 简单搭建NodeJs服务
开始使用 WebStorm 搭建( WebStorm 请自行安装...... ) 在 项目 根目录 新建个 app.js 开始 编写 app,js // 引入 HTTP 模块 const http = ...
- BZOJ1257: [CQOI2007]余数之和——整除分块
题意 求 $\sum _{i=1}^n k \ mod \ i$($1\leq n,k\leq 10^9$). 分析 数据范围这么大 $O(n)$ 的复杂度也挺不住啊 根据取模的意义,$k \ mod ...
- TDOA基站 之 时间同步
TDOA 和 TWR相比,标签可以用最少的信息来定位,但是对于基站要求很高,需要“时间同步”. 这也是TDOA算法的核心部分,很多套件对此讳莫如深,希望能沟通过本文使读者能对TODA同步有一定初步了解 ...
- docker:设置国内镜像仓储
修改docker仓储镜像 vi /etc/docker/daemon.json 增加下面数据 { "registry-mirrors": ["https://xwx6wx ...