實現的效果以下圖:bash
點擊入會門檻,按鈕打開後會彈出須要的貢獻值填寫欄,按鈕關閉時會隱藏填寫欄。佈局
開始看到頁面設計稿,頁面比較簡單,每一行都是一個label一個按鈕,因此先肯定用tablevView畫,且tablevView建立在controller裏便可,正常建立cell,很容易得出左邊圖的原始佈局頁面。ui
重點是:spa
1.對按鈕進行判斷,僅當入會門檻右邊的按鈕選中時纔會彈出輸入框。設計
2.cell的佈局變化。code
第二點對我來講會比較難和煩,cell高須要自適應,弄的時候也有踩坑。cdn
由於cell的最底部都是一條淺橫線,涉及到它們的狀態變化(顯示或者隱藏),因此最好建立它們的全局變量,能夠偷懶,直接blog
{
UIImageView *_line;
}
複製代碼
或者老老實實聲明屬性建立。事件
控件包含5個:string
1.左側label、
2.右側開關button、
3.小紅圓勾選button
4.初始頁每一個cell都有的底部橫線line、
5.輸入欄的底部橫線(這根線很重要,用來撐開自適應的佈局,即須要它肯定bottom)。
其中2.的初始狀態要設爲未選中;輸入欄的控件3.和4.和5.的初始狀態要設爲隱藏。
- (void)setLayout;
方法裏進行控件佈局:左側label和右側button和紅色勾選button正常寫佈局,重點是線:
每一個cell都有的底部橫線不能設置bottom,而輸入欄的底部橫線則須要設置相對bottom位置,用於肯定cell的底部在哪,撐開cell高度。
依然使用cell.index = indexPath.row;
傳每行cell的下標。
由於左側label數量比較少,就不建立dataArray來賦值了,直接在setIndex方法裏進行判斷賦值:
- (void)setIndex:(NSInteger)index{
_index = index;
if(index == 0){
self.leftTitle.text = @"入會驗證";
}else if(index == 1){
self.leftTitle.text = @"入會門檻";
}else if (index == 2){
self.leftTitle.text = @"不容許任何人入會";
}
}
複製代碼
按鈕的點擊事件方法裏,進行判斷,當爲入會門檻一行時,即index == 1
時,且按鈕爲選中狀態時,纔會彈出輸入欄。
實現點擊按鈕,選中和不選中狀態交替的語句爲: self.rightButton.selected = !self.rightButton.selected;
直接貼點擊事件的方法了吧:
- (void)buttonAction:(UIButton *)button{
self.rightButton.selected = !self.rightButton.selected;
if(button.tag == 1){
if(self.index == 0){
NSLog(@"驗證,開!");
}else if (self.index == 1){
NSLog(@"門檻,開!");
if(self.rightButton.selected == YES){
self.redDotButton.hidden = NO;
self.valueTextField.hidden = NO;
self.bline.hidden = NO;
[self.redDotButton mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.offset(49+15);
}];
}else{
self.redDotButton.hidden = YES;
self.valueTextField.hidden = YES;
self.bline.hidden = YES;
[self.redDotButton mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.offset(15);
}];
}
[self.subject sendNext:@"1"];
}else if (self.index == 2){
NSLog(@"允不容許");
}
}else if(button.tag == 2){
NSLog(@"貢獻值勾選按鈕常爲選中狀態");
}
}
複製代碼