当前位置: 移动技术网 > IT编程>移动开发>IOS > IOS 开发之自定义按钮实现文字图片位置随意定制

IOS 开发之自定义按钮实现文字图片位置随意定制

2019年07月24日  | 移动技术网IT编程  | 我要评论

男运动员尴尬,曹议文个人资料,迈凯轮f1

ios 开发之自定义按钮实现文字图片位置随意定制

可能有些看到这篇文章的朋友会觉得很不屑:“按钮谁不会自定义?还需要看你的?” 也确实,按钮是我们项目中最常见的控件之一,天天在使用。对于不同类型的按钮,我们是否有更加简便的方法来实现需求是我们需要做的。这里我提出自己的两种方法,您可以对你自己平时自定义按钮的方法做一下对比,看看哪种方法更加简单。

多说一句,千万不要觉得知识简单,觉得自己会了,没必要学习。'往往简单的东西存在大智慧'(这个比给满分),知识都是慢慢积累出来的。

按钮是应用中最常见的,最基本的一个控件。按钮的样式多种多样,系统默认样式为左右结构,图片在左边,文字在右边。系统按钮完全无法满足开发的需求,我们只能自己定制出想要的样式。既包含文字又包含图片的按钮有下面四种样式:

  • 图片在上,文字在下
  • 图片在左,文字在右
  • 图片在下,文字在上
  • 图片在右,文字在左

我们都知道,在按钮中可以通过设置图片和文字的内边距(uiedgeinsetsmake)来改变图片和文字的位置来满足我们的需求。当然这只是其中一个方法。还有一种方法是使用继承,创建一个类继承自uibutton,通过重写layoutsubviews方法,来改变按钮内部子控件的位置,从而达到我们的需求。 话不多说, 开整。

方法一:通过分类的方式实现

新建一个uibutton的分类,下面是具体声明和实现

#import <uikit/uikit.h>
// 定义一个枚举(包含了四种类型的button)
typedef ns_enum(nsuinteger, mkbuttonedgeinsetsstyle) {
  mkbuttonedgeinsetsstyletop, // image在上,label在下
  mkbuttonedgeinsetsstyleleft, // image在左,label在右
  mkbuttonedgeinsetsstylebottom, // image在下,label在上
  mkbuttonedgeinsetsstyleright // image在右,label在左
};

@interface uibutton (imagetitlespacing)

/**
 * 设置button的titlelabel和imageview的布局样式,及间距
 *
 * @param style titlelabel和imageview的布局样式
 * @param space titlelabel和imageview的间距
 */
- (void)layoutbuttonwithedgeinsetsstyle:(mkbuttonedgeinsetsstyle)style
            imagetitlespace:(cgfloat)space;

@end

再来看看实现文件

#import "uibutton+imagetitlespacing.h"

@implementation uibutton (imagetitlespacing)

- (void)layoutbuttonwithedgeinsetsstyle:(mkbuttonedgeinsetsstyle)style
            imagetitlespace:(cgfloat)space {
  /**
   * 知识点:titleedgeinsets是title相对于其上下左右的inset,跟tableview的contentinset是类似的,
   * 如果只有title,那它上下左右都是相对于button的,image也是一样;
   * 如果同时有image和label,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。
   */

  // 1. 得到imageview和titlelabel的宽、高
  cgfloat imagewith = self.imageview.frame.size.width;
  cgfloat imageheight = self.imageview.frame.size.height;

  cgfloat labelwidth = 0.0;
  cgfloat labelheight = 0.0;
  if ([uidevice currentdevice].systemversion.floatvalue >= 8.0) {
    // 由于ios8中titlelabel的size为0,用下面的这种设置
    labelwidth = self.titlelabel.intrinsiccontentsize.width;
    labelheight = self.titlelabel.intrinsiccontentsize.height;
  } else {
    labelwidth = self.titlelabel.frame.size.width;
    labelheight = self.titlelabel.frame.size.height;
  }

  // 2. 声明全局的imageedgeinsets和labeledgeinsets
  uiedgeinsets imageedgeinsets = uiedgeinsetszero;
  uiedgeinsets labeledgeinsets = uiedgeinsetszero;

  // 3. 根据style和space得到imageedgeinsets和labeledgeinsets的值
   /**
    mkbuttonedgeinsetsstyletop, // image在上,label在下
    mkbuttonedgeinsetsstyleleft, // image在左,label在右
    mkbuttonedgeinsetsstylebottom, // image在下,label在上
    mkbuttonedgeinsetsstyleright // image在右,label在左
   */
  switch (style) {
    case mkbuttonedgeinsetsstyletop:
    {
      imageedgeinsets = uiedgeinsetsmake(-labelheight-space/2.0, 0, 0, -labelwidth);
      labeledgeinsets = uiedgeinsetsmake(0, -imagewith, -imageheight-space/2.0, 0);
    }
      break;
    case mkbuttonedgeinsetsstyleleft:
    {
      imageedgeinsets = uiedgeinsetsmake(0, -space/2.0, 0, space/2.0);
      labeledgeinsets = uiedgeinsetsmake(0, space/2.0, 0, -space/2.0);
    }
      break;
    case mkbuttonedgeinsetsstylebottom:
    {
      imageedgeinsets = uiedgeinsetsmake(0, 0, -labelheight-space/2.0, -labelwidth);
      labeledgeinsets = uiedgeinsetsmake(-imageheight-space/2.0, -imagewith, 0, 0);
    }
      break;
    case mkbuttonedgeinsetsstyleright:
    {
      imageedgeinsets = uiedgeinsetsmake(0, labelwidth+space/2.0, 0, -labelwidth-space/2.0);
      labeledgeinsets = uiedgeinsetsmake(0, -imagewith-space/2.0, 0, imagewith+space/2.0);
    }
      break;
    default:
      break;
  }

  // 4. 赋值
  self.titleedgeinsets = labeledgeinsets;
  self.imageedgeinsets = imageedgeinsets;
}

@end

使用方法:只需要新建一个分类将上面的代码拷贝,直接导入到需要使用的类中,调用方法就可以了,具体见下

// 导入头文件
#import "uibutton+imagetitlespacing.h"
// 我们随意创建一个按钮比如button,在设置完按钮的图片、标题和frame后,只需要加上如下代码:
[button layoutbuttonwithedgeinsetsstyle: 这里填样式 imagetitlespace: 这里填写图片和文字的间距];

这样是不是很方便呢?

方法二:通过继承的方式实

新建一个继承自uibutton的类,重写layoutsubviews 方法,自己设置图片和文字的位置。

#import "tssquarebutton.h"

@implementation tssquarebutton

- (instancetype)initwithframe:(cgrect)frame {
  if (self = [super initwithframe:frame]) {
    // 设置图片的其他属性
    self.titlelabel.textalignment = nstextalignmentcenter;
    self.titlelabel.font = [uifont systemfontofsize:12.0];
    [self setbackgroundcolor:[uicolor whitecolor]];
    [self settitlecolor:[uicolor blackcolor] forstate:uicontrolstatenormal];
  }
  return self;
}

// 重写layoutsubviews方法,手动设置按钮子控件的位置
- (void)layoutsubviews {
  [super layoutsubviews];

  self.imageview.ts_width = self.ts_width * 0.4;
  self.imageview.ts_height = self.imageview.ts_width;
  self.imageview.ts_y = self.ts_height * 0.25;
  self.imageview.ts_centerx = self.ts_width * 0.5;

  self.titlelabel.ts_width = self.ts_width;
  self.titlelabel.ts_y = self.imageview.ts_buttom ;
  self.titlelabel.ts_height = 25;
  self.titlelabel.ts_x = 0;
}

@end

两种方式运行结果

总结:

至此,设置图片的两种方法就已经讲完了。对比一下:

第一种通过分类的方式设置按钮非常方便,只需要一行代码就足够了,不需要我们自己计算uiengeinsetsmake,适用于纯代码创建的按钮。 如果是xib创建的按钮就用不了了。

第二种通过继承的方式重写layoutsubviews的方式设置按钮好处是既适用于纯代码创建的按钮,也适用于xib创建的按钮,但是这种方法有一定的局限性,它只适用于同一类型的按钮。一类比如我一个界面中有几种不同类型的按钮,这时候就需要我们创建不同的继承uibutton 的按钮类,在layoutsubviews设置不同的位置关系。这样就相对复杂了。

两种方法各有利弊,各位可以根据自己的实际情况来选择使用。当然设置按钮图片和文字的位置并不止这两种方法,还有其他更好的方法等着我们去发现。如果你有什么更好的建议,也可以联系我,我们一同探讨学习。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • ios uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
移动技术网