OC中的布局-九宫格

原创
2016/05/03 16:15
阅读数 375

上班忙完之后稍得空闲,回想下一些OC技术,就做一下九宫格的布局与位置计算,想到哪里就写到哪喽。

关于九宫格的应用代码请点此

第一:先上一张手画版的九宫格

第二:先预先来一些变量:每一个小格width=80,height:90,x轴上的两个小格之间的间距为xMargin,那么y轴的就是yMargin,假设一行可以布局m个小格(不只是图片上的画的那样,只是个例子).mainstoryboard中有多少小格变量

为counts

xMargin=(self.fram.size.width-width*m)/(m-1);//不理解的话可以套用上面一行三格的,加深理解
yMargin自己给值就好
//接下来我们要判断,所加的小格是在第几行,第几列就可以(这个很关键)
counts=self.view.subViews.count;


//注意一点:九宫格的第一行是0行,第一列是0列(方便理解下面行列的计算)

//第几行
row=counts/m;
//当一行有三列时,那么当mainstoryboard上没有控件时counts=0,那么就是第0行
//那么添加的小格的行y轴位置就是 0*(height+yMargin)

//第几列的
//由余数来判断是第几列的
col=counts%m;
//那么当mainstoryboard上没有控件时counts=0,那么就是第0列
//那么列的x轴位置就是 0*(width+xMargin)

//当counts=4时,即mainstoryboard上已有4个格子,那么第五个位置在哪里?
//row=4/3=1   col=4%3=1  
//由上可知,即 第一行的第一列(也就是九宫格三行三列最中间那个位置)
//那么x轴    (列)1*(width+xMargin)   y轴   (行)1*(height+yMargin)

第三:九个小格布局在mainstoryboard上,

展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部