• iOS开发UI篇—Button基础

    一、简单说明

    一般情况下,点击某个控件后,会做出相应反应的都是按钮

    按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置

    二、按钮的三种状态

    normal(普通状态)

    默认情况(Default)

    对应的枚举常量:UIControlStateNormal

    highlighted(高亮状态)

    按钮被按下去的时候(手指还未松开)

    对应的枚举常量:UIControlStateHighlighted

    disabled(失效状态,不可用状态)

    如果enabled属性为NO,就是处于disable状态,代表按钮不可以被点击

    对应的枚举常量:UIControlStateDisabled

    三、注意点

    (1)从Xcode5开始,图片资源都放到Images.xcassets中进行管理,可以使用拖拽的方式添加项目中用到的图片到Images.xcassets中

    (2)若干多个控件共用一段代码,通常使用tag。

    四、代码示例

    (1)

     1 #import "LFViewController.h"
     2
     3 @interface LFViewController ()
     4
     5 @property (weak, nonatomic) IBOutlet UIButton *headImageView;
     6
     7 @end
     8
     9 @implementation LFViewController
    10
    11 // 在OC中,绝大多数的控件的监听方法的第一个参数就是控件本身
    12 //- (IBAction)left:(UIButton *)button {
    13 //
    14 //    NSLog(@"----");
    15 //}
    16 - (IBAction)move
    17 {
    18     // 通过frame修改head的位置
    19     // 在OC中,不允许直接修改“对象”的“结构体属性”的“成员”
    20     // 允许修改“对象”的“结构体属性”
    21     // 1. 取出结构体属性
    22     CGRect rect = self.headImageView.frame;
    23     // 2. 修改结构体成员
    24     rect.origin.y -= 20;
    25     // 3. 设置对象的结构体属性
    26     self.headImageView.frame = rect;
    27 }
    

    (2)

     1 #import "LFViewController.h"
     2
     3 /**
     4  使用git
     5
     6  1. 创建项目时,勾选git
     7  2. 开发告一段落后,选择"Source Control""Commit",并编写注释
     8  */
     9
    10
    11 // 枚举类型实质上就是一个整数,作用就是用来替代魔法数字
    12 // 枚举类型中,指定了第一个整数之后,后面的数字会递增
    13 typedef enum
    14 {
    15     kMovingDirTop = 10,
    16     kMovingDirBottom,
    17     kMovingDirLeft,
    18     kMovingDirRight,
    19 } kMovingDir;
    20
    21 #define kMovingDelta 50
    22
    23 @interface LFViewController ()
    24
    25 @property (weak, nonatomic) IBOutlet UIButton *headImageView;
    26
    27 @end
    28
    29 @implementation LFViewController
    30
    31 - (IBAction)move:(UIButton *)button
    32 {
    33 //    CGRect rect = self.headImageView.frame;
    34     CGPoint p = self.headImageView.center;
    35
    36     // magic number魔法数字,其他程序员看到代码的时候,不知道是什么意思
    37     switch (button.tag) {
    38         case kMovingDirTop:
    39             p.y -= kMovingDelta;
    40             break;
    41         case kMovingDirBottom:
    42             p.y += kMovingDelta;
    43             break;
    44         case kMovingDirLeft:
    45             p.x -= kMovingDelta;
    46             break;
    47         case kMovingDirRight:
    48             p.x += kMovingDelta;
    49             break;
    50     }
    51
    52     [UIView beginAnimations:nil context:nil];
    53     [UIView setAnimationDuration:1.0];
    54
    55     self.headImageView.center = p;
    56
    57     [UIView commitAnimations];
    58 }
    59
    60 - (IBAction)zoom:(UIButton *)button
    61 {
    62     CGRect rect = self.headImageView.bounds;
    63
    64     // 在C语言中,关于bool的判断:非零即真
    65     if (button.tag) {
    66         rect.size.width += 50;
    67         rect.size.height += 50;
    68     } else {
    69         rect.size.width -= 50;
    70         rect.size.height -= 50;
    71     }
    72
    73     // 首尾动画
    74     // beginAnimations表示此后的代码要“参与到”动画中
    75     [UIView beginAnimations:nil context:nil];
    76     [UIView setAnimationDuration:2.0];
    77
    78     self.headImageView.bounds = rect;
    79 //    self.headImageView.alpha = 0;
    80
    81     // commitAnimations,将beginAnimation之后的所有动画提交并生成动画
    82     [UIView commitAnimations];
    83 }
    84
    85 @end
    

    五、补充笔记

    1. IBAction的参数

    - (IBAction)left:(UIButton *)button

    (1) 在OC中,绝大多数的控件监听方法的第一个参数就是控件本身

    (2) 默认连线时的参数类型是id

    (3) 如果要在监听方法中,方便控件的使用,可以在连线时或者连线后,修改监听方法的参数类型

    2. 修改对象的结构体成员

    在OC中,不允许直接修改“对象”的“结构体属性”的“成员”,但是允许修改“对象”的“结构体属性”

    修改结构体属性的成员方法如下:

    (1)使用临时变量记录对象的结构体属性

    (2) 修改临时变量的属性

    (3)将临时变量重新设置给对象的结构体属性

    3. 在程序开发中需要避免出现魔法数字(Magic Number)

    使用枚举类型,可以避免在程序中出现魔法数字

    (1)枚举类型实质上就是一个整数,其作用就是用来替代魔法数字

    (2)枚举类型中,指定了第一个整数之后,后面的数字会递增

    4. frame & bounds & center

    1> frame可以修改对象的位置和尺寸

    2> bounds可以修改对象的尺寸

    3> center可以修改对象的位置

    5. 首尾式动画

    // beginAnimations表示此后的代码要“参与到”动画中

    [UIView beginAnimations:nil context:nil];

    // setAnimationDuration用来指定动画持续时间

    [UIView setAnimationDuration:2.0];

    self.headImageView.bounds = rect;

    ......

    // commitAnimations,将beginAnimation之后的所有动画提交并生成动画

    [UIView commitAnimations];

     
     
  • UIUtton 常见属性
  • UIButton *button4 = [UIButton buttonWithType:UIButtonTypeCustom];
       
        button4.frame = CGRectMake(50, 250, 100, 50);

    button4.backgroundColor = [UIColor cyanColor];
       
        // 自定义类型, 文字默认是白色;
        [button4 setTitle:@"自定义类型" forState:UIControlStateNormal];
        // 设置高亮状态下的文字:
        [button4 setTitle:@"高亮状态" forState:UIControlStateHighlighted];
        // 设置高亮状态下文字的颜色:
        [button4 setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
       
        // 添加目标事件:
        // 当第四个button的touchUpInside事件响应时,会调用clickBtn:方法
        [button4 addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
        // button4有添加了一个响应事件
        [button4 addTarget:self action:@selector(clickBtn4:) forControlEvents:UIControlEventTouchDragOutside];
       
        //  设置弧度:
        button4.layer.cornerRadius = 15.0;
        // 边框的宽度:
        button4.layer.borderWidth = 5.0;
        // 边框的颜色:(ps: color的类型需要转成CGColor)
        button4.layer.borderColor = [[UIColor blackColor] CGColor];
       
        [self.window addSubview:button4];

    //参数1: 定时器的秒数  参数2:目标对象  参数3 :响应的方法 参数4  nil   参数5 YES 重复调用/NO 只是调用一次
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateTimer:) userInfo:nil repeats:YES];
  • //    UIControlStateNormal       = 0,
  • //    UIControlStateHighlighted  = 1 << 0,                  // used when UIControl
  • //    UIControlStateDisabled     = 1 << 1,
  • //    UIControlStateSelected     = 1 << 2,
  • [btn3 setBackgroundImage:[UIImage imageNamed:@"MC_Checkbox_Unchecked"] forState:UIControlStateNormal];
        [btn3 setBackgroundImage:[UIImage imageNamed:@"MC_checkbox_Checked"] forState:UIControlStateSelected];
        // selected 属性切换选择状态的属性,如果selected = YES 是选择状态, 如果selected =NO 是正常状态
  • // control 可以让你的控件接收系统提供事件
        UIControl *control = [[UIControl alloc]initWithFrame:CGRectMake(0, 20, 100, 100)];
        control.backgroundColor  = [UIColor greenColor];
  • //   addTarget: 添加目标和事件
        // 参数一;目标对象
        // 参数二:响应的方法
        // 参数三监听事件
  • [control addTarget:self action:@selector(clickControl:) forControlEvents:UIControlEventTouchUpInside];
        [self.window addSubview:control];
  • //    UIControlEventTouchDown           = 1 <<  0, 按下时响应
  • //    UIControlEventTouchDownRepeat     = 1 <<  1,
  • //    UIControlEventTouchDragInside     = 1 <<  2, 按下在里面松手响应
  • //    UIControlEventTouchDragOutside    = 1 <<  3,
  • //    UIControlEventTouchDragEnter      = 1 <<  4,
  • //    UIControlEventTouchDragExit       = 1 <<  5,
  • //    UIControlEventTouchUpInside       = 1 <<  6,
  • //    UIControlEventTouchUpOutside      = 1 <<  7,
  • //    UIControlEventTouchCancel         = 1 <<  8,
 
   图片名称的后缀名是png的,可以省略,其他后缀名不能省略
 UIImage *image = [UIImage imageNamed:@"1.png"];
 设置button 的图片;
 如果图片的尺寸比button 的尺寸小, 图片一原来的尺寸显示
 如果图片的尺寸比button 的尺寸大, 图片以button 的尺寸显示
 btn3 setImage:image forState:UIControlStateNormal];
 设置button 的背景图片
 不管图片的比button 的大还是小,图片都是以button 的尺寸显示;
 [btn3 setBackgroundImage:image forState:UIControlStateNormal];
 UIControlStateSelected

UI Button的更多相关文章

  1. unity5,UI Button too small on device than in Game View解决办法

    假设测试设备为iphone5(横屏).下面说明如何使真机上ui显示效果与Game View中一致. 1,首先Game View左上角屏幕规格选 iPhone 5 Wide (16:9),如图: 2,在 ...

  2. unity5, UI Button &quot;On Button Down&quot;

    unity5自带的UI Button的Inspector面板中只有On Click事件,如果我们想让一个按钮响应On Button Down事件该怎么办呢?方法是: 点Add Component-&g ...

  3. Unity5UGUI 官方教程学习笔记(三)UI BUTTON

    Button Interactable :为了避免与该按钮产生交互,可以设置它为false Transition: 管理按钮在正常情况 ,按下,经过时的显示状态  None  按钮整正常工作 但是在按 ...

  4. Unity UI on the HoloLens

    Following the steps under "Required configuration" will allow Unity UI to continue to work ...

  5. 集成 Kendo UI for Angular 2 控件

    伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...

  6. 关于UI系统的问题

    function OnGUI(){ GUI.skin = myskin; if(GUILayout.Button("add_component",GUILayout.Height( ...

  7. cocos2dx 3.x(定时器或延时动作自动调用button的点击响应事件)实现自动内测

    // // ATTGamePoker.hpp // MalaGame // // Created by work on 2016/11/09. // // #ifndef ATTGamePoker_h ...

  8. cocos2dx 3.x(多个按钮button执行同一事件的区分)

    // // ATTGamePoker.hpp // MalaGame // // Created by work on 2016/10/18. // // #ifndef ATTGamePoker_h ...

  9. cocos2dx 3.x(Button传统按钮)

    // // ATTLoagingScene.hpp // ATT // // Created by work on 16/10/13. // // #ifndef ATTLoagingScene_hp ...

随机推荐

  1. 第三方FMDB的简单使用

    1,导入第三方头文件 #import "FMDB.h" //定义全局变量 @implementation InputInformationViewController { UITe ...

  2. asp.net中Cookie的用法【转】

    比如建立一个名为aspcn,值为灌水小鱼的cookie HttpCookie cookie = new HttpCookie["aspcn"];cookie.Value = &qu ...

  3. [POJ3177]Redundant Paths(双连通图,割边,桥,重边)

    题目链接:http://poj.org/problem?id=3177 和上一题一样,只是有重边. 如何解决重边的问题? 1.  构造图G时把重边也考虑进来,然后在划分边双连通分量时先把桥删去,再划分 ...

  4. Contoso 大学 - 使用 EF Code First 创建 MVC 应用

    原文 Contoso 大学 - 使用 EF Code First 创建 MVC 应用 Contoso 大学 Web 示例应用演示了如何使用 EF 技术创建 ASP.NET MVC 应用.示例中的 Co ...

  5. 从一个小例子认识SQL游标

    1    什么是游标: 关系数据库中的操作会对整个行集起作用. 例如,由 SELECT 语句返回的行集包括满足该语句的 WHERE 子句中条件的所有行. 这种由语句返回的完整行集称为结果集. 应用程序 ...

  6. 上海MVP见面会

    很愉快,很有收获的一次见面!

  7. bootstrap table 获取数据后的前台页面(后台怎么传就不必详细说明了吧)

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...

  8. js_提示是否删除小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 尚硅谷redis学习3-redis启动以后的杂项

    redis速度很快,运行benchmark可以看出,各项运行速度可达100000次每秒 redis默认有16个数据库,分别是0, 1 ... 15,默认在0号库,可以通过select num转到其它库 ...

  10. Redis 实现消息队列 MQ

    Redis 2.4版本之后就内置队列的功能了,如果是日常比较简单的队列应用,可以选择Redis , 效率还很高的!! Redis 还能实现 有序 和 无序 两种队列(只讨论生产者和消费者这种模式的队列 ...