IOS自学-UI基础01

1, 每一个手机界面,都是一个试图(View),每一个View都有一个控制器去维护和管理(ViewController)

每一个应用程序在现实的时候

首先是创建控制器,由控制器去创建视图,然后再创建视图中的控件

2, 要实现点击按钮执行一段内容,就是在控制器上提供一个方法,方法必须使用(IBAction)返回值

然后使用控件的Touch Up inside事件连接这个方法即可

   如果要使用某个控件,即将该控件作为控制器的属性即可,属性需要使用IBOutlet修饰

   

3, 需要完成一个UI的项目

拖控件,将界面搭载起来

添加响应的方法与属性

连线

编写方法的逻辑

4, 加法计算器的步骤说明

首先拖控件

两个文本框,三个Label和一个按钮

设置属性

文本框需要调出键盘,因此设置Keyboard Type为Number Pad

在控制器中提供方法

- (IBAction) calculate;

    右键控件,选中事件后的圆圈,拖线到对应方法处

设置属性,因为方法需要访问指定控件,那么将该控件作为控制器的属性

属性需要使用IBOutlet修饰

    右键控件,找到Referencing Outlet后面的圆圈,连线

编写点击执行的方法

获得两个文本框(UITextFilde)的文本(text)

将字符串数据转换成数字(intValue)

求和,将结果转换成字符串(stringWithFormat)

#import "ViewController.h"

@interface ViewController ()
- (IBAction)calculate;
@property (weak, nonatomic) IBOutlet UITextField *num1;
@property (weak, nonatomic) IBOutlet UITextField *num2;
@property (weak, nonatomic) IBOutlet UILabel *resLabel;
@property (weak, nonatomic) IBOutlet UITextField *num3;

@end

@implementation ViewController


- (IBAction)calculate {
    NSString *numString=self.num1.text;
    NSString *numSting=self.num2.text;
    int resInt=[numSting intValue]+[numString intValue];
    self.resLabel.text=[NSString stringWithFormat:@"%d",resInt];
    //凡是在view中得控件调出键盘，都可以是使用view的结束编辑的方法来取消键盘
    [self.view endEditing:YES];

}

@end

5, 退出键盘

// 退出键盘只要是将控件设置为非第一响应者

// [self.num1 resignFirstResponder];

// [self.num2 resignFirstResponder];

// 凡是在view中的控件调出的键盘,都可以使用view的结束编辑的方法取消键盘

[self.view endEditing:YES];

6, IBAction与void之间的关系

    实际上IBAction就是void,只是void不能连线,IBAction是连线的一个标

7, IBAction与IBOutlet的关系

    IBAction是连线方法的标志

    IBOutlet是连线属性的标志

    什么时候用方法,什么时候用属性?

        需要执行代码的时候使用方法

        需要访问成员的时候使用属性

8, 连线的方式小结

    连线就是将代码与控件连接起来

    在ViewController树上与直接在storyboard中使用控件是一回事儿

    1) 右键控件,找到事件,点击圆圈,连线方法

    2) 找到方法,点击圆圈,连线控件,默认事件

    3) 按下control,拖动控件,连线方法,选择事件与属性

9, 控件的常用属性

    控件是有一些共性的,也就是都具备的特征,当然也有一些独有的特征

    可以利用继承将共性用父类来描述,而子类实现独有的内容

    通过cmd建点击类跳转到头文件可以看到其继承关系,可以知道

        所有的控件都来源于UIView和UIControl

        其区别是UIControl具有默认的事件处理的管理(临时这么理解)

        UIView只用于展示内容,而没有默认的事件处理能力

    需要掌握的便是关于位置与大小的属性(外型)

        frame       主要是描述控件的位置与大小

        bounds      主要用于描述大小

        center      主要是描述位置,表示控件的中心

        transform   描述控件的变换(动画)

10, iOS中的坐标系(基本上所有计算机图形处理都是这个坐标系)

    在控件中属性frame刚好可以描述控件的位置与大小

    可以利用修改控件的frame属性去改变控件的位置

11, 了解按钮的状态,并会设置状态的属性

    设置State config

    设置状态以后可以修改文本内容\颜色与背景等

    如果希望正常显示还需要设置Type为Cunstom

12, 当按钮被点击的时候,方法会调用

    在调用方法的时候,系统会检查是否有参数

- (IBAction) move {

}

- (IBAction) move: (id) sender {

}

    如果没有参数,那么直接调用,如果有参数,就将点击的按钮作为参数传递给方法

    即,sender就是被点击的按钮

13, 将多个控件绑定到一个方法上

    由于使用带有参数的方法,可以将被点击的按钮传入方法中,因此

    常常设置控件的tag属性,然后再方法中进行判断,利用switch做出选择处理

- (IBAction)move:(id)sender {
    
    // 只要点击按钮,方法就会被调用
    UIButton *btn = (UIButton *)sender;    CGRect frameTemp = self.head.frame;
    switch (btn.tag) {
        case 0 :
            // 上
            frameTemp.origin.y -= 10;
            break;
        case 1 :
            // 右
            frameTemp.origin.x += 10;
            break;
        case 2 :
            // 下
            frameTemp.origin.y += 10;
            break;
        case 3 :
            // 左
            frameTemp.origin.x -= 10;
        break;
        case 4:
            //缩小
            frameTemp.size.height-=10;
            frameTemp.size.width-=10;
            frameTemp.origin.y+=5;
            frameTemp.origin.x+=5;
            
            break;
        case 5:
            //放大
            frameTemp.size.height+=10;
            frameTemp.size.width+=10;
            frameTemp.origin.y-=5;
            frameTemp.origin.x-=5;
            break;

    }
    
    self.head.frame = frameTemp;
}

14, center与bounds

    每次创建一个项目,都需要设置storyboard,实际上是设置这个文件的结构,

    这个文件是一个文本文件,因此只要提供了图片等素材,如果需要再次演示这个项目

    直接将Main.storyboard文件拷贝到新的项目中即可

    (注意相关方法与属性需要删除连线)

    如果需要修改控件的位置与大小,可以使用

        1) frame

            frame可以修改位置,也可以修改大小,但是大小会保持在原来的位置

            看起来就好像一边不动,一边变大变小

        2) center

            center表示控件的中心,可以利用它调整控件的位置  center.x,center.y;

            CGPoint p=self.head.center;

            p.y-=10;

           self.head.center=p;

        3) bounds

            bounds表示控件的大小,可以使用它调整大小

            不需要担心bounds会一边倒

           CGRect rec=self.head.bounds;

           rec.size.width-=10;

           rec.size.height-=10;

           self.head.bounds=rec;

15, transform,叫做变换(理论上讲:就是矩阵变换)

    利用变换可以实现,移动与旋转和缩放的功能

变换的含义可以类比一下:

    一个元素上添加一个变换,就是要这个元素从原始的位置做一定的移动

    第一次点击

        head.变换 = 快点在原来的位置向上移动10个单位

    第二次点击

        head.变换 = 快点在原来的位置向上移动10个单位

    如果希望有变化,就应该将当前的变换取出来,累加变化

        当前变换 =快点在原来的位置向上移动10个单位

        当前 += 向上移动10个

        head.变换 = 当前;

//在之前的变化上累加

self.head.transform=CGAffineTransformTranslate(self.head.transform, -10, -10);

16, 弧度制

    利用弧长与半径相等定义了一个大小

    弧长刚好等于半径时对应的角度叫做一个弧度

    圆周长是2*pi*r

    一个圆周就是2 Pi 弧度

    360度 / 2PI = 指定角度 / 指定弧度

//旋转变化   旋转90°逆时针

self.head.transform=CGAffineTransformRotate(self.head.transform, -M_PI_4);//代表x不变，y放大两倍
self.head.transform=CGAffineTransformScale(self.head.transform, 1, 2);

当两个参数都为0.5的时候就是缩小0.5倍。

这些变化可以叠加，

[UIView beginAnimations:nil context:nil]; //开始动画
[UIView setAnimationDuration:2.0];  //设置动画时间，单位是秒，
//中间是一堆动画操作，可以叠加
[UIView commitAnimations];  //结束动画

作业：

制作一个 QQ 登录界面

QQ文本框要有“请输入QQ”的文字提示（用户输入文字时会自动消失）Placeholder属性

密码文本框要有“请输入密码”的文字提示（用户输入文字时会自动消失）

QQ文本框只能输入数字。Keyboard属性。

密码文本框的文字必须是暗文显示(掩码显示)Secure属性

点击登录按钮后输出用户输入的QQ和密码，并且退出键盘

文本框右边显示“清除”按钮。Clear Button属性，默认值：Never appears