zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

控件的基本使用-iOS—UI笔记

ios笔记UI 基本 控件 使用
2023-09-27 14:26:37 时间
QQ20150805-2

创建好项目后先设置好类前缀,这里的类前缀用于自己创建的类自动加上前缀,然后进串联图开始拖控件吧

QQ20150805-3

拖拽好合适的控件并设置其对应属性

QQ20150805-4

我们来运行看看,是什么效果呢

uiapplication01

我们没有编写任何代码,第一个简单的图形界面应用就这样轻松的完成了。

二、控件连线 通过拖拽控件,设置控件的属性我们可以完成一个简单的QQ登陆界面,但仅仅这样是远远不够的。比如怎么获取文本框中的数据,点击登陆按钮后会有啥反应?所以我们需要将代码和控件进行关联,也就是控件连线。

QQ20150805-6

按住control + 鼠标左键,将View列表中需要连线的控件拖到ViewController.m文件中的匿名分类中,也就是声明私有属性、方法。

QQ20150805-7

Connection:Outlet 是连线后生成属性

Name:txtQQ 属性名

Type:UITextField 属性类型

Storage:强类型指针、弱类型指针,和我们之前学习的weak参数没区别,注意UI控件全部用弱类型

QQ20150805-8

按住control + 鼠标左键直接从控件上拖拽,注意当显示出上图中的蓝色横线后松开手指。

或者先手动编写代码,然后按住command + 鼠标左键可以将代码连线到控件上。

QQ20150805-9

Connection:Action 连线后生成方法

Name:login 方法名

Argument:None 方法无参数

最终通过拖拽控件生成的属性、方法声明是:

//每一个Text文本框控件都是一个UITextField对象

@property (weak, nonatomic) IBOutlet UITextField *txtQQ;

@property (weak, nonatomic) IBOutlet UITextField *txtPassword;


//点击登陆按钮后会触发的单击事件

- (IBAction)login;

QQ20150805-12

控件连线完成后,实现login方法,并设置控件的属性。

//点击登陆按钮后会触发的单击事件

- (IBAction)login {

    //将获取到的文本存到字符串对象中

    NSString *txtQQString = self.txtQQ.text;

    NSString *txtPassword = self.txtPassword.text;

    

    //在控制台输出文本中的字符串

    NSLog(@"QQ:%@  密码:%@",txtQQString,txtPassword);

    

    //收起键盘

    [self.view endEditing:YES];

}

输入QQ、密码后点击登录按钮,会触发单击事件调用login方法,最终输出文本框中的数据,并收起键盘。

注意:

1.定义为IBOutlet的属性才能进行属性的连线,定义为IBAction的方法才能进行方法的连线。

2.属性或者方法前面是空心的小圆圈说明还没有进行连线,成功连线后属性或者方法的前面是实心的小圆圈。

三、按钮的基本操作 通过一个实际例子来介绍按钮Button的各种属性和基本操作,下面无码动态美女图就是完成后的应用。

不难看出此应用的图片是一个可点击的按钮,并且实现了移动、缩放、旋转。所以,再此之前我们需要了解一些基本的UI常识,也就是一个控件想要显示到屏幕上,至少他会有坐标(x、y坐标)和宽高(width、height),还有这里会设置按钮的默认状态、高亮状态背景图。

uiapplication

首先创建一个Single View Application项目,创建好项目先去掉Use Auto Layout、Use Size Classes勾选,这是自动布局。如果不去掉勾选我们将不能通过frame来修改控件的大小。

QQ20150805-14

导入应用需要的素材图片,注意如果是Xcode6.x版本是叫Images.xcassets,素材图片格式为png。

QQ20150805-15

拖入一个Button控件,并点击右上角的小尺子,设置Width、Height为100。这里尺寸随意,我是根据素材大小来设置的。

QQ20150805-16

然后类型选择Custom,去掉Button默认文件并设置Default(默认)下的背景图片。如下图所示,我将苍老师设置为背景图。

QQ20150805-17

然后再选择State Config选项里的Highlighted(高亮状态,就是按钮被点击后没有松开的期间),并设置背景图。

QQ20150805-18

按照同样的方式拖入一堆Button控件,并设置对应的各种属性值,来表示移动、缩放、旋转的按钮。

QQ20150805-19

为各个移动、缩放Button的Tag设置一个不同的值,这里的Tag就相当于这个控件的一个标记,可以通过这个标记间接访问这个控件。

QQ20150806-1

拖线,因为我们要操苍老师,所以就把苍老师设为属性供其他按钮访问并操作。移动、缩放的按钮都拖到一个带参数的方法里,参数类型为UIButton,因为是将按钮本身作为参数传递。而旋转按钮则单独拖线一个方法,并且可以不用设置参数。

QQ20150806-2

控件拖线完成后,实现move:和rotate方法。

#import "ViewController.h"


@interface ViewController ()

//图片按钮

@property (weak, nonatomic) IBOutlet UIButton *btnPic;


//控制图片移动、缩放的方法

- (IBAction)move:(UIButton *)sender;


//控制图片旋转的方法

- (IBAction)rotate;


@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

}


- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}


//控制图片移动、缩放的方法

- (IBAction)move:(UIButton *)sender {

    CGRect picFrame = self.btnPic.frame;

    

    switch (sender.tag) {

        case 10:

            //上移,y坐标减少,x坐标不变

            picFrame.origin.y -= 30;

            break;

        case 20:

            //下移,y坐标增加,x坐标不变

            picFrame.origin.y += 30;

            break;

        case 30:

            //左移,x坐标减少,y坐标不变

            picFrame.origin.x -= 30;

            break;

        case 40:

            //右移x坐标增加,y坐标不变

            picFrame.origin.x += 30;

            break;

        case 50:

            //增大,宽、高增大,以图片左上角坐标为基点增大

            picFrame.size.width += 30;

            picFrame.size.height += 30;

            break;

        case 60:

            //缩小,宽、高减少,以图片左上角坐标为基点缩小

            picFrame.size.width -= 30;

            picFrame.size.height -= 30;

            break;

    }

    

    //修改图片按钮的frame时增加动画效果

    [UIView animateWithDuration:0.5 animations:^{

        self.btnPic.frame = picFrame;

    }];

}


- (IBAction)rotate {

//    //再改变transform的时候增加动画效果

//    [UIView animateWithDuration:0.5 animations:^{

//        //以图片中心点为基点增大、缩小。当参数为正数就是增大,负数缩小

//    //对控件在之前大小基础上进行大小缩放

//        self.btnPic.transform = CGAffineTransformScale(self.btnPic.transform, 1.5, 1.5);

//    }];

    

//    //再改变transform的时候增加动画效果

//    [UIView animateWithDuration:0.5 animations:^{

//        //对控件在之前位置基础上进行位置变换,x、y坐标同时变化

//        self.btnPic.transform = CGAffineTransformTranslate(self.btnPic.transform, 30, 30);

//    }];

    

    //再改变transform的时候增加动画效果

    [UIView animateWithDuration:0.5 animations:^{

      //对控件在之前角度基础上进行角度旋转变换,注意IOS中的旋转不是以度数做单位,而是以弧度做为单位。

        //弧度制的书写方式:M_PI=180度  M_PI_2:90度,正值表示顺时,负值逆时

        self.btnPic.transform = CGAffineTransformRotate(self.btnPic.transform, -M_PI_4);

    }]; 

}

@end

至此,这个应用就完成了,效果图就是我前面截图的第一张。

注意:

default:按钮添加后还没有进行任何操作时的状态

hightLighted:按钮被点击时还没有松开鼠标时的状态

disabled:按钮不可用状态

image:显示与文字一起存在的小图 ,通常它不会填满整个按钮。

backgroundImage:显示整个按钮的背影图片,一般它会填满整个按钮。

按钮在高亮状态下设置的backgroundImage会变灰,这是它的系统自带属性决定的,如果想不显示系统默认的样式,则需要将Type设置为custom

四、控件的常用属性
通过修改frame.origin、frame.size来控制控件的位置和大小,以左上角的坐标为控件原点坐标。

frame01

//frame属性的使用

- (IBAction)btnAction {

    CGRect btnFrame = self.btn.frame;

    btnFrame.origin.x += 50;

    btnFrame.origin.y += 50;

    self.btn.frame = btnFrame;

}


center代表控件的几何中心点,由于表示一个点,就是类型是CGPoint,里面有两个属性CGFloat x,CGFloat y分别代码控件的x、y轴方向的坐标值,所以通过修改center也能达到修改控件坐标的目的。

point01

//center属性的使用

- (IBAction)btnAction {

    CGPoint btnPoint = self.btn.center;

    btnPoint.x += 50;

    btnPoint.y += 50;

    self.btn.center = btnPoint;

}


bounds描述控件的边界,类型是CGRect,类似于frame,我们也可以通过个性bounds属性的值来修改控件的大小。注意bounds是以中心点做为参考来进行变化的,这点与frame不一样,frame是以左上角做为参考原点的。注意不要使用bounds属性修改控件的坐标值。

bounds01

//bounds属性的使用

- (IBAction)btnAction {

    CGRect btnBounds = self.btn.bounds;

    btnBounds.size.width += 20;

    btnBounds.size.height += 20;

    self.btn.bounds = btnBounds;

}


transform称为矩陈变换,它可以实现控件的旋转绽放等操作。如果只是普通的移动,一般会考虑使用frame,如果是旋转操作,那么一般会考虑transform。transform是参考控件的原始坐标进行变换的,在多次变换的时候每一次变换的基础需要建立在前一次变换的基础之上。

弧度制的书写方式:M_PI=180度 M_PI_2:90度,正值表示顺时针,负值表示逆时针。


CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx, CGFloat ty);


//对控件在之前大小基础上进行大小缩放

CGAffineTransform CGAffineTransformScale(CGAffineTransform t,CGFloat sx, CGFloat sy);


//对控件在之前角度基础上进行角度旋转变换,注意IOS中的旋转不是以度数做单位,而是以弧度做为单位。

CGAffineTransform CGAffineTransformRotate(CGAffineTransform t,CGFloat angle);


iOS开发者如何做到升职加薪到25k?6年开发 架构师笔记送给你! 对于我们绝大多数人来说,工作最基本的意义是我们可以通过自己的劳动换取酬劳来养活自己,尤其是对于刚毕业的学生,拥有一份全日制的工作意味着自己走出校园,踏上社会,自己真正开始独立起来。
百度在职 iOS 架构师的成长笔记,送给还在迷茫的你! 我们经常在网上会看到这样的文章,你的同龄人正在如何如何......。这是典型的贩卖焦虑的文章。的确,现阶段,刚毕业几年的年轻人,面临车,房子等,有时候压力挺大的。 但你过度焦虑的话,每天生活在恐慌当中,你会发现你生活过得一团糟。
建议50:了解对象的alloc 和 init... alloc 分配过程不仅进行对象的内存分配,还初始化对象的两个小而非常重要的属性,即它的isa实例变量和保持数。
建议45:设计模式是特定环境下的特定问题的解决方案 设计模式是某种特定设计的模板或指导原则。 建议46:MVC模式是一种复合或聚合模式 MVC 是一种高级别的模式,关注的是应用程序的全局架构,并根据各种对象在程序中发挥的作用对其进行分类。
我们发现 Class 本身也有一个isa指针,指向的是它的MetaClass。 当我们对一个实例发送消息时(-开头的方法),会在该 instance 对应的类的 methodLists 里查找。
建议33:使用类别把类的实现拆分成不同的文件 类别可以访问其继承的类的实例变量,类别的方法具有最高的优先级类别,可以分散到不同的文件中,甚至不同的框架中。
Cocoa 是一套框架和运行时支持,简单来说就是API应用程序接口。与你耳熟能详的MFC、dotNet、C标准库评级。 Cocoa touch 是cocoa在iOS上的实现,也是iOS上唯一的框架,开发iOS App,简单来说,OC是开发语言,Cocoa touch 是框架。