美文网首页
iOS-自定义视图

iOS-自定义视图

作者: ysweiwei | 来源:发表于2017-08-08 20:22 被阅读0次

    自定义视图

    自定义视图:系统标准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-自定义视图

          本文链接:https://www.haomeiwen.com/subject/dodxrxtx.html