Github

代码参考 GitHub-LayoutSample

布局

代码组成

根据不停的平台，尽量尝试了不同的功能模块来实现进行对比

iOS

细节特点

核心公式 first = second × Multiple + Constant

在iOS的 AutoLayout 中，大部分间距计算依赖于屏幕尺寸，无法在ViewDidLoad完成，例如Red+Fix

但是使用了 StackView 或者使用一个 Container 来处理，就可以规避这个问题

基本界面思路

1. 约束RedView的高为100，并且左、右、下三个边距贴紧屏幕
2. 约束YellowView的高为屏幕高度的0.2倍，并且左、右两个边距贴紧屏幕、下边距贴紧RedView的上边距
3. 约束BlueView的左、右、上三个边距贴紧屏幕，下边距贴紧YellowView的上边距
4. 约束ImageView中心点X、Y等同于BlueView，并且约束其宽、高均为BlueView的50%

而黄色和红色内部的布局是iOS的界面思路难点

1. 要满足红色内固定元素的要求，根据AutoLayout远离，我们需要知道间距的大小
2. 需要间距的大小导致必须在 ViewController 已经探测到实际Frame后才能计算出来

或者可以换一种思路，可以 避开对RedView宽度已知的要求

1. 三个Container直接均分整个宽度
2. 然后在 Container 的中心放置FixView

对于黄色内部布局思路难点在于

1. 已知整个宽度上被固定间距占去的大小为 4*Gap
2. 剩下的宽度要由三个Stretch均分
3. 那么左右的 Stretch 的宽度为 1/3屏幕宽度减去 1.5倍的间距
4. 中心的 Stretch 中心 X 坐标一定等于YellowView，而宽度为 1/3屏幕宽度减去一个间距
5. 被减去的间距一共是 1.5+1+1.5 = 4

Android

细节特点

LinearLayout的权重公式 Weight × (Parent - Constant)/SumWeight

与 ConstraintLayout 不同 RelativeLayout 无法按百分比约束Image

如果使用 PureCode 进行 Layout 需要严格的生命周期和id，需要注意一下几点

1. View.inflate() 第三个属性不能是root，因为设置的id没有生效，导致 ConstraintSet 无法生效
2. 设置id 有两种方式，写在XML里或者通过属性设置
3. 对于不设置 id 的 View 在 ConstraintSet 里会导致Crash

基本界面思路

1. 使用ConstraintLayout来对R、Y、B三个View进行布局
2. 使用LinearLayout来对RedView、YellowView的内部进行布局
3. 使用RelativeLayout来对BlueView的内部进行布局

通过配置XML的attribute处理Red、Yellow、Blue的布局

1. 设定ConstraintLayout的宽高均为 match_parent 来获得屏幕大小
2. 设定R、Y、B的 layout_width=”match_parent” 来获取和屏幕等宽
3. 设置Y、B的 layout_height=”0dp” 来让高度约束生效
4. 设定RedView的 Bottom_toBottomOf=”parent”、layout_height=”100dp” 获得固定高度对其底部
5. 设定YellowView的 Bottom_toTopOf=”@id/red”、constraintHeight_percent=”0.2” 获得屏幕20%高度，并且贴近Red顶部
6. 设定BlueView的 Top_toTopOf=”parent”、Bottom_toTopOf=”@id/yellow” 来填充剩余空间

然后通过LinearLayout来处理Fix

1. 设定 LinearLayout 的 orientation=”horizontal” 来获取水平布局
2. 依次间隔排列四个 space 元素 和 3个 view 元素
3. 设定每个view元素的 layout_gravity=”center” 使其在 vertical 方向居中
4. 设定每个view元素的宽高为固定大小
5. 设定每个space元素的 layout_width=”0dp”、layout_height=”0dp”使其宽高均可自适应
6. 设定每个space元素的 layout_weight=”1” 代表其布局权重为1
7. 所有7个元素的权重排列为 1 0 1 0 1 0 1
8. 由于view有固定宽高，当RedView的宽度减去三个固定的Fix宽度后，剩余宽度按权重分配给space元素
9. 每个 space 获得的宽度为 1/(1+0+1+0+1+0+1) = 1/4

然后通过LinearLayout来处理 Stretch

1. 设定 LinearLayout 的 orientation=”horizontal” 来获取水平布局
2. 依次间隔排列四个 space 元素 和 3个 view 元素
3. 设定每个 space 的 layout_width=”10dp”、layout_height=”0dp” 来固定宽度和高度自适应
4. 设定每个 view 的 layout_weight=”1” 来获得剩余宽度的分配权重
5. 设定每个 view 的 layout_width=”match_parent”、layout_height=”match_parent” 来尽量拉伸
6. 设定每个 view 的 margin-top 和 margin-bottom 为10dp获取上下间距
7. 所有7个元素的权重排列为 0 1 0 1 0 1 0
8. 由于 space 有固定宽度， 当 YellowView宽度减去四个space的宽度后，剩余宽度按权重分配
9. 每个 view 获得的宽度为 1/（0+1+0+1+0+1+0）= 1/3

最后处理图片元素，图片元素布局推荐使用 ConstraintLayout ，这里使用 RelativeLayout 来对比两者区别

1. 设定 image 元素 layout_centerInParent=”true” 来达到居中效果
2. 和 ConstraintLayout 区别在于，无法使用百分比约束宽高

Web

细节特点

FlexLayout拉伸权重公式 Weight × MAX(Parent, (Parent - Constant))/SumWeight

和 Android、iOS 不同， Web 主页面 Scroll 因为可以无限滚动不存在屏幕尺寸边界，所以使用 100vh（Visual Height） 来限制高度，vh代表可视区域

在间距问题上，不同于 iOS 和 Android， FlexLayout 有CSS属性 justify-content: space-evenly 可以专门来处理间距

FlexLayout 和 AndroidLinearLayout 都存在权重的概念，但是有细微的差别

基本界面思路

1. 设定一个 Container Div 的Height等于100vh（100 Visual Height）
2. 如果没有 Container Div 无法获取到屏幕下边缘，因为Web页面是可以无限延展的（除非使用Float）
3. Red、Yellow、Blue 三个呈上下排列，所以应该使用 flex-direction: column
4. 由于 flex-direction: column Red、Yellow、Blue 的 flex 约束的是 height

flex布局的难点在于理解权重的作用，权重分为拉伸权重（grow）和缩小权重（shrink），使用 flex: grow shrink number 来表达

1. 设置 Red 的 flex: 0 1 100px 代表grow = 0 不能拉伸，shrink = 1 缩小权重为1， 固定 100px 的 height
2. 设置 Yellow 的 flex: 0 1 20vh 代表不能拉伸，缩小权重为1，固定20%可视屏幕宽度的高
3. 设置 Blue 的 flex: 1 1 auto 代表拉伸权重为1 缩小权重为1 高度auto
4. 由于grow权重的分配 R:Y:B = 0:0:1 就代表 Red、Yellow不会改变大小，而Blue占剩余空间的 1/(0+0+1) = 1
5. 由于shrink权重的分配 R:Y:B = 1:1:1 就代表 Red、Yellow、Blue各占剩余空间（也是总空间）的 1/(1+1+1) = 1/3

从R、Y、B的权重分析我们可以看到，在某个 display:flex 的布局中，布局的思路就是

1. 整个flex的总空间 - 固定空间 = 剩余空间
2. 在剩余空间有冗余的时候，按照权重来放大和缩小
3. 如果想固定长度，就把权重设置为 0

完成了Red、Yellow、Blue的布局后，接下来开始处理 Fix

1. 为了完成Fix的效果，需要RedView属性和子元素Fix属性 互相配合
2. 设置RedView的 display: flex ，其默认 flex-direction 为 row
3. 当RedView的 flex-direction=row 时, 其 cross-axis 即为 column 方向
4. 设置RedView的 align-items: center 保持内部子元素在cross-axis为水平
5. 设置RedView的 justify-content: space-evenly 来控制子元素间距
6. 设置子元素class fix的 width: 80px height 80px 来保持固定大小

接下来开始处理Stretch属性

1. 为了完成Stretch的效果，需要YellowView属性和子元素Stretch属性互相配合
2. 设置YellowView的 display: flex ，其默认 flex-direction 为 row
3. 设置子元素Stretch的属性 flex: 1 1 auto 代表拉伸缩小权重均为1 宽度自适应
4. 设置子元素Stretch的属性 height: auto 代表高度也自适应
5. 根据flex权重分配，三个Stretch的均占用 1/(1+1+1) = 1/3的row向mian-axis空间
6. 调整不同位置Stretch的margin，来达到固定间距10px的效果

最后对图片的位置进行处理

1. 为了完成图片居中并且正方形的效果，需要BlueView和图片子元素互相配合
2. 设置BlueView的 display: flex
3. 设置BlueView的 align-items: center; justify-content: center; 达到居中效果
4. 使用百分比设置图片 width: 50% 来使用 BlueView 一半的宽度
5. 使用 object-fit: cover 来使图片达到正方形Square的效果

显示可以用于签名的证书

fastlane 列出这个指令来输出所有可以用于签名的证书，参数的解释

• -v: 输出有效的签名
• -p: 输出的策略policy 用于签名 codesigning

1

xcrun security find-identity -v -p codesigning

输出这个证书的详细信息

但是这个指令看不到证书的详细信息，我们可以通过另外一个指令 find-certificate 摘出

• -a: 全部的证书
• -c: 过滤关键词 iPhone
• -p: 以pem格式输出

1

xcrun security find-certificate -a -c "iPhone" -p | openssl x509 -text | grep "Subject:"

因为输出的是pem格式，可以通过 openssl 转化为可读的text，然后摘取出 Subject: 的内容

1

Subject: UID=LURE22***, CN=iPhone Developer: **** li (NMJ****R), OU=XAU86******, O=****** , C=US

使用KeyChain找到这个证书可以看到 UID = User ID, CN = Common Name, OU = Organizational Unit, O = Organization, C = Country or Region

自动补全Framework的头文件

写OC的Framework的时候最尴尬的就是要整理所有的头文件到 Umbrella-Header 里

这里脚本来帮忙自动添加，只需要加入到 Build Phase 里就行了

1. UMBRELLA_FILE: 哪个文件是Umbrella-Header，默认是Target的同名头文件
2. PROJECT_FILE: 工程文件在哪，需要去project里查询哪些头文件Public

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# TARGETNAME="AutoHeader"
# UMBRELLA_FILE="..../AutoHeader/AutoHeader.h"
# PROJECT_FILE="..../AutoHeader/AutoHeader.xcodeproj/project.pbxproj"

UMBRELLA_FILE="$SOURCE_ROOT/$TARGETNAME/$TARGETNAME.h"
PROJECT_FILE="$PROJECT_FILE_PATH/project.pbxproj"

# Remove exist #import
grep -v "#import<$TARGETNAME" "$UMBRELLA_FILE" > "$UMBRELLA_FILE.backup"

# Extract public headers
# Find public
grep -E "ATTRIBUTES = \(.*Public," $PROJECT_FILE | \ 
# Take out file name
grep -oE "\/\* .* in Headers \*\/" | \
# Replace with #import<>
sed "s/\/\* /#import<$TARGETNAME\//; s/ in Headers \*\//>/" | \
# Remove umbrella self
grep -v "$TARGETNAME/$TARGETNAME.h" \
>> "$UMBRELLA_FILE.backup"

# Replace umbrella header
mv "$UMBRELLA_FILE.backup" "$UMBRELLA_FILE"

本文使用 /etc/hosts 大家都有的Host文件作例子，具体指令的参数可以使用 man 来查看

grep取行号

比如想取到 “127.0.0.1 localhost” 在文件的第几行

1

grep -Fn "127.0.0.1" /etc/hosts | cut -d ":" -f1 | head -n 1

grep过滤和反向过滤

通常用于处理日志，过滤包含localhost的行

1

grep "localhost" /etc/hosts

反向过滤

1

grep -v "localhost" /etc/hosts

本文使用 /etc/hosts 大家都有的Host文件作例子，具体指令的参数可以使用 man 来查看

sed替换和删减

文件中存在多个localhost，想把 “localhost” 替换成 “localhost2”

1

sed "s/localhost/localhost2/" /etc/hosts

想删除 “127.0.0.1 localhost” 中的IP地址，代表从以127.0.0.1开头的行的，127.0.0.1的部分替换成空

1

sed -E "s/^127.0.0.1//" /etc/hosts

删除domain部分

1

sed -E "s/localhost$//" /etc/hosts

指定sed的作用范围

在替换localhost的时候，会误伤 ::1 localhost的部分，可以通过限定 address来避免

通过行号指定地址，只作用于第七行

1

sed -E "7,7s/localhost//1" /etc/hosts

通过内容来限定

1

sed -E "/^127.0/,/^255.255/s/localhost//1" /etc/hosts

sed连续执行命令

想先把 “127.0.0.1 localhost” 中localhost替换成 other localhost ，然后把 other local 替换成 net

因为第二部需要第一步的结果，可以通过sed连续指令,连续指令用分号分割

1

sed -E "7,7s/localhost$/other localhost/;s/other local/net/" /etc/hosts

关闭Terminal为什么会中断

根据IBM科普文章任何一个Terminal窗口连接上服务器都会存在一个进程(Process)，并且存在一个会话（Session）在此线程下

可以使用ps -f 查看, 其中f参数的意思为打印出 PID(Process ID), PPID(Parent Process ID)

1

-f      Display the uid, pid, parent pid, recent CPU usage, process start time, controlling tty......

那么如果关闭Terminal或者网络链接断开，会有一个SIGHUP信号发送到该线程，让此PID下的所有任务中止

什么是SIGHUP信号

SIGHUP信号是众多POSIX信号的一个, 像程序Crash时常见的两个信号 SIGABRT （”abort”, abnormal termination.） 和 SIGSEGV （ “segmentation violation”, invalid memory access.） 都属于同类

1
2

hangup 名称的来由
在 Unix 的早期版本中，每个终端都会通过 modem 和系统通讯。当用户 logout 时，modem 就会挂断（hang up）电话。 同理，当 modem 断开连接时，就会给终端发送 hangup 信号来通知其关闭所有子进程。

如何躲避Hang Up（HUP）信号

躲避SIGHUP一般分为两个策略

1. 直接屏蔽SIGHUP信号，使用nohup命令
2. 让某个命令运行在另外一个PID下，使用setsid命令,或者直接使用 (shell &)

1
2
3
4

nohup - run a command immune to hangups, with output to a non-tty

setsid - run a program in a new session

使用nohup指令的要点

1. 命令的stdout会默认存在 nohup.out 中, 也可以重定向到其他文件
2. nohup本身只是中断信号，并不会让出当前termianl的stdin，所以要在结尾加入 &

1
2
3

nohup ping www.ibm.com &

使用setsid指令的要点

使用setsid可以让命令运行在另外一个进程里，或通过()可以让某些命令直接运行在子进程立，作用和setsid是一样的

1
2
3
4
5

setsid ping www.ibm.com

(ping www.ibm.com &)

可以通过ps指令查看 pid 和 ppid 之间的关系

1
2
3
4
5

ps -ef |grep www.ibm.com
#UID      PID    PPID   C STIME   TTY           TIME CMD
#root     31094     1  0 07:28 ?        00:00:00 ping www.ibm.com
#root     31102 29217  0 07:29 pts/4    00:00:00 grep www.ibm.com

如果处理已经开始执行的命令

如果一个指令已经开始运行，无法使用 nohup 和 setsid 来躲避SIGHUP信号，需要使用另外一个指令 disown

1. 用disown -h jobspec来使某个作业忽略HUP信号
2. 用disown -rh 来使正在运行的作业忽略HUP信号

还需要使用到组合命令包括

1. CTRL+Z ： 挂起（Suspend）就是临时暂停当前stdout中在执行的任务
2. jobs ： 查看当前有哪些任务在运行
3. bg ： 把某个任务放入后台，但是并没有对SIGHUP进行处理
4. %1 ： jobspec 任务描述符，用来指定任务

那么我们可以通过以上指令的组合，来达到让某个任务躲开SIGHUP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 执行一个任务
ping www.ibm.com > log.txt

# 挂起任务 CTRL+Z
^z
[1]+  Stopped                 ping www.ibm.com > log.txt

# 一般来讲挂起任务会直接看到 jobspec, 也可以再次查询
jobs

# 让某个 jobspec 躲避 SIGHUP
disown -h %1

# 放入后台继续执行
bg %1

# 再次执行 jobs 可以看到状态从 Stopped 变成 Running
jobs
[1]+  Running                 ping www.ibm.com > log.txt &

一劳永逸使用screen命令产生虚拟终端

Screen命令可以创建一个虚拟终端，相当于不用重新链接再开一个终端了，需要用到遗下四个指令

1. screen -dmS name ：创建一个虚拟终端。
2. screen -list ： 来列出所有会话。
3. screen -r name ： 来重新连接（Attach）指定会话。
4. CTRL+A D ： 组合快捷键从虚拟终端暂时断开(Detach)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 创建一个test的虚拟终端
screen -dmS test

# 查看创建的终端
screen -list 

# 重新链接进入创建的终端
screen -r test

# 执行指令
ping www.ibm.com

# 使用快捷键CTRL+A D 暂时Detach当前终端, A D 依次按下
^A D

# 再次查看终端
screen -list 

从第一个指令参数 -dmS 代表以下三个含义

1
2
3
4
5
6

# -d 从创建的Terminal detach出来
-d Detach the elsewhere running screen 
# -m 创建一个新的session
-m ignore $STY variable, do create a new screen session.
# -S 使用组合 PID.name 代替默认的名称
-S Name this session <pid>.sockname instead of <pid>.<tty>.<host>.

内置函数介绍

除了使用Sed操作字符串之外，还可以使用内置函数来操作字符串

1. exper: 除了可以用来操作字符串，还可以用来做数据运算
2. ${}符号: 主要是用来操作字符串

字符串长度

1
2
3
4
5
6

string=abcABC123ABCabc
# 此处是小括号
echo $(expr length $string)
# 此处是中括号
echo ${#string}

字符串删减

字符串删减可以直接使用内置函数

${string#$substring}

需要考虑两个维度

1. 从start/end哪个进行删除，#代表start，%代表end
2. 删除最长/最短匹配，#、%代表最短， ## %%代表最长

需要注意其中substring使用的不是正则表达式，而是字符串匹配

1
2
3
4
5
6
7
8
9
10
11

string=abcABC123ABCabc
#删除左边的 abcABC
echo ${string#a*C}
#删除左边的 abcABC123ABC
echo ${string##a*C}

#删除右边的 ABCabc
echo ${string%A*c}
#删除右边的 ABC123ABCabc
echo ${string%%A*c}

字符串替换

内置函数还提供了类似sed的替换功能，也要考虑两点

1. 单次/全部替换
2. 从前开始替换还是从后开始替换

${string/string/substring}

1
2
3
4
5
6
7
8
9
10

string=abcABC123ABCabc

#替换abc为XYZ
echo ${string/abc/XYZ}
#替换全部abc
echo ${string//abc/XYZ}
#从start开始替换
echo ${string/#abc/XYZ}
#从end开始替换
echo ${string/%abc/XYZ}

字符串提取

使用表达式 ${string:position:offset} 进行提取，注意两点

1. offset可以省略，代表提取到末尾
2. position为负时需要加括号或者空格，进行反向提取

1
2
3
4
5
6
7
8
9
10
11

string=abcABC123ABCabc

# 左边提取 BC123ABCabc
echo ${string:4}
# 右边提取 Cabc
echo ${string:(-4)}
echo ${string: -4}

# 偏移提取 123
echo ${#string:6:3}

第二种方式是使用expr进行提取，可以用postion也可以用正则来

1. expr substr $string $postion $length
2. expr match $string “($regex)“

注意当使用match的时候，需要满足三点：加双引号、转义小括号、使用正则，其中如果使用另外一种表达, 则代表从end of string 进行提取，一般是右边

**expr match $string “.*()“ **

也可以使用分号来代替 match 命令 expr $string : “($regex)“

1
2
3
4
5
6
7
8
9
10
11

string=abcABC123ABCabc
#左边提取abc
expr substr $string 1 6
expr match $string "\([a-Z]*\)"
expr $string : "\([a-Z]*\)"

#右边提取abc
expr substr $string 10 6
expr match $string ".*\([a-Z]\{6\}\)"
expr $string : ".*\([a-Z]\{6\}\)"

资料来源

参考的说明有英文文档、菜鸟、CSDN博客

算数运算符

根据StackOverflow的回答可以使用算数运算符 (( )) 来执行算术逻辑

1
2
3
4
5

count=0
echo $count

(( $count+1 ))
echo $count

let指令

除了算数运算符，还可以使用内置指令let进行更直接的算数运算, 和算数预算符不同，let内部不需要dollar取值符号

1
2
3
4
5

count=0
echo $count

let count+1
echo $count

expr指令

GNU还有内置函数expr也可以用来进行数学运算，但是要注意的是expr数学运算符号左右要有空格，并且要转译星号来进行乘法

1
2
3
4
5
6

a=10
b=5
//expr $a+$b //错误！！会输出10+5
expr $a + $b //15
expr $a \* $b //50
expr $a / $b //2

综合使用

一个简单的十秒倒计时

1
2
3
4
5
6
7
8

count=10
echo "Count down 10 second for prepare database...\n\n"
while (( $count>0 ))
do
    sleep 1 && echo $count && let "count--"
    
done

获取bash的返回值

存在两种方式

1. dollar符号+括号
2. Backtick符号：注意不是单引号，是ESC按键下边那个

1
2
3
4

value1=$(echo hello)
value2=`echo hello`

两者没有区别

获得当前运行结果的返回值

可以使用 dollar符号+问号 来获得当前最后一个命令的返回值，从而判断是否执行成功,通常0代表没有错误

1
2
3

echo $?
cd not_exist_directory
echo $?

可以得到输出

1
2
3

0
bash: cd: not_exist_directory: No such file or directory
1

read 函数

自带函数read可以获取stdin输入，注意以下两点

1. 仅仅获取一个变量时，不会解析空格
2. 一次性获取多个时，除了最后一个以外，会以空格做分隔

使用 this is a car 作为keyboard input

1
2
3
4
5
6
7
8
9
10

# 获取一个
read car
echo $car # this is a car

# 获取多个，最后一个不会以空格分隔
read car1 car2 car3
echo $car1 # this
echo $car2 # is
echo $car3 # a car