登录界面UI设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/feiyan_go/article/details/27060897

本文详细介绍了如何设计并实现一个简洁高效的登录界面，包括背景设置、组件布局、输入框样式、按钮交互以及密码输入安全性的优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-(void) loadUI {
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"seller_bg.png"]];
    self.contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, WinSize.height-64)];
    self.contentView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:self.contentView];
    
    normalRect = self.contentView.frame;
    UIImageView *imageview = [[UIImageView alloc] initWithFrame:CGRectMake(120, 10, 80, 80)];
    imageview.image = [UIImage imageNamed:@"login_flag.png"];
    [self.contentView addSubview:imageview];
    
    UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(15, 10+80+20, 320-30, 80)];
    contentView.backgroundColor = [UIColor whiteColor];
    contentView.layer.masksToBounds = YES;
    contentView.layer.cornerRadius = 4.f;
    contentView.layer.borderColor = [UIColor blackColor].CGColor;
    contentView.layer.borderWidth = 1.f;
    contentView.userInteractionEnabled = YES;
    [self.contentView addSubview:contentView];
    
    UILabel *line = [[UILabel alloc] initWithFrame:CGRectMake(0, 39, 320-30, 1)];
    line.backgroundColor = [UIColor blackColor];
    [contentView addSubview:line];
    
    for (int i = 0 ; i < 2; i++) {
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10+40*i, 60, 20)];
        label.backgroundColor = [UIColor clearColor];
        label.font =[UIFont systemFontOfSize:14];
        label.textColor = [UIColor lightGrayColor];
        label.textAlignment = NSTextAlignmentCenter;
        if (i == 0)
        {
            label.text = @"账号";
        }else {
            label.text = @"密码";
        }
        [contentView addSubview:label];
    }
    self.userField = [[UITextField alloc] initWithFrame:CGRectMake(60, 5, 320-30-60, 30)];
    self.userField.delegate = self;
    self.userField.placeholder = @"请输入账号";
    [self.userField setAutocapitalizationType:UITextAutocapitalizationTypeNone];
	[self.userField setAutocorrectionType:UITextAutocorrectionTypeNo];
    self.userField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
    self.userField.clearButtonMode = UITextFieldViewModeAlways;
    self.userField.font = [UIFont systemFontOfSize:14];
    self.userField.returnKeyType = UIReturnKeyDone;
    self.userField.text = [[NSUserDefaults standardUserDefaults] objectForKey:@"V2_userAcount"];
    [contentView addSubview:self.userField];
    
    self.passWordField = [[UITextField alloc] initWithFrame:CGRectMake(60, 45, 320-30-60, 30)];
    self.passWordField.delegate = self;
    self.passWordField.font = [UIFont systemFontOfSize:14];
    self.passWordField.placeholder = @"请输入密码";
    [self.passWordField setAutocapitalizationType:UITextAutocapitalizationTypeNone];
	[self.passWordField setAutocorrectionType:UITextAutocorrectionTypeNo];
    self.passWordField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
    self.passWordField.clearButtonMode = UITextFieldViewModeAlways;
    self.passWordField.returnKeyType = UIReturnKeyDone;
    self.passWordField.secureTextEntry = YES;
    [contentView addSubview:self.passWordField];
    
    UIButton *loginBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    loginBtn.frame = CGRectMake(15, 10+80+20+80+20, 320-30, 40);
    loginBtn.layer.masksToBounds = YES;
    loginBtn.layer.cornerRadius = 4.f;
    loginBtn.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"nav_bg_V2.0.png"]];
    [loginBtn setTitle:@"登录" forState:UIControlStateNormal];
    [loginBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    loginBtn.titleLabel.font = [UIFont systemFontOfSize:14];
    [loginBtn addTarget:self action:@selector(loginAction) forControlEvents:UIControlEventTouchUpInside];
    [self.contentView addSubview:loginBtn];
}

<pre name="code" class="objc">[self.passWordField setAutocapitalizationType:UITextAutocapitalizationTypeNone];
	[self.passWordField setAutocorrectionType:UITextAutocorrectionTypeNo];
    self.passWordField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
    self.passWordField.clearButtonMode = UITextFieldViewModeAlways;
    self.passWordField.returnKeyType = UIReturnKeyDone;
    self.passWordField.secureTextEntry = YES;

1 首字母大写取消 2 自动联想取消， 3 竖列居中， 4 删除按钮， 5 清楚按钮， 6 弹出的键盘换行按钮改成完成， 7 密码