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

最新推荐文章于 2021-07-16 16:47:10 发布

北往风吹

最新推荐文章于 2021-07-16 16:47:10 发布

阅读量1.8k

点赞数

分类专栏： IOS开发-UI基础文章标签： frame bounds center 代码实现控件 ui基础

本文链接：https://blog.csdn.net/haojie2014/article/details/48200159

版权

IOS开发-UI基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、纯代码实现

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 <Foundation/Foundation.h>

#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);
    
    
}

运行一次（扩大的）结果是：

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

三、简单的动画效果

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

（1）开始动画

（2）设置动画相关的时间等

（3）参与动画的行动

（4）提交动画

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

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

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

北往风吹

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
IOS开发UI—纯代码实现控件及其基本属性

一、纯代码实现1. 步骤 1> 了解自己需要实现的控件对象，在使用响应的控件类创建控件对象（先有对象，后有类） 2> 设置控件属性，注意位置也是属性；看看是否有响应事件 3> 添加控件到视图中2. 在前面的基础篇中讲到Main.storyboard用来实现界面的编辑。在这个页面中的内容其实都是可以通过代码实现的。3. 设置控件监听方法的示例代码如下：[btn addT
复制链接

扫一扫