欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入解析iOS應(yīng)用開(kāi)發(fā)中九宮格視圖布局的相關(guān)計(jì)算方法

 更新時(shí)間：2016年03月10日 09:30:57   作者：ForeverYoung21  
這篇文章主要介紹了iOS應(yīng)用開(kāi)發(fā)中九宮格視圖布局的計(jì)算方法,包括item尺寸和坐標(biāo)等一系列影像布局的數(shù)值相關(guān)計(jì)算的講解,需要的朋友可以參考下

來(lái)看一個(gè)簡(jiǎn)單的例子：

復(fù)制代碼 代碼如下:

/*
 * 總列數(shù)
 */
NSUInteger totalloc = 3;

/*
 * View的寬高
 */
CGFloat shopW = 80;
CGFloat shopH = 100;

/*
 * 每個(gè)View之間的間隔
 */
CGFloat margin = (self.view.frame.size.width - totalloc * shopW) / (totalloc + 1);

/*
 * View的總個(gè)數(shù)
 */
NSUInteger count = 12;

/*
 *  根據(jù)總個(gè)數(shù)使用總列數(shù)來(lái)除和取余獲取對(duì)應(yīng)的行和列
 */
NSUInteger loc = count / totalloc;
NSUInteger row = count % totalloc;

/*
 * View的X和Y
 */
CGFloat shopX = margin + (margin + shopW) * row;
CGFloat shopY = margin + (margin + shopH) * loc;


/*
 * 創(chuàng)建自定義View，設(shè)置背景顏色，添加到界面上去
 */
 UIView *shopV = [[UIView alloc] initWithFrame:CGRectMake(shopX, shopY, shopW, shopH)];
 shopV.backgroundColor = [UIColor lightGrayColor];
 [self.shopView addSubview:shopV];

/*
 *  創(chuàng)建UIImageView用于放置圖片，設(shè)置frame然后加到自定義的View上面
 */
 UIImageView *imageV = [[UIImageView alloc] init];
 imageV.frame = CGRectMake(0, 0, 80, 80);
 [shopV addSubview:imageV];

/*
 *  創(chuàng)建UILabel用于放置顯示文字，設(shè)置frame然后加到自定義的View上面
 */
 UILabel *l = [[UILabel alloc] init];
 l.frame = CGRectMake(0, 80, 80, 20);
 l.textAlignment = NSTextAlignmentCenter;
 [shopV addSubview:l];


201631092901907.jpg (473×427)

根據(jù)例子可以看出設(shè)置九宮格的幾個(gè)要點(diǎn)步驟，下面我們?cè)龠M(jìn)一步深入探究尺寸和坐標(biāo)方面的相關(guān)計(jì)算。比如現(xiàn)在我們有一個(gè)UIView，和一個(gè)button，當(dāng)點(diǎn)擊button的時(shí)候，我們希望能在這個(gè)view上以九宮格的形式添加它的子view。
這里主要是記錄一下實(shí)現(xiàn)的思路，以后類似的問(wèn)題都可以這樣思考。

201631092503014.png (600×390)

如圖，我們首先要計(jì)算的應(yīng)該是horizalSpacing 和 verticalSpacing，因?yàn)槟玫剿鼈儾趴梢杂?jì)算坐標(biāo)值。

很明顯這個(gè)容器view的大小是固定的，每一個(gè)子view的大小也是固定的，所以可以拿到horizalSpacing和verticalSpacing的值，并且是通過(guò)動(dòng)態(tài)計(jì)算，因?yàn)檫@樣才能保證，當(dāng)容器view或者子view的大小改變時(shí)，計(jì)算出的間距仍然是等大的。

這里首先要定義需要用到的常量：

復(fù)制代碼 代碼如下:

#define ITEM_WIDTH 80.0
#define ITEM_HEIGHT 80.0
#define COLS_COUNT 3
#define ROWS_COUNT 3

當(dāng)點(diǎn)擊button的時(shí)候，會(huì)觸發(fā)addItemView的方法，就在這個(gè)方法里面計(jì)算水平和垂直間距：
復(fù)制代碼 代碼如下:

- (IBAction)addItemView
{
    CGFloat horizalSpacing = (self.bigView.bounds.size.width - COLS_COUNT * ITEM_WIDTH) / (COLS_COUNT - 1);
    CGFloat verticalSpacing = (self.bigView.bounds.size.height - ROWS_COUNT * ITEM_HEIGHT) / (ROWS_COUNT - 1);
}

以horizalSpacing為例：

首先拿到容器view的總寬度：self.bigView.bounds.size.width

因?yàn)橐恍杏腥齻€(gè)item，每個(gè)item的寬度已知，所以可以計(jì)算出三個(gè)item占據(jù)的寬度：COLS_COUNT * ITEM_WIDTH

用總寬度減去三個(gè)item占據(jù)的寬度，剩下的空間就是總間距。

因?yàn)槊恳恍杏腥齻€(gè)item，那么就會(huì)產(chǎn)生兩個(gè)間距。同理，一行有n個(gè)item，那么就會(huì)產(chǎn)生n-1個(gè)間距。

有了總間距，知道了共有多少個(gè)間距，那么每個(gè)間距占據(jù)多少就可以求出來(lái)，所以求出了horizalSpacing。

verticalSpacing同理。

有了水平和垂直item間的間距，我們就可以計(jì)算item的坐標(biāo)：

第一個(gè)item: X1 = (ITEM_WIDTH + horizalSpacing) * 0, Y1 = 0
第二個(gè)item: X2 = (ITEM_WIDTH + horizalSpacing) * 1, Y1 = 0
第三個(gè)item: X3 = (ITEM_WIDTH + horizalSpacing) * 2, Y1 = 0

第四個(gè)item: X1 = (ITEM_WIDTH + horizalSpacing) * 0, Y2 = (ITEM_HEIGHT + verticalSpacing) * 1
第五個(gè)item: X2 = (ITEM_WIDTH + horizalSpacing) * 1, Y2 = (ITEM_HEIGHT + verticalSpacing) * 1
第六個(gè)item: X3 = (ITEM_WIDTH + horizalSpacing) * 2, Y2 = (ITEM_HEIGHT + verticalSpacing) * 1

...
可以看到，x和y坐標(biāo)都是有規(guī)律的：

x坐標(biāo)是通過(guò)

 (ITEM_WIDTH + horizalSpacing) * index // 這里的index就是圖中item的編號(hào)
但是當(dāng)?shù)降谒膫€(gè)item的時(shí)候，又需要重復(fù)新一輪的index的值。

復(fù)制代碼 代碼如下:

0 % 3 = 0, 1 % 3 = 1, 2 % 3 = 2
3 % 3 = 0, 4 % 3 = 1, 5 % 3 = 2
6 % 3 = 0, 7 % 3 = 1, 8 % 3 = 2

可以看到，是和上面進(jìn)行的模運(yùn)算是一個(gè)規(guī)律，所以我們就可以將代碼寫成這樣來(lái)計(jì)算x的值：
復(fù)制代碼 代碼如下:

- (IBAction)addItemView
{
      NSUInteger index = self.bigView.subviews.count; // 新增

    CGFloat horizalSpacing = (self.bigView.bounds.size.width - COLS_COUNT * ITEM_WIDTH) / (COLS_COUNT - 1);
    CGFloat verticalSpacing = (self.bigView.bounds.size.height - ROWS_COUNT * ITEM_HEIGHT) / (ROWS_COUNT - 1);

      CGFloat x = (ITEM_WIDTH + horizalSpacing) * (index % COLS_COUNT); // 新增
}


在這里計(jì)算index并沒(méi)有采用單獨(dú)定義一個(gè)計(jì)數(shù)器，每次點(diǎn)擊后計(jì)數(shù)器加1這種方式，而是通過(guò)計(jì)算容器view的子view的個(gè)數(shù)。很明顯，第一次點(diǎn)擊前index = 0。（之后會(huì)定義view然后加到bigView中，這時(shí)bigView的子view就會(huì)+1了。）

同理，y值可以采用同樣的方法計(jì)算，不過(guò)要注意并非是進(jìn)行取模計(jì)算，而是通過(guò)除法。（看一下每個(gè)item的序號(hào)并且和規(guī)律對(duì)應(yīng)上，就會(huì)發(fā)現(xiàn)是用除法。）

復(fù)制代碼 代碼如下:

- (IBAction)addItemView
{
      NSUInteger index = self.bigView.subviews.count;

    CGFloat horizalSpacing = (self.bigView.bounds.size.width - COLS_COUNT * ITEM_WIDTH) / (COLS_COUNT - 1);
    CGFloat verticalSpacing = (self.bigView.bounds.size.height - ROWS_COUNT * ITEM_HEIGHT) / (ROWS_COUNT - 1);

      CGFloat x = (ITEM_WIDTH + horizalSpacing) * (index % COLS_COUNT);
    CGFloat y = (ITEM_HEIGHT + verticalSpacing) * (index / COLS_COUNT); // 新增
}


拿到每次view的坐標(biāo)，并且已知大小，就可以完成了。

復(fù)制代碼 代碼如下:

- (IBAction)addItemView
{
      NSUInteger index = self.bigView.subviews.count;

    CGFloat horizalSpacing = (self.bigView.bounds.size.width - COLS_COUNT * ITEM_WIDTH) / (COLS_COUNT - 1);
    CGFloat verticalSpacing = (self.bigView.bounds.size.height - ROWS_COUNT * ITEM_HEIGHT) / (ROWS_COUNT - 1);

      CGFloat x = (ITEM_WIDTH + horizalSpacing) * (index % COLS_COUNT);
    CGFloat y = (ITEM_HEIGHT + verticalSpacing) * (index / COLS_COUNT);

    UIView *item = [[UIView alloc] initWithFrame:CGRectMake(x, y, ITEM_WIDTH, ITEM_HEIGHT)]; // 新增
    item.backgroundColor = [UIColor redColor];  // 新增
    [self.bigView addSubview:item];  // 新增
}


不僅僅是九宮格，無(wú)論改變item的大小還是bigView的大小，或者改變每一行每一列的item個(gè)數(shù)，都可以很好的計(jì)算出每個(gè)item合適的大小和位置。

相關(guān)文章

最新評(píng)論