iOS-自定义视图

自定义视图

自定义视图:系统标准UI之外,自己组合而出的新的视图。
自定义视图的优点:
iOS提供了很多UI组件,借助它们我们可以实现不同的功能。尽管如此,实际开发中,我们还需自定义视图。积累自己的代码库,方便开发。自己封装的视图,能像系统UI控件一样,用于别的项目中,能大大降低开发成本,提高开发效率。
高质量代码的特点:可复用,可移植,精炼等。(高内聚,低耦合)

自定义视图步骤
根据需求的不同,自定义视图继承的类也有所不同。一般自定义的视图会继承于UIView。以下是自定义视图的要点:
创建一个UIView子类 :@interface LTView : UIView
在类的初始化方法中添加子视图。
[self addSubview:_leftLabel];
[self addSubview:_rightField];
类的.h文件提供一些接口(方法),便于外界操作子视图。
@property(nonatomic, retain)UILabel *leftLabel;//左侧label
@property(nonatomic, retain)UITextField *rightField;//右侧文本框
此时的LTView就变成了一个具有label和textField的视图了。

LTView的理解

把Label和Textfield封装到LTView中,在一定程度上简化了我们的代码。
往往我们需要对LTView中的Label或者Textfield进行一定的控制,比如:设置Label 的text,获取Textfield的text,给Textfield指定delegate,设置textColor等。
为了方便外界操作Label和Textfield,因此我们要将这两个属性声明在.h文件里。

//创建LTView对象
    LTView *usernameView = [[LTView alloc]initWithFrame:CGRectMake(40,     
    100, 300, 50)];
    usernameView.leftLabel.text = @"用户名:";
    usernameView.rightField.placeholder = @"请输入用户名";
    [usernameView.rightField becomeFirstResponder];
    [backView addSubview:usernameView];//backView是LTView添加到的父视图
    [usernameView release];

下面举个小例子 把俩个filed 封装在一个View上
第一步在.h中定义属性,方便外界访问

#import <UIKit/UIKit.h>
@interface MyInPutView : UIView
@property (nonatomic , retain) UITextField * usernameFiled;
@property(nonatomic,retain) UITextField * passwordFiled;
@end

第二步在.m 文件中具体封装

#import "MyInPutView.h"

@interface MyInPutView ()<UITextFieldDelegate>

@end
@implementation MyInPutView
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        UIImageView *userNameImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_username.png"] highlightedImage:[UIImage imageNamed:@"icon_username_select.png"]];
        userNameImageView.frame = CGRectMake(0, 0, 40, 40);
        userNameImageView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.8f]; self.usernameFiled = [[UITextField alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, frame.size.height/2-1)];
self.usernameFiled .backgroundColor =[UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];
        self.usernameFiled.leftView = userNameImageView;
        self.usernameFiled.leftViewMode = UITextFieldViewModeAlways;
        self.usernameFiled.delegate =self;
        [self addSubview:self.usernameFiled];
        UIImageView *passwordImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_password.png"] highlightedImage:[UIImage imageNamed:@"icon_password_select.png"]];
       passwordImageView.frame = CGRectMake(0, 0, 40, 40);
       passwordImageView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.8f];
        self.passwordFiled =[[UITextField alloc]initWithFrame:CGRectMake(0, self.usernameFiled.frame.size.height+2, self.usernameFiled.frame.size.width, self.usernameFiled.frame.size.height)]; self.passwordFiled .backgroundColor =[UIColor colorWithRed:0 green:0 blue:0 alpha:0.3f];
        self. passwordFiled.leftView =  passwordImageView;
        self. passwordFiled.leftViewMode = UITextFieldViewModeAlways;
        self.passwordFiled .delegate =self;
        [self addSubview:self.passwordFiled];
    }
    return self ;
}
-(void)textFieldDidBeginEditing:(UITextField *)textField{
    UIImageView * leftView = (UIImageView *)textField.leftView;
    leftView.highlighted = YES;
}
-(void)textFieldDidEndEditing:(UITextField *)textField{
    UIImageView * leftView = (UIImageView *)textField.leftView;
    leftView.highlighted = NO;
}

@end

第三步在.min 中调用分装的View

#import "ViewController.h"
#import "MyInPutView.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    MyInPutView *myInputView = [[MyInPutView alloc]initWithFrame:CGRectMake(40, 100, self.view.frame.size.width-40*2,82)];
    myInputView.layer .cornerRadius =8.0f;//给myInputView设置圆角
    myInputView.layer.masksToBounds =YES;//在myInputView上添加,不能超出圆角
    [self.view addSubview:myInputView];    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,198评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,985评论 25 708
  • 整整一周,就为了几个自以为自己“很尊贵”的客户,折腾了整个公司都翻天覆地,就为他们争执、讨论、解决……仅仅就因为他...
    展眉同行阅读 588评论 4 2
  • 原文地址:艾艺信息 用户体验(UX)是一个很奇妙的词,它本身并没有被定义为任何一件特定的事。它不等价于UI,简单的...
    安洛可阅读 5,497评论 1 131
  • 玛奇朵小姐最近接到了一个秘密任务,需要对自己做的垂直行业来一个广度和深度兼具的竞品分析。玛奇朵小姐很重视这次行动,...
    玛奇朵小姐阅读 1,024评论 0 12