UIButton 九宮格

我們?cè)陧?xiàng)目中經(jīng)常看見這樣的效果
我們第一印象是個(gè)UICollectionView 可是是否發(fā)現(xiàn)這個(gè)不需要去創(chuàng)建一個(gè)UICollectionView

2406962-871d3d5a8a8897ee.png

我們只需要六個(gè)按鈕就可以了平挑,當(dāng)然 如果很多的話,也是一樣的我們只需要改變個(gè)數(shù)就可以了
廢話不多說 直接上代碼

小弟為了給大家方便理解癞志,給大家每一行都加了注釋

![Uploading 2406962-d7d7867e64c1596b_785170.png . . .]

給大家看一下效果圖

2406962-f1038f255573e980.png

如果你不是需要8個(gè)按鈕锣笨,而是需要9個(gè) 只需要改一下個(gè)數(shù)就可以了,是不是很方便菲驴。

同時(shí)荐吵,如果你需要改變每個(gè)按鈕的大小,直接改變那個(gè)寬:W 高:W的值就可以了赊瞬。
這里涉及到一個(gè)自定義按鈕先煎,我就下篇文章告訴大家吧,這個(gè)其實(shí)也很簡單巧涧,為了大家方便薯蝎,快速的使用起來,我給大家上代碼谤绳,可以直接復(fù)制過去使用

int totalColumns = 4; // 每行放多少個(gè)

//按鈕的寬

CGFloat W = 80;

//按鈕的高

CGFloat H = W;

//按鈕之間的間隔 同時(shí)也是按鈕距離左右屏幕的間隔

CGFloat margin = (self.view.frame.size.width - totalColumns*W)/(totalColumns + 1);

//總數(shù)是多少個(gè)

NSInteger number = 8;

//循環(huán)創(chuàng)建按鈕

for (int i = 0; i < number; i++)

{

//自定義按鈕

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

//決定在哪一行

int row = i /totalColumns;

//決定在哪一列

int col = i %totalColumns;

//按鈕的背景顏色

button.backgroundColor = [UIColor redColor];

//給按鈕設(shè)圖片

[button setImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];

//每個(gè)按鈕的X值

CGFloat X = margin + col *(W + margin);

//每個(gè)按鈕的Y值

CGFloat Y = 20 + row*(H + margin);

//按鈕尺寸大小和位置

button.frame = CGRectMake(X, Y, W, H);

//每個(gè)按鈕添加到父控件上

[self.view addSubview:button];

}
                 還有需求是這樣的

當(dāng)然如果你需要讓他們左右兩邊沒有邊距占锯,但是中間所有的按鈕都有邊距袒哥,然后文字在圖片的下面,我們知道系統(tǒng)提供的按鈕設(shè)置圖片和文字的話消略,圖片在左邊堡称,文字會(huì)在圖片 所以我們需要自定義按鈕 右邊看效果圖

2406962-2a363eecb0ba1f71.png

同樣直接給大家上代碼哈

2406962-bf1822e0a60d04ff.png

這里涉及到一個(gè)自定義按鈕,我就下篇文章告訴大家吧艺演,這個(gè)其實(shí)也很簡單粮呢,為了大家方便,快速的使用起來钞艇,我給大家上代碼啄寡,可以直接復(fù)制過去使用


// 每行放多少個(gè)

int totalColumns = 3;

//每個(gè)按鈕的寬

CGFloat W = WIDTH/3;

//每個(gè)按鈕的高

CGFloat H = W;

//總數(shù)是多少個(gè)

int number = 12;

//創(chuàng)建按鈕

for (int i = 0; i < number; i++)

{

//自定義按鈕

CustomButton *button = [CustomButton buttonWithType:UIButtonTypeCustom];

//按鈕所在哪一行

int row = i / totalColumns;//行

//按鈕所在哪一列

int col = i % totalColumns;//列

//按鈕設(shè)置圖片

[button setImage:[UIImage imageNamed:@"1.jpg"] forState:UIControlStateNormal];

//按鈕設(shè)置文字

[button setTitle:@"你好" forState:UIControlStateNormal];

//按鈕的X

CGFloat X = col * (W + 1);

//按鈕的Y

CGFloat Y = row * (H + 1);

//按鈕的尺寸位置

button.frame = CGRectMake(X, Y, W, H);

//添加都父控件

[self.view addSubview:button];

}

最后給大家看一下思路,直接看圖哩照,基本就懂了

652450-8f1263b54aa822b3.png.jpeg

備注:

如果有不足或者錯(cuò)誤的地方還望各位讀者批評(píng)指正挺物,可以評(píng)論留言,筆者收到后第一時(shí)間回復(fù)飘弧。

QQ/微信:2366889552 /lan2018yingwei识藤。

簡書號(hào):凡塵一笑:[簡書]

http://www.reibang.com/users/0158007b8d17/latest_articles

感謝各位觀眾老爺?shù)拈喿x,如果覺得筆者寫的還湊合次伶,可以關(guān)注或收藏一下痴昧,不定期分享一些好玩的實(shí)用的demo給大家。

文/凡塵一笑(簡書作者)

原文鏈接: http://www.reibang.com/p/8ae080edb3ea

著作權(quán)歸作者所有冠王,轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)赶撰,并標(biāo)注“簡書作者”。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末柱彻,一起剝皮案震驚了整個(gè)濱河市豪娜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哟楷,老刑警劉巖瘤载,帶你破解...
    沈念sama閱讀 221,576評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異卖擅,居然都是意外死亡鸣奔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門惩阶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挎狸,“玉大人,你說我怎么就攤上這事琳猫∥芭眩” “怎么了?”我有些...
    開封第一講書人閱讀 168,017評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵脐嫂,是天一觀的道長统刮。 經(jīng)常有香客問我,道長账千,這世上最難降的妖魔是什么侥蒙? 我笑而不...
    開封第一講書人閱讀 59,626評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮匀奏,結(jié)果婚禮上鞭衩,老公的妹妹穿的比我還像新娘。我一直安慰自己娃善,他們只是感情好论衍,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,625評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著聚磺,像睡著了一般坯台。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瘫寝,一...
    開封第一講書人閱讀 52,255評(píng)論 1 308
  • 那天蜒蕾,我揣著相機(jī)與錄音,去河邊找鬼焕阿。 笑死咪啡,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的暮屡。 我是一名探鬼主播撤摸,決...
    沈念sama閱讀 40,825評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼褒纲!你這毒婦竟也來了愁溜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,729評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤外厂,失蹤者是張志新(化名)和其女友劉穎冕象,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體汁蝶,經(jīng)...
    沈念sama閱讀 46,271評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡渐扮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,363評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了掖棉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片墓律。...
    茶點(diǎn)故事閱讀 40,498評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖幔亥,靈堂內(nèi)的尸體忽然破棺而出耻讽,到底是詐尸還是另有隱情,我是刑警寧澤帕棉,帶...
    沈念sama閱讀 36,183評(píng)論 5 350
  • 正文 年R本政府宣布针肥,位于F島的核電站饼记,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏慰枕。R本人自食惡果不足惜具则,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,867評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望具帮。 院中可真熱鬧博肋,春花似錦、人聲如沸蜂厅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽掘猿。三九已至病游,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間术奖,已是汗流浹背礁遵。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留采记,地道東北人佣耐。 一個(gè)月前我還...
    沈念sama閱讀 48,906評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像唧龄,于是被迫代替她去往敵國和親兼砖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,507評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫既棺、插件讽挟、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,119評(píng)論 4 61
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,283評(píng)論 25 707
  • Guess what is this? Do you know Tom and Jack? Tom in this!
    玥光下的貓閱讀 179評(píng)論 0 1
  • Bsndjdjnwvsjdjnsb
    isttl閱讀 207評(píng)論 0 0