自定义button布局

朴灿烈づ我的快乐病毒、 2022-08-20 08:28 194阅读 0赞

![Center][]

**先看图，众所周知，一个button上面有一个imageview和一个titleLabel,有时候我们需要根据需求及美观来改变他们的排布，以上就是两种最常见的排布**

**做法如下**：

**首先**创建一个继承自UIButton的类，并且做基本的初始化设置

\#import <UIKit/UIKit.h>

@interface CustomButton :  UIButton

@end

\- (instancetype)initWithFrame:(CGRect)frame

\{

self = \[superinitWithFrame:frame\];

if(self)\{

// 高亮的时候不要自动调整图标

self.adjustsImageWhenHighlighted =NO;

// self.titleLabel.font = \[UIFont boldSystemFontOfSize:17\];

self.imageView.contentMode = UIViewContentModeScaleAspectFit;

\[selfsetImage:\[UIImageimageNamed:@"378-close"\]forState:UIControlStateNormal\];

\[selfsetTitle:@"300"forState:UIControlStateNormal\];

self.titleLabel.textAlignment =NSTextAlignmentCenter;

self.layer.cornerRadius =2;

\}

return self;

\}

下面重点来了！通过button自带的内部控件的布局方法来达到我们想要的效果即可

//对button内部的imageView进行布局，注意宽度这里是100

\- (CGRect)imageRectForContentRect:(CGRect)contentRect

\{

CGFloat imgY =  50;

CGFloat imgW =  100;

CGFloat imgX =0;

CGFloat imgH =  50;

return CGRectMake(imgX, imgY, imgW, imgH);

\}

//对button内部的titleLabel进行布局

\- (CGRect)titleRectForContentRect:(CGRect)contentRect

\{

CGFloat titleY =  0;

CGFloat titleX =  0;

CGFloat titleW =  100;

CGFloat titleH =  50;

return CGRectMake(titleX, titleY, titleW, titleH);

\}

![Center 1][]

（效果图1）

至此，我们就弄出button的标题在上方，imageView在下方的效果！

同理，只要稍作修改，就可以改成左右排布

//对button内部的imageView进行布局，注意宽度这里是50

\- (CGRect)imageRectForContentRect:(CGRect)contentRect

\{

CGFloat imgY =  0;

CGFloat imgW =  50;

CGFloat imgX =  50;

CGFloat imgH =  100;

return  CGRectMake(imgX, imgY, imgW, imgH);

\}

//对button内部的titleLabel进行布局

\- (CGRect)titleRectForContentRect:(CGRect)contentRect

\{

CGFloat titleY =  0;

CGFloat titleX =  0;

CGFloat titleW =  50;

CGFloat titleH =  100;

return CGRectMake(titleX, titleY, titleW, titleH);

\}

![Center 2][]

（效果图2）

[Center]: /images/20220731/a36ab547c73c4903bea98e9167352e7f.png
[Center 1]: /images/20220731/179ed06185064e2f8e5bf543f6d548ef.png
[Center 2]: /images/20220731/664e9413b59d4d5ba983cab8f359dd9c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android自定义Button样式

Android自定义Button样式在Android开发中，我们经常需要自定义Button的样式，以满足特定设计需求或者使按钮与应用程序风格保持一致。本文将介绍如何通过修改

女爷i/ 2023年10月14日 22:43/ 0 赞/ 23 阅读

相关自定义Button

将Button自定义 Customizing Button 在qt帮助文档里 Button 由两部分组成，背景和文本，background and contentite

骑猪看日落/ 2023年08月17日 15:44/ 0 赞/ 84 阅读

相关自定义button布局

![Center][] 先看图，众所周知，一个button上面有一个imageview和一个titleLabel,有时候我们需要根据需求及美观来改变他们的排布，以上就是两种最

朴灿烈づ我的快乐病毒、/ 2022年08月20日 08:28/ 0 赞/ 195 阅读

相关自定义布局机制

公司项目中有一个控件自动换行需求，也就是从在ViewGroup中布局子View时根据view的大小，自动换行，根据这个需求，我开始研究android布局的源码，android控

淩亂°似流年/ 2022年08月19日 01:57/ 0 赞/ 126 阅读

相关自定义Button 直接设置selector

Custom button that can implement click effect don't need create a selector.xml How T

朱雀/ 2022年08月12日 12:59/ 0 赞/ 151 阅读

相关 Android button自定义样式显示

一个好的APP从直观上最能吸引用户的必定是好看的UI界面及良好的交互体验和特效，有时甚至连主要功能都是次要的！好吧，软件也到了拼脸的时代，主要看气质！所以这篇文章就聊聊b

ゝ一世哀愁。/ 2022年07月25日 16:35/ 0 赞/ 216 阅读

相关 iPhone基础开发之自定义Button

在绝大部分IOS应用的开发过程中，都不会使用IB，使用代码自定义界面控件尤其重要。本文就介绍下如何用代码自定义BUTTON控件。 UIButt

偏执的太偏执、/ 2022年06月17日 22:19/ 0 赞/ 192 阅读

相关 Android自定义布局属性

Android自定义布局属性自定义属性的步骤 1.自定义xml文件 2.布局中使用 3.代码中使用 1.自定义xml文件 <?xml vers

清疚/ 2022年06月14日 00:49/ 0 赞/ 260 阅读

相关自定义布局-ScrollLayout

原文地址：[http://www.cnblogs.com/wader2011/archive/2011/10/10/2205142.html][http_www.cnblogs

深碍√TFBOYSˉ_/ 2022年06月02日 03:52/ 0 赞/ 162 阅读

相关 React Native 封装自定义的Button

import React, { Component } from 'react'; import { StyleSheet, V

清疚/ 2022年05月09日 13:46/ 0 赞/ 236 阅读