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的朋友们可以做一下,很有帮助的.

UI小练习,模仿登陆界面相关推荐

学籍管理系统制作教程第二天之用户登陆界面（三层）
最近工作比较忙,所以没有连续的来写,今天有空了继续前面的今天做用户登陆界面,使用三层架构,那么我就需要先理解什么是三层和为什么使用三层. 第一:什么是三层,UI表现层也就是界面,放各种界面如登陆界面 ...
Qt 之模仿 QQ登陆界面——功能篇（一）
一.简述今天是2017年第一篇技术文章,12月末事情太多,一直没来得及更新博客.今天继 Qt 之模仿 QQ登陆界面--样式篇这一篇来简单地看一下对登录界面做的一些功能,主要是登录用户下拉列表和 ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(二）---登陆界面功能实现
打开 main.js,这个文件里定义的是整体小程序中会用到的一些功能 (即变量之类),也就是说,只要在这里出现的功能,其它页面可以直接拿来使用.可以把它理解为: 共享单车main ,大家都可以用. ...
Unity之UI和登陆界面与暂停界面
Unity----UI和登陆界面与暂停界面接触了Unity制作不管是程序还是游戏都避免不了UI的制作,但是在网上搜的UI制作的学习过程,额-一言难尽,就像是拼图一样在那一块块搜索然后再将它拼装起来, ...
HTML模仿静态京东登陆界面
使用简单的html+css 进行京东登陆界面的简单模仿并没有对css和html进行分开编辑效果如图素材元素私信获取代码如下: <!doctype html> <html la ...
VS2010模仿QQ2011登陆界面
模仿QQ2011的登陆界面有很多种方法,下面我介绍一下我自己的设计方法以及在设计过程中所用到的技术关键点: 附截图两张: 登陆界面中用到的技术关键点有: 一.背景的绘制 QQ2011登陆界面的背景分为 ...
ios swift模仿qq登陆界面，xml布局
给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...
微信小程序-模仿绘制聊天界面
参考文章 1.小程序模仿微信聊天界面 2.微信小程序实现仿微信聊天界面(各种细节处理) 3.微信小程序之页面中关于聊天框三角形的制作和使用 4.仿微信聊天记录时间显示 5.微信小程序-同时获取麦克风. ...

UI小练习,模仿登陆界面

UI小练习,模仿登陆界面相关推荐

最新文章

热门文章