iOS UI storyboard 图解教程

1. UIButton

1.1 禁用/启用

//禁用
self.mJoinChannelBtn.userInteractionEnabled = NO;
self.mJoinChannelBtn.alpha=0.4;
//启用
self.mJoinChannelBtn.userInteractionEnabled = YES;
self.mJoinChannelBtn.alpha = 1.0;

1.2 设置边角和框宽度

UIButton属性设置.png

layer.cornerRadius
layer.borderWidth

2. UIView

2.1 相对布局，宽高可变

相对布局.png

2.2 绝对布局，高不可变

绝对布局.png

图中的1、2 项为本试图的布局，3为和相邻试图的间距；
如果想要宽也不可变，则设置Width Equals 属性即可；

2.3 居中

居中.png

2.4 做分割线

设置 Height Equals 为 1，其他的属性相邻的试图的间距即可；
backgroud属性设置为 Light Gray Color;

3. UITextView

3.1 点击试图中除UITextView 外其他位置，隐藏键盘

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self.view endEditing:YES];
}

3.2 点击按钮时，隐藏键盘

[_mFadebackTextview resignFirstResponder];

3.3 开始输入文字时，隐藏默认的文字

3.3.1 布局

方法一：设置 InputView

[_mFadebackTextview setInputView:_mFadebackPlaceholdLabel];

方法二：直接在UITextView上面放置一个UILable，然后设置lable不可交互

UITextView布局.png

UILable布局.png

设置UILable不可交互.png

3.3.2 实现代理 UITextViewDelegate

#pragma mark - UITextViewDelegate
- (void)textViewDidChange:(UITextView *)textView
{
    if ([textView.text length] == 0)
    {
        [_mFadebackPlaceholdLabel setHidden:NO];
        _mFeedbackBtn.enabled = NO;
    }
    else
    {
        [_mFadebackPlaceholdLabel setHidden:YES];
        _mFeedbackBtn.enabled = YES;
        [_mFeedbackBtn setEnabled:YES];
    }
}

4. 弹出框

- (void)showAlertWithTitle:(NSString *)title message:(NSString *)message
{
    UIAlertController* alert = [UIAlertController alertControllerWithTitle:title
                                                                   message:message
                                                            preferredStyle:UIAlertControllerStyleAlert];
    
    UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault
                                                          handler:^(UIAlertAction * action) {}];
    
    [alert addAction:defaultAction];
    [self presentViewController:alert animated:YES completion:nil];
}

5. 在storyboard 中添加过个 tab项

操作步骤：

点击Tab Bar Controller，点击右键，如下图所示。

添加新的tab项.png
同时按钮键盘上的 control 、common 两个按键，点击 [添加新的tab项.png] 中的Triggered Segues 选项中的选中小原点，指向要控制的UIViewController即可；

6. 布局控制按钮

布局控制按钮.png

从左到右，
第一个按钮，从图标就可以看出来是设置多个控件之间的对齐布局效果；
第二个按钮，从图标就可以看出来是设置选中控件与它相邻控件的间距，以及自身的宽高等；
第三个按钮为控制约束；