05-按钮的基本使用

按钮的基本使用

什么是按钮

  • UIKit框架提供了非常多的UI控件,但并不是每一个都很常用,有些控件可能1年内都用不上,有些控件天天用,比如UIButton、UILabel、UIImageView、UITableView等等
  • 现在就先来学习非常重要且比较基础的一个UI控件---UIButton,俗称“按钮”
  • 一般情况下,点击某个控件后,会做出相应反应的都是按钮
  • 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置

小案例

  • 接下来通过一个小案例来研究按钮的基本使用

掌握

  • 使用代码创建、添加控件
  • 分别通过 storyboard 和 代码 设置按钮在不同状态的背景、文字、文字颜色
  • 分别通过 storyboard 和 代码 监听按钮点击
  • 修改控件的位置和尺寸
  • 制作简单的动画效果
  • 掌握frame、center、bounds、transform的使用

作业

  • 使用纯代码的方式重写关于按钮使用的小案例(不要拖控件)

添加图片资源

  • 从Xcode5开始,图片资源都放到Images.xcassets中进行管理
  • 添加项目中用到的图片到Images.xcassets中

修改控件的尺寸

  • 下图是在设置控件的尺寸为35x35

去除autolayout

  • 如果发现通过代码无法修改控件的位置或者尺寸时,应该去掉storyboard里面的autolayout功能,这是自iOS6开始出现的特性
  • 顾名思义,autolayout是用来自动布局的,用来束缚控件的位置和尺寸。去掉这个功能,控件的位置和尺寸就不再有一些固定的束缚。

UIButton的状态

  • normal(普通状态)
  1. 默认情况(Default)
  2. 对应的枚举常量:UIControlStateNormal

  • highlighted(高亮状态)
  1. 按钮被按下去的时候(手指还未松开)
  2. 对应的枚举常量:UIControlStateHighlighted

  • disabled(失效状态,不可用状态)
  1. 如果enabled属性为NO,就是处于disable状态,代表按钮不可以被点击
  2. 对应的枚举常量:UIControlStateDisabled

设置按钮的背景图片

  • 设置按钮在不同状态下的背景图片 (为了保证高亮状态下的图片正常显示,必须设置按钮的type为custom)

设置头像按钮

  • 普通状态:红色文字“点我啊”
  • 高亮状态:蓝色文字“摸我干嘛”

修改头像按钮的位置

  • 通过修改控件的frame属性就可以修改控件在屏幕上的位置和尺寸
  • 比如点击“向上”按钮,让按钮的y值减小即可

- (IBAction)top:(UIButton *)sender

{

     CGRect btnFrame = self.headBtn.frame;

      btnFrame.origin.y -= 10;

     self.headBtn.frame = btnFrame;

}

  • 下面代码是错误的,OC语法规定:不允许直接修改对象的结构体属性的成员

self.headBtn.frame.origin.y -= 10;

代码创建按钮

  • 在开发过程中,并不是每次都通过storyboard拖控件完成UI界面,因为storyboard上面的界面是“固定死”的,有时候可能会在程序运行过程中动态地添加一些新的控件到界面上
  • 比如QQ的聊天信息,是有人发出一条信息后才动态显示出来的。因此,需要掌握如何用代码动态地添加控件
  • 实际上,storyboard的本质就是根据图形界面描述转成相应的代码

Storyboard到代码的转换

实现简单动画

  • 在iOS开发中,想实现一些小动画是非常容易的
  1. 系统会根据某个属性值的改变自动形成动画
  2. 比如x值本来是10,然后x值突然改为了100,系统会通过平移动画的方式让x值慢慢从10变到100
  • 简易动画大致有2种方式:
  1. 头尾式

  [UIView beginAnimations:nil context:nil];

  /** 需要执行动画的代码 **/

  [UIView commitAnimations];

  • Block式

  [UIView animateWithDuration:0.5 animations:^{

    /** 需要执行动画的代码 **/

  }];

修改控件的位置和尺寸

  • 通过以下属性可以修改控件的位置
  1. frame.origin
  2. center
  • 通过以下属性可以修改控件的尺寸
  1. frame.size
  2. bounds.size

transform属性

  • 利用transform属性可以修改控件的位移(位置)、缩放、旋转
  • 创建一个transform属性
  1. CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) ;
  2. CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy);
  3. CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)
  4. (angle是弧度制,并不是角度制)
  • 在某个transform的基础上进行叠加
  1. CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty);
  2. CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy);
  3. CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle);
  • 清空之前设置的transform属性
  1. view.transform = CGAffineTransformIdentity;

常见类型

  • 一个UIColor代表一种颜色,通过UIColor的类方法,可以获得很多常用的颜色
  1. + (UIColor *)blackColor; // 0.0 white 黑色
  2. + (UIColor *)darkGrayColor; // 0.333 white 深灰色
  3. + (UIColor *)lightGrayColor; // 0.667 white 亮灰色
  4. + (UIColor *)whiteColor; // 1.0 white 白色
  5. + (UIColor *)grayColor; // 0.5 white 灰色
  6. + (UIColor *)redColor; // 1.0, 0.0, 0.0 RGB 红色
  7. + (UIColor *)greenColor; // 0.0, 1.0, 0.0 RGB 绿色
  8. + (UIColor *)blueColor; // 0.0, 0.0, 1.0 RGB 蓝色
  9. + (UIColor *)cyanColor; // 0.0, 1.0, 1.0 RGB 青色
  10. + (UIColor *)yellowColor; // 1.0, 1.0, 0.0 RGB 黄色
  11. + (UIColor *)magentaColor; // 1.0, 0.0, 1.0 RGB 品红
  12. + (UIColor *)orangeColor; // 1.0, 0.5, 0.0 RGB 橙色
  13. + (UIColor *)purpleColor; // 0.5, 0.0, 0.5 RGB 紫色
  14. + (UIColor *)brownColor; // 0.6, 0.4, 0.2 RGB 棕色
  15. + (UIColor *)clearColor; // 0.0 white, 0.0 alpha 清除颜色(空色)
  • 一个UIImage对象代表一张图片,一般通过imageNamed:方法就可以通过文件名加载项目中的图片

  (文件名可以省略扩展名)

  UIImage *image = [UIImage imageNamed:@"btn_01"];

按钮的样式

  • 实际上,UIButton自带了很多种不同的样式
  • 在用代码创建按钮的同时指定按钮样式

   UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

  1. UIButtonTypeCustom:无类型,按钮的内容需要自定义
  2. UIButtonTypeDetailDisclosure:
  3. UIButtonTypeInfoLight:
  4. UIButtonTypeInfoDark:
  5. UIButtonTypeContactAdd
时间: 2024-10-10 14:03:58

05-按钮的基本使用的相关文章

微信小程序组件解读和分析:七、button按钮

button按钮组件说明: button,顾名思义,按钮,类似于html的button标签.我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件. button按钮组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-text&q

【博客美化】07.添加打赏按钮

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 1.添加打赏按钮 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <!--打赏 Start--> <script> window.tctipConfig = { staticP

NGUI使用3——制作图集&amp;自定义按钮&amp;切换按钮图片

1,准备素材新建一个文件夹,命名为UITexture. 2,创建Atlas在Project面板中,进入UITexture 文件夹,选中这两张图片,然后 右键-->[NGUI]-->[Atlas Maker],之后你会看到 Atlas Maker 的界面:在 Atlas Maker 界面中,点击[Create]按钮. 之后给这个Atlas 起名为MyAtlas.prefab,点击[保存]. 3,预览Atlas和Sprite保存之后,这个新的Atlas 就创建好了.可以点击一下[View Spri

WPF 如何绘制不规则按钮,并且有效点击范围也是不规则的

最近在做一个东西,如地图,点击地图上的某一区域,这一区域需要填充成其他颜色.区域是不规则的,而且点击该区域的任一点,都能够变色.普通的按钮只是简单的加载一幅图肯定是不行的.查了很多资料,终于把它搞定了.实现方法不是原创,也是参照了网上的实现. 具体的思想:就是根据图片文件来画这个按钮,画出的按钮,形状正好是该图片的样子. 这里的图片是有要求的,背景必须是透明的PNG图片,而且该图片必须是建立了路径的. 样式实现: <Style x:Key="ButtonStyle_Custom"

[小北De编程手记] : Lesson 05 - Selenium For C# 之 API 下

上一篇,我们介绍了一些Selenium WebDriver相关的API,下面我们就接着上一篇继续介绍Selenium常用的API,这一篇的内容主要涉及到以下话题: Selenium API:复杂事件处理 Selenium API:特殊DOM元素处理 Selenium API:截图功能 Selenium API:关于框架扩展 (一)Selenium API:复杂事件处理 首先,我们试想一下这样的场景.待测试的系统支持一些组合键的操作,例如:按住Ctrl的同时点击某个表格的某个单元格,该数据行会高亮

【转】【译】【Win10】在你的程序标题栏中显示后退按钮

原文地址:http://www.sharpgis.net/post/2015/05/21/Displaying-a-backbutton-in-your-app-window 免责声明:这篇文章基于 Windows 10 技术预览版 10122.这可能会在未来发生改变. 在 Windows 10 中,有一些应用,在它们顶部的标题栏里,有一个后退按钮.例如设置中: 我们可以使用 SystemNavigationManager 的 AppViewBackButtonVisibility 属性来控制是

(转)RadioButton左侧显示文字,右侧显示按钮时文字不靠边的问题解决

作者:  发布日期:2014-02-13 21:00:45 我来说两句(0) 0 Tag标签:RadioButton  左侧  显示 项目中有一个这样的需求: 下面三行点击某行即选中,颜色变深.自然的想到使用RadioButton因此决定使用RadioButton和RadioButton实现. 1.RadioButton实现上述效果 view sourceprint? 01.<RadioButton 02.android:id="@+id/rbAll" 03.android:la

MFC DAY03 04 05

一 MFC的消息映射机制(3) 1 消息映射机制的使用 1.1 自己的类必须派生自 CCmdTarget 1.2 自己的类内 必须添加声明宏 DECLARE_MESSAGE_MAP 1.3 自己的类外 必须添加实现宏 BEGIN_MESSAGE_MAP( theClass, baseClass ) END_MESSAGE_MAP( ) 2 消息映射机制的实现 2.1 数据结构 struct AFX_MSGMAP_ENTRY (静态数组的每个元素) { UINT nMessage; // 消息ID

1-10(退出键盘,设置按钮的背景图,transform属性,imageView序列帧动画,九宫格算法...)

(1-10目录) 1.取得2个文本输入框的值 2.退出键盘 3.设置按钮的背景图 4.执行动画 5.手动创建按钮以及设置按钮的一些基本属性 6 transform属性 7.imageView序列帧动画 8.九宫格算法 9.通过xib创建局部控件,利用模型封装加载数据 10设置状态栏的样式为白色 { 扯淡环节: 工作这么久了, 发现一些细节有时候总是忽略, 现在就把我刚接触时的知识点给整理出来!, 没事自己看看, 也分享给大家! 分享,创造快乐!哈哈 xq每天都生活在快乐当中, 愿你们也是! }

【博客美化】08.添加&quot;扩大/缩小浏览区域大小&quot; 按钮

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 [博客美化]08.添加"扩大/缩小浏览区域大小" 按钮 1.页首添加HTML代码 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <div id="divExpan