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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

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