前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧。趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧。

一个良好的自定义控件,能大大减少控制器里的代码,让代码在它最应该在的地方,显得层次清晰。此外,一个没有耦合的自定义控件,能拿到之后的任何项目中用,提高开发效率。接口友好、使用简单、不存在耦合、代码层次清晰易维护等是一个好控件的必备素质。项目中常见的自定义控件,往往是一些弹窗,方便用户进行查看、输入、选择等操作。

下面贴出我最近封装的三个控件代码、效果图和思路分析。

一、时间选择器

1. 使用方法:先调用show方法,再定义回调block。

2. 效果截图:控件内部加入了时间过滤(截图时间12-09  09:55)并记忆了上次的选择,无耦合。

3. 思路分析:这个便是小伙伴问到我的控件,这个控件当时是用于这样的场景:用户约时间咨询专家,通过这个控件选择一个时间点。我的思路如下:

1) 分析界面(view):

  这个界面上部分是一个工具条,左右两个按钮分别切换到上一天/下一天,中间的lable显示日期和星期几。再看中间的12个按钮,每个按钮都代表某一个时间点,有可点击状态/不可点击状态/选中状态三种样式,在Demo中我用的是按钮来实现,用collectionView应该能让代码更简洁。

  同时需要考虑到,用户每切换到另一天,控件需要刷新一下,要根据新的一天里,专家空闲时间(服务器返回),来刷新中间12个按钮的显示样式[可预约/不可预约/当前选择]。

2) 分析数据(model):

  先分析当前展示的一天中需要的数据,我们需要告诉用户该专家哪些时间点可预约,哪些不可预约,用一个字段来表示就可以了,这里一共是12个时间点,也就是说这个控件的每一次展示,需要一个有12个元素的数组,这12个元素分别对应这12个时间点是否可预约。

  假设我们允许用户的预约范围是未来一周,那么这个控件就需要一个包含7个子数组的大数组,每个子数组有12个元素,是专家某一天的可否预约的数据。好,所以控制器需要给这个控件一个大数组。

3) 上一天/下一天按钮的点击事件处理:

  更多分析详见Demo。

二、自定义多行输入框

1. 使用方法:先设置数据,再调用show方法,最后定义回调block。

2. 效果截图:控件内部加入了手机号、邮箱检测方法,无耦合; 非法提示方式也较合适。

3. 思路分析:这个控件很简单,用起来也很方便,控件内部会根据传进来的数据决定展示几行输入框出来,内部有做了数据的合法性检查、键盘处理等...思路倒没什么好说的...

三、日期选择器

1. 使用方法:先调用show方法,再定义回调block。

2. 效果截图:控件内部加入了简单的时间判断和非法选择时的提示,只有当时间合法时,才调用回调block,传递合法的时间string出去。

3. 思路分析:好吧,这个控件更简单了...

四、小结

   当我拿到设计图时,第一步先分析界面什么地方应该是什么控件,再分析需要控制器传过来什么数据,然后把需要暴露的属性放在h文件里,不需要暴露的属性放在m文件里。我封装的自定义控件,一直努力做到以下两点:

  1. 接口友好,使用尽量简单。显示就是show,隐藏就是hide,不需要控制器来完成显示和隐藏的代码,控制器只需要告诉我什么时候show,什么时候hide就行。

  2. 该封装的封装好,减少控制器里的代码。控制器只需要关心给你什么数据、什么时候让你show、什么时候让你hide和你的点击事件我应该怎么处理。而不去关心你怎么展示数据、怎么处理数据等。

  Demo的github地址:https://github.com/banchichen/SomeGoodCustomView

  欢迎大家也把自己常用好用的自定义控件分享上去...也欢迎大家对其中瑕疵之处进行批评指正...

分享一下我封装iOS自定义控件的体会,附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>的更多相关文章

  1. iOS系列 基础篇 09 开关、滑块和分段控件

    iOS系列 基础篇 09 开关.滑块和分段控件 目录: 案例说明 开关控件Switch 滑块控件Slider 分段控件Segmented Control 1. 案例说明 开关控件(Switch).滑块 ...

  2. WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...

  3. 【转】WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 下拉选择控件ComboBox的自定义样式及扩展: 自定义多选控件Mul ...

  4. iOS开发——UI进阶篇(十九)UISearchBar控件简介

    最近用到搜索功能.总结一下 搜索,无疑可以使用UISearchBar控件! 那就先了解一下UISearchBar控件吧! UISearchBar控件就是要为你完成搜索功能的一个专用控件.它集成了很多你 ...

  5. IOS 使用CoreText实现表情文本URL等混合显示控件

    实现了一个富文本视图控件.主要针对表情图片,文本字符,URL,等这种类型的文本进行显示. 源码地址 https://github.com/TinyQ/TQRichTextView 实现的效果如下图. ...

  6. iOS之分别使用代码和storyboard、xib为控件设置圆角(以按钮为例)

    首先我们看一下代码是如何给按钮设置圆角的: 我们再来看看如何在storyboard或xib中给按钮设置圆角: 1.在storyboard或xib中添加按钮后,设置标题和背景色,做好约束: 2.点击 S ...

  7. [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究

    A. 图片的加载:  [UIImage imageNamed:@"home"];  加载png图片    一.非retina屏幕  1.3.5 inch(320 x 480)  * ...

  8. IOS的一个带动画的多项选择的控件(一)

    先上效果图: 这个程序分2个层次,一个是顶部的带UITextField的bar,一个是下拉选择的view,下拉选择的view带有4个自己定义的UIView 我们先定义一个UIViewControlle ...

  9. IOS 在一个透明视图上添加不透明的子控件

    环境: 在一个透明的view中添加一个tableview,tableview也变透明了. 解决: 不要这样设置view的透明度 view.backgroundColor = [UIColor clea ...

随机推荐

  1. android中xmlns:tools属性详解

    今天读到一篇总结的非常棒的文章,写的逻辑很清晰也很实用,很少见到如此棒的文章了.就原文转发过来,我把格式给整理了一下,分享给园子里的各位朋友!好久没写博客了,就为2015年的11月留份纪念吧.希望对你 ...

  2. Spring MVC3返回JSON数据中文乱码问题解决(转)

    Spring MVC3返回JSON数据中文乱码问题解决 查了下网上的一些资料,感觉比较复杂,这里,我这几使用两种很简单的办法解决了中文乱码问题. Spring版本:3.2.2.RELEASE Jack ...

  3. IOS APP 国际化 程序内切换语言实现 不重新启动系统(支持项目中stroyboard 、xib 混用。完美解决方案)

    上篇 IOS APP 国际化(实现不跟随系统语言,不用重启应用,代码切换stroyboard ,xib ,图片,其他资源 介绍了纯代码刷新 实现程序内切换语言. 但效率底下,也存在一些问题.暂放弃. ...

  4. A Brief History of Scaling LinkedIn

    原文地址 LinkedIn started in 2003 with the goal of connecting to your network for better job opportuniti ...

  5. 在Android界面特效中如何做出和墨迹天气及UC中左右拖动的效果

    (国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) 在Android界面特效中如何做出和墨迹天气及UC中左右拖动的效果 相信这么多手机APP中 ...

  6. nginx 反向代理 与 Apache backend的配置联合配置

    nginx 反向代理 与 Apache backend的配置联合配置: 说明: nginx 将http映射到Apache上的特定子目录. 配置方法步骤: 1.  设置域名, 子域名映射到指定服务器ip ...

  7. 关于meta知多少

    本来打算写关于手机端的知识,想了想先从meta着手.接下来请大家看几个网站的例子. 一.天猫(http://m.tmall.com) <title>天猫触屏版</title> ...

  8. LeetCode: Unique Binary Search Trees II 解题报告

    Unique Binary Search Trees II Given n, generate all structurally unique BST's (binary search trees) ...

  9. Hadoop 生态系统

    1.概述 最近收到一些同学和朋友的邮件,说能不能整理一下 Hadoop 生态圈的相关内容,然后分享一些,我觉得这是一个不错的提议,于是,花了一些业余时间整理了 Hadoop 的生态系统,并将其进行了归 ...

  10. quick2.26 android下http崩溃

    quick2.26 http android下崩溃解决方案 1.先去quick官网合并代码(QuickHTTPInterface.java,CCHTTPRequestAndroid.cpp) 2.屏蔽 ...