服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS应用UI开发中的字体和按钮控件使用指南

iOS应用UI开发中的字体和按钮控件使用指南

2021-01-05 12:22芳草小脚丫 IOS

这篇文章主要介绍了iOS应用UI开发中的字体和按钮控件使用指南,分别简单讲解了UILabel和UIButton的用法,需要的朋友可以参考下

uilabel的使用
一、初始化

复制代码 代码如下:

uilabel *mylabel = [[uilabel alloc] initwithframe:cgrectmake(40, 40, 120, 44)];
    
[self.view addsubview:mylabel];


二、设置文字

 

 ①、设置默认文本

复制代码 代码如下:

nsstring *text = @"标签文本";
mylabel.text = text;


效果:

 

iOS应用UI开发中的字体和按钮控件使用指南

②、设置标签文本(此属性是ios6.0之后才出现,如若不是必要,不建议使用此属性)

复制代码 代码如下:

nsstring *text = @"其实没什么";
    
nsmutableattributedstring *attributestring = [[nsmutableattributedstring alloc] initwithstring:text];
    
[attributestring setattributes:@{nsforegroundcolorattributename : [uicolor redcolor],   nsfontattributename : [uifont systemfontofsize:17]} range:nsmakerange(2, 1)];
    
mylabel.attributedtext = attributestring;


效果:

 

iOS应用UI开发中的字体和按钮控件使用指南

关键字标红的效果

复制代码 代码如下:

nsstring *keyword = @"脚本";
nsstring *result = @"服务器之家";
 
// 设置标签文字
nsmutableattributedstring *attritutestring = [[nsmutableattributedstring alloc] initwithstring:result];
 
// 获取标红的位置和长度
nsrange range = [result rangeofstring:keyword];
 
// 设置标签文字的属性
[attritutestring setattributes:@{nsforegroundcolorattributename : [uicolor redcolor],   nsfontattributename : [uifont systemfontofsize:17]} range:range];
 
// 显示在label上
label.attributedtext = attritutestring;


③、设置字体,如果是使用②中的文本,那在设置attributestring的属性时已经设置过font了和textcolor了,直接使用①设置文本时设置文本时,设置字体方法

复制代码 代码如下:

mylabel.font = [uifont systemfontofsize:13];


④、设置颜色

复制代码 代码如下:

mylabel.textcolor = [uicolor bluecolor];


⑤、设置对齐方式

复制代码 代码如下:


mylabel.textalignment = nstextalignmentcenter;//居中

 

nstextalignmentleft //左对齐
nstextalignmentcenter //居中
nstextalignmentright  //右对齐
nstextalignmentjustified//最后一行自然对齐
nstextalignmentnatural //默认对齐脚本


nstextalignmentjustified和 nstextalignmentnatural用的时候会报错,程序崩溃,暂时不知道什么时候可以使用,希望知道的指教一下,感激不尽。

 

⑥、文字剪裁方式

复制代码 代码如下:


nslinebreakbywordwrapping = 0,//以空格为边界,保留单词
nslinebreakbycharwrapping,    //保留整个字符
nslinebreakbyclipping,        //简单剪裁,到边界为止
nslinebreakbytruncatinghead,  //按照"……文字"显示
nslinebreakbytruncatingtail,  //按照"文字……文字"显示
nslinebreakbytruncatingmiddle //按照"文字……"显示

 

mylabel.linebreakmode = nslinebreakbytruncatinghead;


⑦、设置label enabled属性
如果设置为no,则文字颜色会变暗,表明其是不可用的,默认值为yes。

复制代码 代码如下:

mylabel.enabled = no;


三、匹配label上的文字
①、是否根据文本宽度改变字体大小

复制代码 代码如下:

mylabel.adjustsfontsizetofitwidth = yes;


假设文字内容为@"曾在月光之下望烟花,曾共看夕阳渐降下",label长度为200,则一行显示不下,若设置此属性为yes,则会降低字体大小,以显示全部内容。
前后对比:

 

iOS应用UI开发中的字体和按钮控件使用指南

iOS应用UI开发中的字体和按钮控件使用指南

②、改变字母之间的间距来适应label大小
当这个属性是yes,标签可能改变标签文本的字母间距,以使该文本更适合标签的边界内。此属性的字符串,而不管当前行的行的裁剪模式。该属性的默认值是no。

复制代码 代码如下:

mylabel.adjustsletterspacingtofitwidth = no;


个人使用了一下,没发现有什么区别,不知道具体是什么时候发挥作用。
③、设置对齐基线

复制代码 代码如下:


mylabel.adjustsfontsizetofitwidth = yes;//调整基线位置需将此属性设置为yes

 

mylabel.baselineadjustment = uibaselineadjustmentalignbaselines;


此属性有三个值可选

复制代码 代码如下:

uibaselineadjustmentalignbaselines //文本最上端与label中线对齐,默认值
uibaselineadjustmentaligncenters   //文本中线与label中线对齐
uibaselineadjustmentnone           //文本最下端与label中线对齐


④、最小字体大小,当字体小于这个最小值时无效,显示此属性值
ios6.0之前:minimumfontsize

 

ios6.0之后:minimumscalefactor

mylabel.minimumscalefactor = 10.0;//默认值为0,为当前字体大小
⑤、行数

复制代码 代码如下:

mylabel.numberoflines = 2;//label行数


⑥、高亮

复制代码 代码如下:

mylabel.highlighted = yes;//是否高亮
mylabel.highlightedtextcolor = [uicolor redcolor];//高亮颜色;此属性在设置按钮的titlelabel时,无论highlighted是yes还是no,在按钮按下时标题都显示此高亮颜色


⑦、阴影

复制代码 代码如下:

mylabel.shadowcolor = [uicolor graycolor];//阴影颜色,默认为nil
mylabel.shadowoffset = cgsizemake(1, 1);//阴影的偏移点


四、label位置
①、计算uilabel 随字体多行后的高度

复制代码 代码如下:

cgrect result,bounds;
bounds = cgrectmake(0, 0,200, 300);
heightlabel = [mylabel textrectforbounds:bounds limitedtonumberoflines:20];//计算20行后的label的frame
nslog(@"%f",heightlabel.size.height);


②、绘制text到指定区域

复制代码 代码如下:

- (void)drawtextinrect:(cgrect)rect
//需要重载此方法,然后由子类调用,重写时调用super可以按默认图形属性绘制,若自己完全重写绘制函数,就不用调用super了

 

uibutton的简单使用
button(按钮)是使用最频繁的控件之一,uibutton的使用并不难,但是有一点必须要注意

uibutton默认type是rounded rect button,这个形态是不被app store所接受的,即便是你给这个button添加了背景图片,不再是rounded rect 的外观,还是会被app store所拒,总之button的类型不能是rounded rect。
一、uibutton的外观

 1.1 uibutton有6种类型, 如下图所示

复制代码 代码如下:

uibuttontypecustom         
uibuttontyperoundedrect        
uibuttontypedetaildisclosure
uibuttontypeinfolight
uibuttontypeinfodark
uibuttontypecontactadd

 

 

iOS应用UI开发中的字体和按钮控件使用指南

1.2 设置buttontype

复制代码 代码如下:

uibutton *button = [[uibutton alloc] initwithframe:cgrectmake(10, 10, 100, 44)];
 
[uibutton buttonwithtype:uibuttontypecustom];


二、设置背景图片

 

2.1可以设置正常状态,不可点击状态,选中状态等各种形态下的背景图片

复制代码 代码如下:

// 正常状态下的图片
    [button setbackgroundimage:[uiimage imagenamed:@"normal.png"] forstate:uicontrolstatenormal];
 
    // 点击后的图片
    [button setbackgroundimage:[uiimage imagenamed:@"pressed.png"] forstate:uicontrolstateselected];


2.2 可延伸的图片,有一张26*46的图片,但是按钮是100*46,这时将图片延伸一下效果就会很好,这样的话可以使得项目中的图片文件比较小,为项目瘦身,qq的会话气泡也是利用此种方法达到延伸的效果,先上对比图

 

iOS应用UI开发中的字体和按钮控件使用指南

 

复制代码 代码如下:

uiimage *buttonnormal = [uiimage imagenamed:@"button-white-part"];
 
// 进行宽度上的延伸,如果要进行高度上的延伸,改变第一个和第三个参数的值,此方法是保证图片边缘的框架的前提下对图片中间进行高度或者宽度的延伸  
uiimage *stretchnormal = [buttonnormal resizableimagewithcapinsets:uiedgeinsetsmake(0, 15, 0, 30)];
 
[button setbackgroundimage:stretchnormal forstate:uicontrolstatenormal];


三、按钮事件

 

按钮事件还有好多种,可以自行查看文档

复制代码 代码如下:

[button addtarget:self action:@selector(buttonpress:) forcontrolevents:uicontroleventtouchupinside];
 
// 点击事件
- (ibaction)buttonpress:(id)sender {
   nslog("@"button pressed!");
}


以上是代码添加。
四、xib添加

 

4.1 在view中拖动一个button放入画布

iOS应用UI开发中的字体和按钮控件使用指南

4.2 设置button属性

iOS应用UI开发中的字体和按钮控件使用指南

4.3 创建映射,以及按钮事件
选中xib,点击xcode右上方的editor

iOS应用UI开发中的字体和按钮控件使用指南

,让一个界面为xib,另一个界面为其对应的.h文件。

选中button 右键拖拽出一条线到.h文件@interface与@end之间的位置,如果要创建映射则选择iboutlet,创建按钮事件则选择action,填写完成后点击connet即可

iOS应用UI开发中的字体和按钮控件使用指南

在.m文件中会出现所创建的点击事件,在方法里完成对应的操作即可。

延伸 · 阅读

精彩推荐
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04