IOS开发UI—纯代码实现控件及其基本属性

一、纯代码实现

1. 步骤

  1> 了解自己需要实现的控件对象,在使用响应的控件类创建控件对象(先有对象,后有类)

  2> 设置控件属性,注意位置也是属性;看看是否有响应事件

  3> 添加控件到视图中

2. 在前面的基础篇中讲到Main.storyboard用来实现界面的编辑。在这个页面中的内容其实都是可以通过代码实现的。

3. 设置控件监听方法的示例代码如下:

[btn addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside]

提示:

  1> addTarget方法定义在UIControl类中,这意味着可以给所有继承自UIControl类的对象添加监听方法

  2> 监听方法的第一个参数就是对象本身

  3> 监听方法的第二个参数是监听控件的事件

4. 案例代码

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 动态创建我们自己的按钮
    // 1.创建按钮
    UIButton *button = [[UIButton alloc] init];
    // 设置自定义按钮
    // UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    
    // 2.普通状态文字
    [button setTitle:@"点我吧" forState:UIControlStateNormal];
    // 设置文字颜色
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    // 设置按钮背景
    UIImage *imgNormal = [UIImage imageNamed:@"btn_01"];
    [button setBackgroundImage:imgNormal forState:UIControlStateNormal];
    
    // 设置高亮状态下的文字
    [button setTitle:@"摸我干嘛" forState:UIControlStateHighlighted];
    [button setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
    UIImage *imgHighlighted = [UIImage imageNamed:@"btn_02"];
    [button setBackgroundImage:imgHighlighted forState:UIControlStateHighlighted];
    
    // 设置位置
    button.frame = CGRectMake(105, 105, 55, 55);
    
    // 为按钮注册一个点击事件  那个对象的 那个方法的
    [button addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];
    
    // 把动态的创建的按钮添加到控制器管理的view中
    [self.view addSubview:button];
    
}

// 单击事件
- (void)buttonClick {
    //
    NSLog(@"小样被点击了");
   
}
二、frame,center和bounds属性

1. 参考http://blog.csdn.net/haojie2014/article/details/48131069(控件属性)

2. 通过以下属性可以修改控件的位置

   frame.origin

   center

  注意bounds具有位置属性,但是不能进行更改位置操作

   通过以下属性可以修改控件的尺寸

   frame.size

   bounds.size

3. 案例

/**
 * 当要显示一个界面的时候,首先创建这个界面对应的控制器

 * 控制器创建好后,接着创建控制器所管理的那个view,当这个view加载完毕后就开始执行下面的方法

 * 所以只要viewDidLoad方法被执行了,就表示控制器所管理的view创建好了
 */

//  ViewController_Code.m
//  UI基础_day01_按钮实例
//
//  Created by shumei on 15/9/1.
//  Copyright (c) 2015年 shumei. All rights reserved.
//

#import "ViewController_Code.h"
//需要导入框架
#import 

#pragma mark - 拓展类
@interface ViewController_Code ()
// 声明图片属性,会自动生成get set方法,返回
@property(nonatomic, weak)IBOutlet UIButton *iconImage;

@end

@implementation ViewController_Code
// 检测是否会生成getter方法
- (UIButton *)iconImage {
    return _iconImage;
}

/**
 * 当要显示一个界面的时候,首先创建这个界面对应的控制器
 * 控制器创建好后,接着创建控制器所管理的那个view,当这个view加载完毕后就开始执行下面的方法
 * 所以只要viewDidLoad方法被执行了,就表示控制器所管理的view创建好了
 */

//viewDidLoad是视图加载完成后调用的方法,通常在此方法中执行视图控制器的初始化工作
- (void)viewDidLoad {
    
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    
    // 2.普通状态文字
    [button setTitle:@"点我吧" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
 
    UIImage *imgNormal = [UIImage imageNamed:@"btn_01"];
    [button setBackgroundImage:imgNormal forState:UIControlStateNormal];
    
    // 设置高亮状态下的文字
    [button setTitle:@"摸我干嘛" forState:UIControlStateHighlighted];
    [button setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
    UIImage *imgHighlighted = [UIImage imageNamed:@"btn_02"];
    [button setBackgroundImage:imgHighlighted forState:UIControlStateHighlighted];
 
    button.frame = CGRectMake(100, 50, 100, 100);
    
    // 把动态的创建的按钮添加到控制器管理的view中
    [self.view addSubview:button];

    // 最重要的一句,
    self.iconImage = button;
    
#pragma mark - 实现控件功能
    
    /** ------向上------ */
    // 创建按钮对象
    UIButton *topbtn=[UIButton buttonWithType:UIButtonTypeCustom];
    
    // 设置属性(正常 高亮)
    [topbtn setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
    [topbtn setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
    
    // 设置位置
    topbtn.frame = CGRectMake(50, 150, 50, 50);
    [topbtn setTag:0];
    
    // 添加到视图中
    [self.view addSubview:topbtn];
    
    // 监听事件的方法
    [topbtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /** ------向右------ */
    UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];
    
    [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
    [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
    
    rightbtn.frame = CGRectMake(100, 200, 50, 50);
    [rightbtn setTag:1];
    
    [self.view addSubview:rightbtn];
    [rightbtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /** ------向下------ */
    UIButton *downBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [downBtn setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
    [downBtn setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
    
    downBtn.frame = CGRectMake(50, 250, 50, 50);
    [downBtn setTag:2];
  
    [self.view addSubview:downBtn];
    [downBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /** ------向左------ */
    UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
    
    leftBtn.frame = CGRectMake(0, 200, 50, 50);
    [leftBtn setTag:3];
    
    [self.view addSubview:leftBtn];
    [leftBtn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /** ------放大------ */
    UIButton *plusBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [plusBtn setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];
    [plusBtn setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];
    
    plusBtn.frame = CGRectMake(170, 200, 50, 50);
    [plusBtn setTag:4];
    
    [self.view addSubview:plusBtn];
    
    [plusBtn addTarget:self action:@selector(zoom:) forControlEvents:UIControlEventTouchUpInside];
    
    
    /** ------缩小------ */
    UIButton *minuBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    
    [minuBtn setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
    [minuBtn setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];
    
    minuBtn.frame = CGRectMake(220, 200, 50, 50);
    [minuBtn setTag:5];
    
    [self.view addSubview:minuBtn];
    
    [minuBtn addTarget:self action:@selector(zoom:) forControlEvents:UIControlEventTouchUpInside];
    
}

#pragma mark - 封装
- (void)btnClick:(UIButton *)button {
    // 传入一个参数
    NSLog(@"点击了");
    // 获取头像的坐标
    CGRect rect;
    rect.origin.x = self.iconImage.frame.origin.x;
    rect.origin.y = self.iconImage.frame.origin.y;
    NSString *str = NSStringFromCGRect(rect);
    NSLog(@"头像位置为: %@", str);
    
    // 使用frame与center属性
    // CGRect frame = self.iconImage.frame;
    
    CGPoint center = self.iconImage.center;
    
    // 根据点击的按钮不同执行不同操作
    switch (button.tag) {
        case 0:
            center.y -= 5;
            // frame.origin.y -= 5;
            NSLog(@"上");
            break;
            
        case 1:
            center.x += 5;
            NSLog(@"右");
            break;
        
        case 2:
            center.y += 5;
            NSLog(@"下");
            break;
            
        case 3:
            center.x -= 5;
            NSLog(@"左");
            break;
            
        default:
            break;
    }
    
    // 将新值重新赋给对象的属性
    // self.iconImage.center = center;
    
    // 当时运行的时候发现图片按钮button 没有移动, 经过分析log也会输出,后面发现原来是自己没有将 self.iconImage = button;按钮赋给头像
    
    // 设置动画
    // 方式一:头尾式
    // 开启动画
//    [UIView beginAnimations:nil context:nil];
//    
//    self.iconImage.center = center;
//    
//    [UIView setAnimationDuration:1.5];
//    
//    // 提交动画
//    [UIView commitAnimations];
    
    // 方式二: block 块
    [UIView animateWithDuration:1.5 animations:^{
        self.iconImage.center = center;
        // self.iconImage.frame = frame;
    }];
    
}

// 放大或者缩小
- (void)zoom:(UIButton *)button {
    NSLog(@"放大或者缩小");
    
    // 获取头像的坐标
    CGRect rect;
    rect.origin.x = self.iconImage.frame.origin.x;
    rect.origin.y = self.iconImage.frame.origin.y;
    rect.size.width = self.iconImage.frame.size.width;
    rect.size.height = self.iconImage.frame.size.height;
    
    NSString *str = NSStringFromCGRect(rect);
    NSLog(@"头像位置及大小为: %@", str);

    
    // 使用bounds方式,缩放是以中点为中心点
    CGRect bounds = self.iconImage.bounds;
    
    switch (button.tag) {
        case 4:
            bounds.size.height += 5;
            bounds.size.width += 5;
            NSLog(@"放大");
            break;
            
        case 5:
            bounds.size.width -= 5;
            bounds.size.height -= 5;
            NSLog(@"缩小");
            
        default:
            break;
    }
    
    // 设置动画
    [UIView animateWithDuration:1.5 animations:^{
        self.iconImage.bounds = bounds;
    }];
    
    // self.iconImage.bounds = bounds;
    
    // 执行完动作后的大小以及位置
    CGRect rect1;
    rect1.origin.x = self.iconImage.frame.origin.x;
    rect1.origin.y = self.iconImage.frame.origin.y;
    rect1.size.height = self.iconImage.frame.size.height;
    rect1.size.width = self.iconImage.frame.size.width;
    NSString *str1 = NSStringFromCGRect(rect1);
    NSLog(@"头像位置及大小为: %@", str1);
    
//    // 获取头像的大小
//    CGSize size1;
//    size1.height = self.iconImage.frame.size.height;
//    size1.width = self.iconImage.frame.size.width;
//    NSString *str_size1 = NSStringFromCGSize(size1);
//    NSLog(@"头像大小为: %@", str_size1);
    
    
}
运行一次(扩大的)结果是:

IOS开发UI—纯代码实现控件及其基本属性_第1张图片

知道bounds的原理了:以中心点位原点进行缩放。所以坐标只是变化了缩放的一半(5 / 2)
还有通过动画可以知道,是先执行缩放动画,然后图片坐标往父控件原点坐标移动缩放的一般距离。

三、简单的动画效果

  简单介绍首尾式动画效果实现步骤

(1)开始动画

(2)设置动画相关的时间等

(3)参与动画的行动

(4)提交动画

注:实现代码参考上面的代码

  简单介绍block动画效果实现步骤

   直接在块里面设置,形象简洁


你可能感兴趣的:(IOS开发-UI基础)