Button的上下图文混排

最新推荐文章于 2022-11-03 17:31:49 发布
最新推荐文章于 2022-11-03 17:31:49 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： ios控件 文章标签： button上下图文混排 按钮图文上下 Button的图文设置混乱 UIButton 图文混排
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoushuangjian511/article/details/52680660
版权

先看效果


如何设置的公式是：



上面公式的测试demo:

代码如下：

/*

              *     * * * * * *** * *       *       *   *    * * *   *   *    * * *    *    * * *   * * * *

              * *   * *        *     *     * *     *  *   *  *   *   * *    *        *   *  *    *  *

              *   * * *****    *      *   *   *   *   *   *  * * *   *      *        *   *  *    *  * * * *

              *    ** *        *       * *     * *    *   *  *  *    * *    *        *   *  *    *  *

              *     * * * *    *        *       *       *    *   *   *   *    * * *    *    * * *   * * * *

 */

/*

    本demo的图片使用 Assets.xcassets 进行管理。

 */

//  ViewController.m

//  按钮的图文混排

//

//  Created by MAC on 16/9/26.

//  Copyright © 2016年 NetworkCode小贱. All rights reserved.

//


#import "ViewController.h"


@interface ViewController ()


@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    /*

    我们正常使用button显示一个图片

    [self showButtonImage];

    我们正常使用button显示一个文字

    [self showButtonText];

    我们进行正常的图文组合

    [self showButton_Image_Text];

    我想图片在右边的组合

    [self showButton_Text_Image];

     */

    /* 我们进行测试*/

    [self testButtonS];

    // Do any additional setup after loading the view, typically from a nib.

}

#pragma mark 只显示图片

-(void)showButtonImage{

    /* 初始化对象*/

    UIButton * ImageBtn = [UIButton buttonWithType:UIButtonTypeCustom];

    /* 设置大小*/

    ImageBtn.frame = CGRectMake(0, 0, 50, 50);

    ImageBtn.center = CGPointMake(self.view.center.x, self.view.center.y);

    /* 设置图片*/

    [ImageBtn setImage:[UIImage imageNamed:@"btn_0"] forState:UIControlStateNormal];

    /* 为按钮设置颜色*/

    ImageBtn.backgroundColor = [UIColor blueColor];

    /* 进行渲染*/

    [self.view addSubview:ImageBtn];

    

}

#pragma mark 只显示图片

-(void)showButtonText{

    /* 初始化对象*/

    UIButton * TextBtn = [UIButton buttonWithType:UIButtonTypeCustom];

    /* 设置大小*/

    TextBtn.frame = CGRectMake(0, 0, 60, 50);

    TextBtn.center = CGPointMake(self.view.center.x, self.view.center.y);

    /* 设置文字*/

    [TextBtn setTitle:@"成功QQ吧" forState:UIControlStateNormal];

    /*设置文字的颜色*/

    [TextBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    /* 为按钮设置颜色*/

    TextBtn.backgroundColor = [UIColor blueColor];

    /* 进行文字的大小适配*/

    TextBtn.titleLabel.adjustsFontForContentSizeCategory = YES;

    /* 让文字适合指定大小范围*/

    TextBtn.titleLabel.adjustsFontSizeToFitWidth = YES;

    /* 进行渲染*/

    [self.view addSubview:TextBtn];

}

#pragma mark 按钮的图文混合

-(void)showButton_Image_Text{

    UIButton * Button_Image_Text = [UIButton buttonWithType:UIButtonTypeCustom];

    /* 设置大小*/

    Button_Image_Text.frame = CGRectMake(0, 0, 120, 50);

    Button_Image_Text.center = CGPointMake(self.view.center.x, self.view.center.y);

    /* 设置图片*/

    [Button_Image_Text setImage:[UIImage imageNamed:@"btn_1"] forState:UIControlStateNormal];

    /* 设置文字*/

    [Button_Image_Text setTitle:@"成功QQ吧" forState:UIControlStateNormal];

    /*设置文字的颜色*/

    [Button_Image_Text setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    /* 为按钮设置颜色*/

    Button_Image_Text.backgroundColor = [UIColor blueColor];

    /* 进行文字的大小适配*/

    Button_Image_Text.titleLabel.adjustsFontForContentSizeCategory = YES;

    /* 让文字适合指定大小范围*/

    Button_Image_Text.titleLabel.adjustsFontSizeToFitWidth = YES;

    /* 进行渲染*/

    [self.view addSubview:Button_Image_Text];

}

#pragma mark 图片在右边的组合

-(void)showButton_Text_Image{

    UIButton * Button_Image_Text = [UIButton buttonWithType:UIButtonTypeCustom];

    /* 设置大小*/

    Button_Image_Text.frame = CGRectMake(0, 0, 120, 50);

    Button_Image_Text.center = CGPointMake(self.view.center.x, self.view.center.y);

    /* 设置图片*/

    [Button_Image_Text setImage:[UIImage imageNamed:@"btn_1"] forState:UIControlStateNormal];

    /* 设置文字*/

    [Button_Image_Text setTitle:@"成功QQ吧" forState:UIControlStateNormal];

    /*设置文字的颜色*/

    [Button_Image_Text setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    /* 为按钮设置颜色*/

    Button_Image_Text.backgroundColor = [UIColor blueColor];

    /* 进行文字的大小适配*/

    Button_Image_Text.titleLabel.adjustsFontForContentSizeCategory = YES;

    /* 让文字适合指定大小范围*/

    Button_Image_Text.titleLabel.adjustsFontSizeToFitWidth = YES;

    /* 进行按钮的调整*/

    /***********************************************************************************/

    /* 文右 图左 的组合*/

    [self setButtonContent:Button_Image_Text];

    /* 图上  文下*/

   // [self setButtonContentType:Button_Image_Text];

    /* 进行渲染*/

    [self.view addSubview:Button_Image_Text];

}

#pragma mark 进行设置按钮

-(void)setButtonContent:(UIButton*)setButton{

    /* 有人说进行数据的匹配进行设置就行了，不错设置多少？那就慢慢试试啊！。上面的想法不错，但是没有考虑到，如果我换一个手机，可不知，按钮的文字和图片进行混乱了*/

    /* 我们先获取按钮里面的两个对象，进行输出*/

    /* 文字对象 titleLable */

    NSLog(@"按钮的文字对象：%@",setButton.titleLabel);

    /* 文字输出：

       按钮的文字对象：<UIButtonLabel: 0x7fb560d09d00; frame = (72.5 25; 0 0); text = '成功QQ吧'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x6000000972a0>>

       解说：

           我们从 frame = (72.5 25; 0 0) 看到，我们只获取到了 origin 。而 size 我们并没有获取到。所以，我们根据文字对象的大小设置偏移是行不通的。

     */

    /* 图片对象 imageView*/

    NSLog(@"按钮的图片对象：%@",setButton.imageView);

    /* 图片输出：

       按钮的图片对象：<UIImageView: 0x7fb562809df0; frame = (6.5 12.5; 25 25); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x618000028d20>>

       解说：

       我们从 frame = (6.5 12.5; 25 25) 看到，我们只获取到了 origin 和 size。

     */

    /*

       按钮有一个量 titleEdgeInsets  和  imageEdgeInsets 这两个是可以控制图片或者文字的在按钮里面的位置函数

     */

    [setButton setTitleEdgeInsets:UIEdgeInsetsMake(0, -setButton.titleLabel.frame.origin.x+setButton.imageView.frame.origin.x, 0, setButton.titleLabel.frame.origin.x)];

    [setButton setImageEdgeInsets:UIEdgeInsetsMake(0, setButton.frame.size.width - setButton.imageView.frame.origin.x - setButton.imageView.frame.size.width, 0,setButton.imageView.frame.origin.x)];

}

#pragma mark 图上，文下的组合

-(void)setButtonContentType:(UIButton*)setButton{

    [setButton setTitleEdgeInsets:UIEdgeInsetsMake(setButton.imageView.frame.origin.y + setButton.imageView.frame.size.height, -setButton.imageView.frame.origin.x-setButton.imageView.frame.size.width, 10,-setButton.imageView.frame.origin.x)];

    [setButton setImageEdgeInsets:UIEdgeInsetsMake(0, (setButton.frame.size.width - setButton.imageView.frame.size.width)*0.5, 0,(setButton.frame.size.width - setButton.imageView.frame.size.width)*0.5)];

}

#pragma mark 图文混排的测试

-(void)testButtonS{

    /* 图片的源*/

    NSArray * ImageSource = @[[UIImage imageNamed:@"btn_0"],[UIImage imageNamed:@"btn_1"],[UIImage imageNamed:@"btn_2"],[UIImage imageNamed:@"btn_3"]];

    /* 文字的源*/

    NSArray * TitleSource = @[@"用户电话",@"用户密码",@"用户等级",@"用户成长"];

    /* 按钮的宽度*/

    float F = (self.view.frame.size.width - TitleSource.count +1)/ TitleSource.count;

    /* 进行创建按钮*/

    for (unsigned int i =0 ; i<TitleSource.count; i++) {

        UIButton * ButtonF = [UIButton buttonWithType:UIButtonTypeCustom];

        ButtonF.frame = CGRectMake(i*(F+1), 64, F, 60);

        ButtonF.layer.masksToBounds = YES;

        ButtonF.layer.borderColor = [UIColor redColor].CGColor;

        ButtonF.layer.borderWidth = 0.5;

        [ButtonF setImage:ImageSource[i] forState:UIControlStateNormal];

        [ButtonF setTitle:TitleSource[i] forState:UIControlStateNormal];

        ButtonF.titleLabel.font = [UIFont systemFontOfSize:15];

        [ButtonF setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

        /* 如果Button的文字显示不全，请使用下面的方法*/

        ButtonF.titleLabel.adjustsFontSizeToFitWidth = YES;

        /***********************************************************************/

        float  A = ButtonF.imageView.frame.origin.x;

        float  C = ButtonF.imageView.frame.size.width;

        float  D = ButtonF.imageView.frame.origin.y;

        float  G = ButtonF.imageView.frame.size.height;

        

        [ButtonF setImageEdgeInsets:UIEdgeInsetsMake(0, 0.5*(F-C), 0, 0.5*(F-C))];

        

        [ButtonF setTitleEdgeInsets:UIEdgeInsetsMake(D+G, -(A+C), 0, -A)];

        

        /***********************************************************************/


        [self.view addSubview:ButtonF];

    }

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}



@end
成功截图：


iOS的美丽岁月
关注
专栏目录
关于按钮（button）图文上下并存
晓天的博客
10-11 1716
由于APP要语言本地化，icon下还要有文字描述，导致切图不能带上文字；只好代码去控制了。实现方式如下：UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.backgroundColor = [UIColor clearColor]; //设置图片 UIImage *imageForBu
iOS图文混排
Zok93
08-18 1479
自定义NSAttributedString分类// NSAttributedString+Additon.h #import <UIKit/UIKit.h>@interface NSAttributedString (Additon)/// 使用图像和文本生成上下排列的属性文本 /// /// @param image 图像 /// @param imageWH 图像宽高 ///
UIButton 的图文混排
连锁销售郑秋冬
07-07 974
逻辑思路: button设置图片和文字后后再设置titleEdgeInsets属性和 imageEdgeInsets属性实现button的上图下文,上文下图,左图右文,右图左文的重新排列(自由设置图文间距)UIEdgInsets官方解释: Edge inset values are applied to a rectangle to shrink or expand the area repr
Button实现图文混排
weixin_33775572的博客
08-05 142
Button实现图文混排 一、简介 本文介绍两种图文混排方式 1、android:drawableTop="@drawable/star"实现文字上有图片 当然有上下左右等等 2、SpannableString的ImageSpan实现图文混排   二、代码实例 效果图： 一二三四是用的第一种方式 下面的用的第二种方式   代码： fry.Activity02 ...
自定义button,实现图片和文字上下排列，左右排列等等
fql_zlyy的专栏
05-21 2332
public class AlImageButtonView extends LinearLayout { private ImageView mButtonImage = null; private TextView mButtonText = null; private Context mContext; public AlImageButtonView(C
实现button的图文并茂
ablongfei的专栏
03-24 554
在项目的开发过程中，我们总要用到button控键，一般都是在button上加标题，或者给个效果图。但我们时常会 遇到图片，文字上下左右的界面设计，这个时候我们往往会添加几个button或者几个lable来实现这种效果，今天我们 再也不用这么麻烦了，只要一个button即可。下面是创建一个button的代码：  scanbutton = [UIButton buttonWith
xib Button 上同时显示文字和图片的处理
baihailing的博客
01-22 3986
最近比较闲，对之前踩过的坑做一个总结 为了实现这种类似的button，左边文字，右边图片，或者是左边图片，右边图片 方法一：xib 设置属性 在xib button 上有个属性，Semantic，Force Right-to-Left ,Force Left-to-Right Force Right-to-Left  是图片在右，文字在左，Force Left-to-Right 是正好相...
Android基本控件：button按钮
u012702039的专栏
01-07 1461
老罗视频学习笔记。 一.Button控件。 1）button焦点变化 基本用法就不多说了，主要记录下Button按钮焦点变化和图文混排的功能。 在之前TextView和EditText的项目中新添加一个menu选项，点击后弹出新的Activity，在新的ButtonActivity里实现功能。 首先继承OnClickListener,OnTouchListener,OnFocusChan
用UIButton实现各种图文结合功能
欧阳大哥的专栏
10-24 4939
UIButton中可以很简单的实现多个风格的图文混排，通过计算可以设置文本的偏移值titleEdgeInsets， 图片的偏移值imageEdgeInsets来实现图左文右、图右文左、图上文下、图下文上、图中文顶、图中文低、图中文上、图中文下等多种风格的图文混排布局。
iOS基础控件--UIButton
m0_37681833的博客
09-11 432
UIButton和UITextField一样都不是UIView的直接子类，都是UIView子类UIControl的子类。 UIButton介绍 UIButton是按钮控件，用于用户点击和程序进行交互。按钮的交互是最简单也是最直接的，只需要点击就可以进行操作，所以这个控件也是最常用的。按钮的知识点比较简单，比较难的一点就是按钮上图文排布上面，有的时候可能会因为设计需要我们要让按钮上的图片和文...
iOS13.6.1系统XR手机图文按钮显示不全问题
最新发布
jia12216的专栏
11-03 970
iOS13.6.1系统XR手机出来了奇怪的问题，图文按钮显示不全问题。比它老的系统或新的系统就是相同的手机都没有出现类似的问题。就是系统相同手机不同也没有出现该问题。 既然测试提出该问题，只能修改了。这是特定手机特定系统适配问题。 修改的思路是：把这个显示图片和文字的按钮拆分成按钮包含一个图片和一个标签，计算出他们的文字宽和图片宽。
使用button控制一个盒子显示隐藏 盒子mouseover事件失效
xywyxy的博客
06-21 414
代码 <div class="icr"> <el-row class="btn"> <el-button>实时态势</el-button> <el-button @click="changeSel">数据分析</el-button> </el-row> <div class="dSel" v-if="isShow"> <select class=
iOS Button的文字和图片上下或左右排列的方法
txz_gray的博客
03-07 6268
简单易懂实用的button设置文字图片排列的方法，mark了！转自：http://www.jianshu.com/p/3052a3b14a4e Button有两个属性：titleEdgeInsets和imageEdgeInsets，通过设置这两个，就可以实现所有需要的Button的样式，如：image在上、image在下、image在左、image在右。 在设置这两个之前，我们先要理解
ios 按钮的图片和文字上下排版
-此夜微凉
07-24 2127
主要是UIEdgeInsets这个属性btn.frame = CGRectMake(ScreenWidth/2-40, 20, 100, 100); btn.layer.masksToBounds = YES; btn.layer.cornerRadius = 3; [btn setTitle:@"添加新的银行卡" forState:0]; [btn setImage
iOS中如何把UIButton中的图片和文字上下对齐
iOS开发者-Ziank的总结
03-29 1151
我们都知道在UIButton中可以设置图片和文字，也经常见到同时设置有图片和下方提示文字的按钮，但是当我自己去对图片按钮添加提示文字的时候，却发现这并不是想象中的那么简单。 设置图片和文字 如示例代码： func initView() -> Void { var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100)) b
iOS_UIButton将image分别显示在上下左右
mikimo的博客
12-20 532
封装了图片按钮，可以设置图片位置，分别显示在上下左右； 利用 Mansory / SnapKit 调整按钮的位置。
iOS UIButton 图片文字上下垂直布局 解决方案
dearbaba_8520的博客
04-14 582
iOS UIButton 图片文字上下垂直布局 解决方案
CSS布局实例：图文混排与图像特效
"这篇CSS基础教程主要讲解了如何利用CSS进行图文混排、图像签名、多图拼接以及实现图片特效。教程强调了CSS布局中定位和浮动的重要性，并且介绍了CSS3的新特性，如box-shadow和transform属性。通过实例演示，展示了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值