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

来源:互联网 发布:览物之情得无异乎翻译 编辑:程序博客网 时间:2024/05/11 20:33

一、纯代码实现

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 0
原创粉丝点击