〓 系统
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 关机 | halt | halt | |
| 重启 | reboot | reboot | |
| 系统监视器 | top | 系统时间, 运行天数, 当前登录用户数, 系统负载 总进程数, 运行中的, 睡眠的, 停止的, 未响应的 Cpu(s):us 用户, sy 系统, ni XX, id 空闲, wa 等待, hi XX, si XX Mem, 已使用, 空余, 缓冲 Swap, 已使用, 空余, 缓冲 快捷键： M 按占内存排序 P 按占Cpu排序 1 显示每个 Cpu k 杀死进程 q 退出 | top |
| 查看进程 | ps | aux -ef | 列出包含 java 的进程 ps aux |grep java ps -ef |grep java |
| 查看内存及 Swap 用量 | free | -b,-k,-m,-g 按单位显示 | free -m |
| 查看系统时间 | date | 显示 CST 时间 -R 显示时区 -u 显示 UTC 时间 | date |
| 查看硬件时间 | clock | clock | |
| 设置系统日期 | date -s 月/日/年 | ||
| 设置系统时间 | date -s 时:分:秒 | ||
| 将系统时间写入到硬件时间 | clock -w | ||
| 查看系统版本 | cat /etc/*release | ||
| 升级系统软件 | yum update -y |
〓 文件
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 进入目录 | cd | cd .. # 上一层目录 cd /root # 根目录 | |
| 列出目录 | ls | 白色：表示普通文件 蓝色：表示目录 绿色：表示可执行文件 红色：表示压缩文件 浅蓝色：链接文件 红色闪烁：表示链接的文件有问题 黄色：表示设备文件 灰色：表示其他文件 | ls |
| 创建目录 | mkdir | mkdir XXX | |
| 删除目录 | rm | rm -rf XXX | |
| 删除文件 | rm | rm XXX | |
| 复制文件 | cp | cp XXX YYY | |
| 复制目录 | cp | -r 复制目录及目录内的所有项目 -v 详细显示进行的步骤 | cp -rv XXX YYY |
| 重命名文件 | mv | -i: 若指定目录已有同名文件，则先询问是否覆盖旧文件; -f: 在mv操作要覆盖某已有的目标文件时不给任何指示; | mv 源文件 目标文件 |
| 移动文件 | mv | mv 一个或多个文件 目标目录 | |
| 下载文件 | wget | 下载到当前目录 | wget http://XXX.tar.gz |
| 计算文件/目录的磁盘用量 | du | -a 不仅显示目录，同时显示文件 -h 容易阅读方式显示 --max-depth=N 可指定计算深度 | du -ah --max-depth=1 | sort -n |
| 查找文件 | find | find /home -name *.apk |
〓 tar
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| tar | tar | -z 是否压缩 -c 打包 -x 解包 -v 详细地列出处理的文件 -f | 打包：tar -cvf abc.tar abc 解包：tar -xvf abc.tar 压缩打包：tar -zcvf abc.tar.gz abc 解压解包：tar -zxvf abc.tar.gz |
〓 磁盘
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 查看所有磁盘及分区 | fdisk -l | fdisk -l | |
| 查看当前挂载 | df | -h 按可阅读的方式打印数值和单位 -T 显示文件系统类型 | df -hT |
| 管理磁盘分区 | fdisk /dev/*** | 进入后的操作说明： m 显示命令菜单 d 删除一个分区 n 创建一个分区（e 扩展分区；p 主分区） t 改变分区ID q 不保存退出 w 保存退出 | fdisk /dev/vdb |
| 格式化分区 | mkfs.*** /dev/***N | mkfs.xfs /dev/vdb1 | |
| 挂载分区 | mount /dev/***N /*** | mount /dev/vdb1 /www | |
| 卸载分区 | umount /dev/***N | umount /dev/vdb1 | |
| 开机自动挂载 | vi /etc/fstab | 配置文档格式：设备 挂载点 文件系统类型 defaults 0 0 | 打开：vi /etc/fstab 配置：/dev/vdb1 /www xfs defaults 0 0 |
〓 网络
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 查看 IP 配置 | ifconfig | ifconfig | |
| 配置网卡 IP | 配置文件目录：/etc/sysconfig/network-scripts/ 配置文件格式： DEVICE=eth0 / eth0:0 / ... # 在配置多线时若使用 cp 命令复制配置文件，必须修改此项以防止冲突 HWADDR=XX:XX:XX:XX:XX:XX # 网卡地址 TYPE=Ethernet # 以太网 UUID=******** ONBOOT=yes # 开机启动 NM_CONTROLLED=yes BOOTPROTO=static # 使用静态 IP IPADDR=192.168.1.2 # IP 地址 NETMASK=255.255.255.XXX # 子网掩码 GATEWAY=192.168.1.1 # 网关 DNS1=114.114.114.114 DNS2=8.8.8.8 | vi ifcfg-XXXN(:N) | |
| 重启网卡 | 使配置生效 | service network restart |
〓 防火墙
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 配置 iptables | 添加需要允许的端口的方法同 22 端口 | vi /etc/sysconfig/iptables | |
| 重启使配置生效 | service iptables restart |
〓 用户/权限
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 添加用户 | useradd | -g 组名 # 加入到该组 -s /bin/false #不允用户直接登录系统 | useradd –g 组名 用户名 -s /bin/false |
| 修改密码 | passwd | passwd 用户 | |
| 查看所有用户 | cut -d : -f 1 /etc/passwd | ||
| 查看可以登录系统的用户 | cat /etc/passwd | grep -v /sbin/nologin | cut -d : -f 1 | ||
| 删除用户 | -r, --remove remove home directory and mail spool | userdel 用户 | |
| 添加用户组 | groupadd | groupadd 组名 | |
| 为组添加用户（用户必须已存在） | gpasswd | gpasswd -a 用户 组 | |
| 将用户移出组 | gpasswd | gpasswd -d 用户 组 | |
| 查看用户所属组 | groups | groups 用户 | |
| 查看组中有哪些用户 | groupmems | groupmems -g 组 -l | |
| 更改文件/目录所有者 | chown | -R 递归处理所有的文件及子目录 | chown -R 用户:组 *** |
| 更改文件/目录权限 | chmod | -R 以递归方式更改所有的文件及子目录 | chmod -R 777 *** |
〓 vi 编辑器
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 打开文件 | vi | vi XXX | |
| 进入编辑模式 | 按 a/i/o/Insert 等 | ||
| 进入末行模式/命令模式 | 按 Esc后： :w 保存不退出 :q 退出（提示是否保存） :wq 保存并退出 :w XXX 另存到文件 XXX :q! 不保存退出 |
〓 计划任务
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 设置计划任务 | crontab | 详细步骤见本页底部 | crontab -l # 查看计划任务 crontab -e # 编辑计划任务 |
〓 网站
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 简单审查日志 | cat | grep | cat 日志文件 | grep 关键词1 | grep 关键词2 | more | |
| 日志分析 | goaccess | 见下文 |
〓 goaccess
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 安装 | yum install goaccess | ||
| 日志格式 | NCSA Commbined Log Format | date_format %d/%b/%Y log_format %h %^[%d:%^] "%r" %s %b "%R" "%u" | |
| 参数 | -f | 需要解析的日志文件 | |
| 参数 | -e | 指定 IP 地址统计 | |
| 参数 | -p | 指定配置文件 | 可以将上面的日志格式内容保存到文件 ~/.goacessrc |
| 参数 | -H | 显示 HTTP 协议信息 | |
| 参数 | -M | 显示 HTTP 方法信息 | |
| 生成文件 | goaccess -f 日志文件 -p ~/.goaccessrc > 目标文件.htm |
〓 lnmp
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 重启 LNMP | /root/lnmp restart | ||
| 重启 MySQL | /etc/init.d/mysql restart | ||
| 重启 PureFTPd | /root/pureftpd restart | ||
| 安装 LNMP | http://lnmp.org/install.html | ||
| 常见问题 | http://lnmp.org/faq.html | ||
| 状态管理命令 | http://lnmp.org/faq/lnmp-status-manager.html | ||
| 相关软件目录及文件位置 | http://lnmp.org/faq/lnmp-software-list.html | ||
| 防跨站、跨目录安全设置（仅支持 PHP 5.3.3 以上版本） | http://www.vpser.net/security/lnmp-cross-site-corss-dir-security.html | ||
| 查看 Nginx 版本 | nginx -V | ||
| 查看 MySQL 版本 | mysql -V | ||
| 查看 PNP 版本 | php -v | ||
| 查看 Apache 版本 | httpd -v | ||
| 查内存 | cat /proc/meminfo | ||
| php.ini | vim /usr/local/php/etc/php.ini | ||
| MySQL 配置文件 | vim /etc/my.cnf | ||
| 添加网站 | /root/vhost.sh | ||
| 添加 ProFTPd 用户 | /root/proftpd_vhost.sh |
〓 nginx
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 启动/停止/重启 | service nginx 或 /etc/rc.d/init.d/nginx | service nginx start service nginx stop service nginx restart | |
| 伪静态 | 在 .conf 文件中配置 | rewrite ^(.*)/read-htm-(.*)\.html(.*)$ $1/read.php?$2.html? last; rewrite ^(.*)/thread-htm-(.*)\.html(.*)$ $1/thread.php?$2.html? last; rewrite ^(.*)-htm-(.*)$ $1.php?$2 last; rewrite ^(.*)/simple/([a-z0-9\_]+\.html)$ $1/simple/index.php?$2 last; rewrite ^(.*)/data/(.*)\.(htm|php)$ 404.html last; rewrite ^(.*)/attachment/(.*)\.(htm|php)$ 404.html last; rewrite ^(.*)/html/(.*)\.(htm|php)$ 404.html last; | |
| 防盗链 | 在 .conf 文件中配置 | HttpRefererModule | location ~* \.(gif|jpg|png|swf|flv)$ { valid_referers none blocked *.0574bbs.com *.eyuyao.com 0574bbs.com eyuyao.com; if ($invalid_referer) { rewrite ^/ http://web1.eyuyao.com/yyad/src/3122.jpg; # return 404; } } |
| 浏览器缓存 | 在 .conf 文件中配置 | location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } |
〓 vsftpd
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 安装 | yum install vsftpd | ||
| 查看是否已安装 | rpm -q vsftpd | ||
| 启动/停止/重启 | service vsftpd | service vsftpd start service vsftpd stop service vsftpd restart | |
| 配置文件 | vi /etc/vsftpd/vsftpd.conf |
〓 MySQL
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 登录 | mysql | mysql -u username -p | |
| 登出 | exit | ||
| 查看信息 | status; | ||
| 查询当前正在执行的 SQL 语句 | show processlist; | ||
| 删除指定时间之前的日志 | PURGE | PURGE MASTER LOGS BEFORE '2015-1-1 0:00:00'; |
〓 scp 远程文件/目录传输命令 (yum install openssh-clients) 用法
scp 会把文件权限（读取/写入/执行）带过来，但所有者为当前执行 scp 命令的用户。
scp 低版本有许多漏洞，用完最好 yum remove openssh-clients
scp 采用直接覆盖的机制，如需判断文件无差异则跳过，应改用 rsync 命令。查看 rsync 详细使用方式及与 scp 对比
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 若远程服务器 SSH 端口非默认 | scp | -P 端口号 | |
| 下载远程服务器上的文件到本地 | scp | scp 远程用户@远程服务器:远程文件 本地文件 | |
| 下载远程服务器上的目录到本地 | scp | -P 端口 -v 显示进度 -r 递归 | scp -r 远程用户@远程服务器:远程目录 本地目录 实例：scp -r root@x.x.x.x:/a/b/ /c/d/ 结果：/c/d/b/，即将整个 b 复制到 d 下（注意与 rsync 命令的区别） |
| 将本地文件上传到远程服务器 | scp | scp 本地文件 远程用户@远程服务器:远程文件 | |
| 将本地目录上传到远程服务器 | scp | 最终目录结构参：远程->本地 | scp -r 本地目录 远程用户@远程服务器:远程目录 |
〓 rsync 远程文件/目录传输命令 (yum install rsync) 用法查看 rsync 详细使用方式及与 scp 对比
rsync 会把文件权限（读取/写入/执行）带过来，所有者也会带过来。
相比于 scp 最大的优势就是可以增量同步
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 下载远程服务器上的目录到本地 | rsync | -a 递归 -v 详细 -p, -- perms 保持权限 -g, -- group 保持属组 -o, --owner 保持属主 -r 递归 --progress 打印 --delete 删除已不存在的文件 -u 表示仅更新较新的文件 -z 表示在传输过程中进行压缩 -e 'ssh -p 2222' 指定其它端口 | rsync 远程用户@远程服务器:远程目录 本地目录 实例：rsync -avu --progress root@x.x.x.x:/a/b/ /c/d/ 结果：/c/d/，即将 b 内的文件(夹)复制到 d 下（注意与 scp 命令的区别） |
| 将本地文件上传到远程服务器 | rsync | rsync 本地文件 远程用户@远程服务器:远程文件 | |
| 将本地目录上传到远程服务器 | rsync | 最终目录结构参：远程->本地 | rsync 本地目录 远程用户@远程服务器:远程目录 |
〓 ftp 客户端 (yum install ftp)
| 功能 | 命令 | --help | 示例 |
|---|---|---|---|
| 登录 | ftp | ftp 目标服务器 | |
| 列出远程当前路径目录/文件 | ls | ls | |
| 创建远程目录 | mkdir | mkdir 目录名 | |
| 删除远程目录（空） | rmrmdir | mkdir 目录名 | |
| 进入远程目录 | cd | cd 目录名 | |
| 显示远程当前路径 | pwd | pwd | |
| 重命名远程文件 | rename | rename 原文件名 新文件名 | |
| 上传文件 | put | put 本地文件名 | |
| 下载文件 | get | get 远程文件名 | |
| 批量下载文件 | mget | 需要单个确认 | |
| 批量下载文件【lftp】 | mirror | 参数有很多 | mirror |
| 返回 shell（不退出） | ! | ! | |
| 返回 ftp（接上步） | exit ftp | exit ftp | |
| 结束 | bye quit | bye quit |
〓 iftop
流量监控工具 教程
〓 GoAccess
实时网站日志分析工具 官网
〓 Cacti
常见问题笔记
加硬盘
插入新硬盘
若有 RAID，则先设置，使操作系统能认到硬盘
使用 fdisk 命令对新设备进行分区
使用 mkfs 命令对新分区进行格式化
使用 mount 命令进行挂载
设置开机自动挂载（vi /etc/fstab）
更改 MySQL 数据库目录位置
停止 MySQL 服务
将原数据目录转移或复制到新位置（若是复制，则修改所有者使原来一致）
找到 my.cnf 配置文件（一般在 /etc/），修改 datadir 值为新路径
启动 MySQL 服务
502 Bad Gateway 问题排查
查看 PHP 日志，路径：/usr/local/php/var/log
一般为“server reached pm.max_children setting (10), consider raising it”连接数问题，在“/usr/local/php/etc”下的所有配置文件中查找并修改相关设置即可（如改成 1000）。
计划任务（实例：定时备份数据库并通过 FTP 同步至其它服务器）
创建可执行文件：vi dotask.sh
dotask.sh 的内容示例：
DATE_TIME=`date +%Y_%m_%d_%H%M%S`;
FILE_NAME=数据库名_backup_$DATE_TIME.sql;
cd /home/mysqlbackup/;
mysqldump -u数据库用户名 -p数据库密码 数据库名>$FILE_NAME;
tar -zcf $FILE_NAME.tar.gz $FILE_NAME;
rm $FILE_NAME;
ftp -v -n FTP地址 << END
user FTP用户名 FTP密码
bin
put 本地目录文件 目标路径文件
bye
END
文件名乱码问题可以在行末加“;”来解决赋予执行权限：chmod 777 dotask.sh （ls 命令时呈绿色）
编辑计划任务：crontab -e
crontab 书写规则：
# 分 时 日 月 周 文件路径
0 3 * * * /home/dotask.sh
30 4 * * * /home/dotask2.sh重启 crond：/etc/init.d/crond restart
netstat
netstat -an | grep xxx.xxx.xxx.xxx 可查看此 IP 的 TCP 请求及端口
最近，空心图标和实心图标的讨论变得激烈起来，有言论指出空心图标在视觉上比实心图标看起来更复杂，更容易让用户差生疲劳感和倦怠感。对此，设计师们都各抒己见，一部分人表示赞同这种说法，而另一部分人则表示这样的言论将问题过分了放大化了，并且在证据方面有所欠缺。
图标也可以理解为是网站中的一种指引，是每个新用户都会涉及到的元素，所以无论空心或实心，一个能够令人一目了然，并且记忆深刻的图标才是用户真正喜欢的图标。
以下是小编搜寻的一些空心或实心的图标案例，看看你更倾心于哪一款呢？
1.模糊背景上覆盖着由简单线条、字体和单一的颜色组成的空心图标，这会让整个界面看起来很优雅。不仅如此，这种简易的设计手法也让设计师轻松不少，在效果和操作上都令大家很满意。
2.纯色的背景似乎搭配任何元素都能达到令人意想不到的效果，下面这个案例也不例外。正红色与白色之间的经典配搭，加以可爱的造型，成就了一个俏皮的实心图标设计。界面底部的实心按钮与幽灵按钮也与图标区域前后呼应。
3.APP底部的图标随着用户的任意切换，在空心和实心之间自由转变。实心的图标相比较空心的而言，给人一种更突出和明显的视觉效果，让用户更容易的抓到重点。而主内容左边的卡通小图案同时采用了空心的设置，尽显极简主义。
4.Line的界面似乎代表了大多数APP的图标设计方式。头部和底部的图标选用两种颜色的实心设计，下拉菜单部分使用空心图标。这样的设计虽然比较大众化，但不可否认的是，这样的做法的确让整个界面看起来格外整洁。
5.幽灵按钮虽然简洁大方，但是过多的使用会另界面很单调无味，但如果使用全部实心的图标设计又会觉得很突兀。下面这个案例就想出了一个好方法。既然空心实心都不合适，那不如尝试一下让两者结合在一起吧。
6.两种色差明显的颜色搭配在一起会体现出一种自然而然的时尚感，黑色背景和亮黄色的图标元素就是很典型的例子。强烈的对比色会让空心图标看起来也像实心图标一样，具有突出重点的效果。
7.Metro风格的界面设计也能运用在APP的图标模块中，案例中将各种第三方分享平台的实心图标都用方块元素连接在一起，让原本单调的图标瞬间活跃了起来，给用户一种焕然一新的感觉。
8.传统的导航图标大多会集中在一个区域内，而SevenEleven的APP在此做了很大的突破，将4个部分分别分布在界面的上下左右，简单的界面突然有了运动场的氛围，让APP充满了生命力。
9.天气类应用的看点中总会有气候图标的一席之地，正如这个案例中所表现的，这又是一个空心与实心相结合的图标设计。
10.这也是一个纯色块与实心图标搭配的案例，这个APP的界面设计其实很普通，但正因为图标的设计让网站变得可爱起来。
图标在网页设计中算是一个小单元，但它的重要性大家都有目共睹。空心图标和实心图标在不同的环境中发挥着不同的作用，美化着网页中的小细节。
“/”应用程序中的服务器错误。
未能加载文件或程序集“MySql.Data.Entity.EF6, Version=6.10.7.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
6.10.7 版本的 MySql.Data.Entity.EF6.dll 文件发布后会自动变成 6.10.6，文件大小一样，只要用 FTP 上传覆盖一下即可。
经测试，.NET Framework 4.8 的 Cache.Insert() 已恢复正常。
安装 .NET Framework 4.7 后，不管项目有没有升级到 .NET Framework 4.7，使用 Cache.Insert() 添加的自动过期的缓存都不会过期了，可以使用 Cache.Add() 来解决！
使用 Cache.Insert() 例：
HttpRuntime.Cache.Insert(key, value, null, DateTime.Now.AddSeconds(5), Cache.NoSlidingExpiration);改为使用 Cache.Add()：
HttpRuntime.Cache.Add(key, value, null, DateTime.Now.AddSeconds(5), Cache.NoSlidingExpiration, CacheItemPriority.Default, null);如果 Cache 中已保存了具有相同 key 的项，则调用 Add 方法将不作任何更改。（Insert 方法则会覆盖该值）
完整测试代码：
public static DateTime DateTimeNow
{
get
{
if (HttpRuntime.Cache["DateTimeNow"] == null)
{
HttpRuntime.Cache.Add("DateTimeNow", DateTime.Now,
null, DateTime.Now.AddSeconds(5), Cache.NoSlidingExpiration,
CacheItemPriority.Default, null);
}
return Convert.ToDateTime(HttpRuntime.Cache["DateTimeNow"]);
}
}在部分项目中（如 .NET Framework 4 项目中）发现上述改动仍不起作用，不会自动过期，那么可以采用以下方法：
方法一、可以记录将数据添加到 Cache 的时间，获取数据时判断该时间，超时则清除该 Cache 并重新赋值；
方法二、放弃缓存依赖，用定时器清除 Cache 数据。
设规则：
属性-文件传输规则-全局
如果 时间 为 较旧 并且 传输 为 下载 那么 覆盖
如果 大小 为 不同 并且 传输 为 下载 那么 覆盖
如果没有匹配的规则，那么：跳过
建站点：
站点-站点管理器-新建站点
设好本地路径，传输 自定义规则 使用全局设置
队列：
连接站点，在需要备份的目录上右键，队列
在队列上右键，另存为
计划：
工具-计划-新建任务
选择队列文件，使用自定义规则
设置执行时间，Windows 密码
设置完成！
Android 系统要求每一个安装进系统的应用程序都是经过数字证书签名的，数字证书的私钥则保存在程序开发者的手中。Android 系统将数字证书用于在应用程序的作者和应用程序之间建立信任关系，但并不用于决定最终用户可以安装哪些应用程序。这个数字证书并不需要权威的数字证书签名机构认证，它只是用于应用程序包自我认证的。
Android 数字证书包含以下几个要点：
（1）所有的应用程序都必须有数字证书，Android 系统不会安装一个没有数字证书的应用程序
（2）Android 程序包使用的数字证书可以是自签名的，不需要一个权威的数字证书机构签名认证
（3）如果要正式发布一个 Android 应用程序安装包，必须使用一个合适的私钥生成的数字证书来给程序签名，而不能使用如 ant 工具等生成的调试证书来发布。
（4）数字证书包含应用程序所有者姓名，所在组织，国家，证书创建时间，证书有效期等信息。
（5）Android 使用标准的 Java 工具 Keytool and Jarsigner 来生成数字证书，并给应用程序包签名。
（6）Android 数字证书跟包名无关，多个不同包名的应用程序安装包可使用同一个数字证书对其进行签名。
（7）Android 系统不会覆盖安装运行包名相同，签名证书不同的两个安装包。
注意：如果您的 App 已经上线 Android 市场，或者已经正式发布，有用户已经正式使用了，切勿再更换签名证书，否则，App 在自动更新覆盖安装升级时，Android 系统将会认为新签名证书的 App 安装包是“非法签名”的 App，而不予安装，导致更新失败，流失用户。
原文：http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
翻译：叮当当咚当当小胖妞呀
从IOS6开始，苹果公司就一直建议我们使用自适应布局，但是迄今为止，我发现大家都在回避这个问题，考虑的最多的仍然是固定布局。
iPhone 6的上市让人们很难再去逃避自适应布局这个问题，四种屏幕尺寸（如果要支持iPad就要上升到5种）、三种分辨率和转向似乎让着手于自适应布局变得更加简单。
在文章的最后，你应该能流畅使用 storyboards、 约束(constraints)和 size class特性，这三个是Apple为开发和制作自适应布局提供的Xcode工具。
所以下载Xcode6，给自己来杯饮料，留上一个小时的时间，让我们开始吧！
- Storyboards
- 模拟尺寸
- 约束
- 头部和尾部空间
- 横向空间约束
- 同等宽度约束
- 纵横比约束
- 约束管理
- 添加约束
- 检查和编辑现有约束
- 删除约束
- 布局问题和冲突
- 错位视图警告
- 约束缺失错误
- Size Classes
- 宽度和高度特性
- 我们的目标…
- 为通用的size class添加约束
- 为iPhone纵向布局添加约束
- 为iPhone横向布局添加约束
- 编辑助手：设备预览
- 为iPad布局添加约束
- 使用布局和间隔视图
- 布局视图样例
- 间隔视图样例
- 下一步
Storyboards
Xcode中，storyboards可以让你在屏幕上拖动和放置原生对象（例如按钮、图片、文本框和标签）并且定义每个屏幕之间如何连接。
在Xcode专业术语中，可以看到、摸到、互动的用户界面元素，我们称之为 视图（按钮、图片、文本框、标签等等）。
包含并管理所有那些视图的屏幕被称为 视图控制器，我倾向于交替使用这些术语。
当我们在一个storyboard上添加视图控制器的时候，它的纵横比其实跟任何设备都不匹配，事实上，它是一个完美的600pt*600pt的正方形：
这提醒了我们，storyboard屏幕并不代表特定硬件上的屏幕，而是 任何IOS设备的抽象表现。
模拟尺寸
也许你不介意在600pt*600pt的画布上操作，但是在实际大小上操作可能会更有帮助。
我们可以非常方便的在Xcode里改变视图控制器模拟的尺寸和转向：
约束
向你们展示约束的最好方法是实例。
我们先创建一个简单的包含一个屏幕的storyboard（模拟4英寸iPhone的尺寸），再添加两个相邻的正方形。
当我们在竖屏中运行app的时候，这两个正方形完全按照我们的布局排列，当我们变成横屏时，它们仍然忠于自己的坐标：
当我们使用iPhone 6模拟器运行项目的时候，我们可以再一次看到，我们的布局并没有自适应不同的屏幕尺寸，屏幕右边多出了可见的空白区域。
这是由于没有约束，这些对象仍然会按照我们在storyboard上创建的x,y坐标和面积来定位。
所以让我们开始添加约束，看看会对它们有些什么影响。
头部和尾部空间
我们在蓝色方块前添加10pt的头部空间约束，在红色方块后添加10pt的尾部空间约束。
当我们运行项目的时候，约束把蓝色方块固定在屏幕左侧，把红色方块固定在右侧。
横向空间约束
我们在两个方块之间再添加一个10pt的横向空间约束，就像上一个约束一样，这样会让两个方块之间有一个固定的空间。
当我们运行项目的时候，会发现一个意料之外的结果：我们所有的约束都满足了，但是为了满足所有约束，其中一个方块被拉伸了。
这似乎告诉我们这样一件事：除非被告知，否则IOS会尽量让大多数对象都保持“自然”大小。
同等宽度约束
我们添加一个同等宽度约束。
当运行项目的时候，我们可以看到两个方块宽度的增量相同。
纵横比约束
最后，对两个方块添加纵横比约束。
这个约束保证了宽度和高度的比永远是相同的。
当我们运行app的时候，我们可以看到每个方块的宽度在增加，高度也同时在增加。
用iPhone 6模拟器运行项目，覆盖我们之前添加过的约束，你可以看到这两个正方形是如何利用可用空间来拉伸的。
约束管理
现在你已经看到了我们是如何使用约束的，下面我们来介绍一下具体操作。
提示：尽量少使用约束
添加约束的一个要点是试着挑战自己，越少使用约束越好。
虽然我并不认为添加的约束数量能够很大程度上影响IOS的性能，但是越少的使用约束，你的布局就会越好维护。
添加约束
在storyboard中添加约束有三个方法：
- 约束弹窗也许最好的方法就是选择一个或多个对象，从其中一个弹窗中添加约束。我认为这是个很好的方法，因为可以看到现有约束的范围。如果有一条约束不可用，可能就意味着你需要两个或更多对象来实施这条约束。
- ctrl + 拖动你可以按住ctrl键，同时拖动到一个对象上（可以是相邻对象、父级对象或者是自身），会出现一个浮层告诉你可以被添加的约束有哪些。这是我最喜欢的添加约束的方法，因为你不需要把你的鼠标移动到大老远的底部再回到对象。
- 菜单/绑定你也可以选择一个或多个对象，在菜单中点击 editor -> pin来选择约束，这其实是最没有效率的方法，但是如果你发现自己不停的重复添加一种约束，也许为一个或多个选项添加绑定更合理一点。
检查和编辑现有约束
检查视图中应用的约束最简单的办法就是选择视图，切换到Size检查面板。
或者在文档大纲层次面板中切换constant数值。
无论是哪种方法，选择约束可以让你直接更新它。
删除约束
同样的，约束也可以通过高亮+点击删除按钮来删除。
要删除一个视图的所有约束，或者屏幕中的所有约束，在布局问题弹窗中有一条捷径：
布局问题和冲突
当我们在storyboard中添加约束的时候，Xcode总会给出一些关于这些约束的警告或者错误。
有时候这些问题可以忽略不计，但是更多的时候，它们必须被解决。
查看约束警告和错误最好在文档大纲面板中，每个视图控制器会有一个红色或者黄色的icon来表示是不是有布局问题：
错位视图警告
一个比较常见的警告是错位视图警告，如果约束规定这个视图应该在的地方，和这个视图实际在的地方不匹配，那么这种警告随时会出现。
当你转换模拟尺寸或者不小心用鼠标移动了一个视图，这些警告也会出现。
点击一个错位的视图，屏幕上会出现一个虚线框，告诉你约束规定了这个视图应该在的位置。
如果点击警告，会出现一个带有几个选项的浮层，你可以选择让Xcode更新约束来匹配storyboard上的位置，也可以让Xcode更新框架来移动或者拉伸视图，使它们回到约束规定的位置。
缺失约束错误
让我们回到一开始蓝方块和红方块的例子，我们没有添加过一个关于纵向位置的约束，但当我们运行app的时候看起来完全没问题，因为IOS会认为纵向位置就是我们在storyboard上放置的位置，不过为了避免一些意料之外的行为，我们最好还是规定一下。
在 顶部布局向导添加顶部空间约束可以消除一些说不定道不明的约束和错误。
Size Classes
为了在大多数基础布局或者更高级的布局上使用约束，你需要同时使用size classes。
Size classes是一种能够告诉你物理设备宽度和高度的特性。
当我们在storyboard的屏幕上添加对象或者约束时，只有设备符合当前的宽高特性，对象才会显现，约束才会被应用。
这是一个非常有用的方法，它让我们确定了不同设备和转向下布局的变化。
高度和宽度特性
使用 紧凑(compact)、 任意(any)和 正常(regular)这三种的组合，可以让我们确定一些范围内的设备布局。
虽然不能涉及每一个变化（比如不能确定iPhone 6 Plus的竖向模式，也不能让iPad的转向消失），但是大多数的变化都可以确定。
我们说过，介绍size classes最简单的方法是实例，所以让我们看一个例子。
我们的目标…
作为例子，我们做一个Instagram详情页的简单版本，可以适应大屏和转向。
我们的目标是创建一个布局，它可以机智的适应更大的iPhone 6设备（我说的机智，是指只有照片会放大，其他的元素如头像照片仍然不变），并且当设备横屏的时候，图片和元数据会并肩排列，而不是像竖屏时的上下排列。
为通用的size class添加约束
跟之前的例子不同，这次我们不使用模拟尺寸度量，我们使用通用size class的抽象方形布局，这样会使我们记住，为这个size class添加的任何视图和约束，只能是那些添加在任意屏幕尺寸和转向上的视图和约束。
我们需要用到这些约束：
除了必要的空间、间隙和纵横比约束，我们还需要让某些对象排列在顶部或者底部。
现在，在你的storyboard上添加视图和约束吧。做这步的时候，我的storyboard长这样：
注意，现在我们有了所有转向上所需要的元素，但是我没有费心完成每个转向上的布局，下一步我们才会做！
为iPhone纵向布局添加约束
现在，我们把size class切换到 紧凑宽度和 正常高度，这个尺寸特性的组合适用于任何竖屏下的iPhone设备。
如果要切换size classes，点击storyboard中下方的size class标签，选择你想要看到的宽高组合。
注意，当你切换size class时，视图控制器的尺寸会更新来显示新的抽象布局。
最后，你可以重新定位、拉伸视图和添加竖屏上的约束了。这里有一些我添加到竖向布局上的约束：
这是我做到这步时，我的storyboard的样子：
在这个阶段，你可以用任何的iPhone模拟器（3.5、4、4.7或者5.5英寸屏幕）来运行你的项目，看看竖屏情况下的布局是否合理，虽然如果转向成横屏时，布局看上去会一团糟。
注意，我们没有固定图片的宽度，我们只是简单地把图片的左右边缘固定在屏幕两侧。当变为更大的iPhone 6屏幕尺寸时，图片会被拉伸，又因为我们添加了一个固定图片纵横比的约束，所以高度也会同时增加。
为iPhone横向布局添加约束
现在切换size class到 任意宽度和 紧凑高度，这种尺寸特性的组合适用于任何横屏下的iPhone设备，并且会为了满足横屏视图下的目标更新布局。
这次，图片的顶部、左边和底部边缘都被固定在父级视图的边缘。
这个局部另一个有意思的地方是，在评论标签上添加的尾部空间约束。
当图片的约束使得图片变大的时候，这个标签上的约束会使得自身变窄。为了适应这种视图下的文本，文本高度需要增加到两行——的确如此！
下图是我做到这步时storyboard的样子。注意，在文档大纲中，一些约束会稍稍渐隐，这些约束是在竖向视图中我们添加的，它们仍然存在，但是当我们选中当前的宽高特性时，它们不会被应用。
也要注意，当你转换宽高特性时，storyboard会更新以便显示你为那些特性增加的约束。太棒了！
现在运行项目，我们会发现当转向改变时，我们有了一个既适用于横屏又适用于竖屏的布局，更棒的是在转向时，会有一个完美的过渡动画。
我把整个过渡动画放慢，这样你们能看的更加清楚。注意动画中也有层级关系，正由于此，即使在正常布局下视图并没有重叠，我们也需要考虑如何安排视图的层级关系……
编辑助手：设备预览
Xcode另外一个很有用的东西：设备预览助手。你不再需要无数次运行项目来检查你的布局是否正确，你只需要使用编辑助手storyboard预览，选择你想要的所有设备和转向就可以了。
这并不是完美的（比如导航条的颜色在这个例子中缺失了），但是它却是一个很好地选择，它可以让你把你自己的语言切换到双倍长度伪语言，可以在你的storyboard中重复任何文本。
这是我storyboard上的预览助手，它展示了一个3.5英寸横屏和4英寸竖屏的iPhone，你可以看到我还需要再加工加工来适应更长的标签……-_-
为iPad布局添加约束
现在，切换size classes到 正常宽度和 正常高度，这是iPad横屏和竖屏的特性。
就像之前一样，我们重新定位、拉伸我们的视图。对于iPad布局，我决定使用固定尺寸的图片（所以它不会像在iPhone上那样切换横竖屏时会改变大小），元数据都显示在图片底部。
下图是我在重新排列视图并添加了约束之后的storyboard：
到现在为止，我们为某些特别的size class特性添加了约束，但是现在我们要尝试些不同的东西。
由于iPad上会有多余的空间，我们不要仅仅只是重排视图，让我们来加一点额外的内容。对于这个例子来说，我们再加两张图片（也许是在这张主照片之前和之后拍摄的照片）。
这是我的storyboard更新之后的样子：
我原本可以手动输入这些次级图片的宽高，但我没有，取而代之的是我让它们的尺寸变成主图片的某个比例。
这样做的好处是如果我们决定改变主图片的尺寸，布局的其他部分会自动的计算并且更新次级图片的宽高，而不用我们手动输入。
这是一张我截的图，我改变了主图片的宽度约束，可以看到其他的部分也随之更新了。
我没有在iPad模拟器上运行项目并截屏，不过这里有一些横屏和竖屏的效果图：
使用布局和间隔视图
Xcode中有些约束我们可以随时运用，但是对于一些些常见的布局，我们需要一点帮助。
布局视图样例
要把一个视图的边缘固定在父级视图的边缘，或者把它固定在父级视图的正中心是件很简单的事情，~~但是我没有发现简便的方法，让视图固定在离正中心有一段固定距离的地方。~~感谢Jeff Nouwen指出，在把视图固定在中间后，你可以改变constant值来达到你的期望。
理论上来说，我们需要的是一个‘ 中心排列导向’，即任何视图都能水平和垂直居中与父级视图中：
为了实现这个目标，通过现在我们可以使用的约束，我们把我们的视图嵌入一个外层视图（这个外层视图没有背景色，只是为了帮助我们布局而存在），可以把它定位在父级视图的中间。
通过这个方法，你的约束看起来可能像这样：
现在我比较喜欢让我的布局层级尽量平。另外一个不使用外层视图的方法，我叫它 布局视图。
使用这种方法，我倾向于在storyboard中添加一个颜色明亮的视图，然后把它的hidden属性设置为true，你仍然可以在storyboard布局中看到它（虽然稍稍渐隐），但是运行模拟器的时候它不会出现。
现在你在你的视图和布局视图中可以添加 居中排列（align center to center）。
间隔视图样例
之前我们看到了我们是如何固定视图边缘到父级视图边缘的间隙，使得当父级视图变大时，间隙约束也会让视图变大。
但是如果我们想要视图仍然保持原来的大小，在父级视图变大时，视图之间的间隙也变大呢？
理论上来说，我们想要某种类似 同等宽度约束的约束，只不过同等宽度约束是作用在视图上，我们想让它作用在约束上。
此时我们需要添加 间隔视图来帮助我们布局，但由于我们不想在运行app时看到它们，我们会把它们的hidden属性设置为true。
使用这项技术的方法，是为每一个你想要等比增长的间隙添加一个间隔视图，把其他视图的边缘固定在间隔视图的边缘上，然后为所有的间隔视图添加 同等宽度约束。
下一步
现在希望你们已经完全有信心开始探索应用约束的布局了。
不要指望能即刻成功，Xcode是一个非常复杂的工具，除了storyboard和约束之外它还有很多其他功能，有些功能刚开始使用会觉得很神秘和困惑。就像其他复杂的工具一样，在你熟悉它的怪癖之前你还需要一段适应时间，但是我建议你尽早的去熟悉它，因为我预计（至少我希望）下一代设计师会更多地使用Xcode这样的工具而非Photoshop。
如果你是一位创建设计规范的设计师，并想让IOS开发者遵循你的规范，你应该开始考虑和你的设计团队沟通的最好方法。也许你会创建一个视觉语言来描述你想要应用的约束。
我个人认为，设计师应该更多地承担一些他们创建工作上的责任，而不是让一个前端开发人员重新创建设计意图，而设计师只是管理storyboard文件。
如果你发现这个教程上有任何难以理解的地方，或者有错误的敌方，请让我知道，我会尽快更新这篇文章。
http://cutesoft.net
http://www.cuteeditor.cn/
下载最新版CuteEditor
发布网站后如果提示：
无法为类型 CuteEditor.Editor 授予有效的许可证
则搜索此句，可找到解决办法：
下载CuteEditor.lic覆盖即可