UI小练习,模仿登陆界面

做这个登陆页面只是为了练习一下,个人觉得做完这个页面可以让你对一个程序的层级关系,tag值的使用,self的认知,还有类目,组合控件都有一定的熟练掌握;

这个登陆程序一共有四个页面,一个是登陆页面,一个是点击注册按钮之后的注册页面,一个是点击找回密码按钮之后的一个只有返回button的空白页面,以及登陆成功后的一个空白页面;

要做上面图片中的两个页面都需要做什么呢?好多的输入框,也就是textfield,还有与之相应的label用来提示这个textfield用来写什么.如果我们一个一个的建立label和textfield,那么每个控件都需要独立的写自己的所有要用到的属性,这样下来就算一个控件占用6-8行代码,那么这两个页面文件每个.m文件里都要编写大量的代码,那么用什么来优化这样的代码呢?那就是把label和textfield两个控件进行组合封装,做成一个新的组合控件,我们只要在登陆页面或者注册页面写两三行代码就可以把一组label和textfield写出来;

下面就是组合控件的代码:

可以看到,在这个.m文件里写了一些在登陆页面或者注册页面可能用到的两个控件的属性,在这里我把label加入到textfield的左视图里,这样就更加的融合在了一起,效果就向上图里的一样;这样写我们只要写一个初始化方法,把label的值还有这个组合控件的坐标写出来,就可以直接得到一个已经把所有属性写好的控件.经过if的判断,还可以选择性的写哪一个组合需要什么样的属性;

在建立的时候,像登陆页面这样控件少的可以直接敲代码写出来,如果像注册界面这样有好多的页面,我们就可以先写歌数组,把要用到的label的名字存起来,用for循环来便利出所有的控件,控件的名字就用数组下边来给,然后循环给他们一个tag值,这样在循环外或者方法里边就可以很精确的找到每个控件进行操作;

本来要用上百行的代码来写控件,现在只要这么几行代码就可以全写出来,一下子优化了好多好多!!!!!!!!

现在输入框的问题解决了,那么下来看看button.可以看到每个页面的button也是有两个以上的,如果按照原来的办法写,就跟上面的一样,一个button就要写10行代码,那我们怎么进行优化呢?那就是要联系的另一个方法,写类目及分类;

类目,是给一个系统类自写一个类的扩展方法,可以把系统没有的方法我们自己写出来,这样只要一个初始化方法,我们就能得到一个属性满满的button了,这样写的话,那么我们在登陆页面和注册页面也将省掉几十行的代码;

虽然我们在组合控件和类目里面写了这么多的代码,但是我们在建立好多重复的控件时就可以省掉好多时间以及代码量,提高我们的工作效率,而且~~~这两组文件是可以拖到其他工程里使用的,不需要修改多少东西就能成为另一个我们需要的组合控件或者button;方便了很多啊;

现在我们小的控件已经有了,那么就可以开始写我们的页面了,在上面说了,这个程序可以锻炼我们对层级关系的运用和熟练掌握,是因为它的图层实在是很多啊,层关系都写出来或者是画出来,这样在写程序的时候就能很清晰的看到你当时是在写哪个页面,哪个图层;

window下面有一个rootviewcontroller...rootviewcontroller下有四个页面,分别是登陆,注册,找回密码,登陆成功后的主页面;

登陆页面下有两个图层,一个是图片图层,一个是控件的容器视图,容器视图下就是两个组合控件和三个button;

注册页面下有两个图层,一个是图片图层,一个是控件容器图层,容器图层下是用for循环便利出来的所有组合控件和两个button;

找回密码和主页面是两个空的只有一个button的,因为用不到,所以只写了一个用来页面跳转用的button;

本来是打算画出来的,但是word实在蛋疼,画了半天也没画好,所以只能手打了~~~~~~~

好多人在写的时候会搞乱图层,导致在方法里使用或者后面的代码里添加东西的时候会写到错误的地方导致各种诡异的情况发生;

如果要经常使用tag值的时候,我习惯从父到子依次给相应的tag值,比如我给登陆页面的tag值是1000,下面容器视图的tag值是100,而容器视图上的控件的tag依次101~100+n;注册界面也一样,2000~~~~200~~~201~200+n;这样我们在使用的时候就能很清楚的分辨出在调用的到底是哪个图层下的哪个控件.

我原来一直不太会用tag,但是做过这个之后真的是用的很熟练啊,要用到的地方太多了,因为闲的胃疼的写了点登陆用户名密码判断和注册页面的好多判断,如果你对tag值的使用不熟练,建议你也试试写这个;

还有个功能就是页面之间的跳转了,因为是简单的跳转,所以只是用了view的hidden属性来隐藏视图或者显示视图来做到页面跳转

真的是很简单的跳转~~~~哈哈,忽悠自己玩的感觉~~~~~

希望初学ui的朋友们可以做一下,很有帮助的.