【IOS】将字体大小不同的文字底部对齐

从WP转IOS了,还是放不下......

在项目中,要实现如图多个不同大小的文字   底部对齐的效果   像下面这样:

(想要的效果)

以为用三个UIFont不同的UILabel  之后让他们底部对齐就可以了,但是效果是下面这样的:

 (不想要的效果)

底部完全不对齐呀,为什么"1314"比两边高出了那么多呀!!!!强迫症不能忍呀!!!

--------------------------------------------------------------------------------

对比:

1.在Windows Phone中 控件是相对布局

Windows Phone里面TextBlock需要设置一个固定的 宽度  和 高度 (至少我是这样做的)

TextBlock不但可以将文字设置为水平居中、偏左、偏右,还可以通过属性

text.VerticalContentAlignment=Top/Center/Bottom将文字置于顶部/居中/底部。

2.在IOS中 控件是绝对布局: 对于一个控件  需要设置它的frame(包括起始位置、高和宽)

可以通过以下方法直接获取一个字符串的自适应的高度和宽度:(这点觉得比WindowsPhone好)

CGSize labelSize = [@"1314" sizeWithAttributes:@{NSFontAttributeName:kLabelFont}];

而原生的UIlabel只能设置textAlignment文字的水平偏移属性,而无法直接更改竖直方向的偏移。

WindowsPhone中要实现上面的效果,只需将三个TextBlock置底,TextBlock内容居下,即可对齐。

(这一点我突然的不确定了,好像很多时候我都是直接设置margin来手动对齐的,有空回WindowsPhone看看再修改。)

弯路:

所以在IOS处理这个问题的时候,我想着既然三个控件的底部都是对齐了的,只是高度不一样,能否仿照着WindowsPhone那样,

将较高UILabel的内容("1314")竖直偏移到最底下呢?

经过查阅  UILabel找到了这些:  

不能直接调用  只能通过继承来重写

// override points. can adjust rect before calling super. (在调用父类前  可以调整文本内容的位置TextRect)

// label has default content mode of UIViewContentModeRedraw

- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines;  //重写来重绘文字区域

- (void)drawTextInRect:(CGRect)rect;  //重写来重绘文本  重写时调用super可以按默认图形属性绘制

所以为了改变text的位置, 我们只需要改变textRectForBounds的返回值rect,并且根据这个rect重绘文本就可以了

1、关于contentMode,该模式为视图提供了多种模式用以适用框架矩形。如果对除UIVewContentModeRedraw之外的模式(如UIViewContentModeScaleToFill)都不满足需求,或者说有特定需要自定义绘制视图,可以设置为此值。那么将在视图适应框架矩形变化时缺省自动调用setNeedsDispllay或setNeedsDisplayInRect:,从而重绘视图。
2、而向视图发送setNeedsDisplay(或setNeedsDisplayInRect:)消息时,无论此时contentMode为何种模式,都将强制调用drawRect:

主要代码:(这个代码网上一大把,自己找去)

- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines
{          //方法里的形参bounds指的是UILabel的bounds
    CGRect rc = [super textRectForBounds:bounds limitedToNumberOfLines:numberOfLines];  //text的bounds
    switch (_verticalAlignment) {
        case VerticalAlignmentTop:
            rc.origin.y = bounds.origin.y;  
            break;
        case VerticalAlignmentBottom:
            rc.origin.y = bounds.origin.y + bounds.size.height - rc.size.height;
            break;
        case VerticalAlignmentMiddle:
        default:
            rc.origin.y = bounds.origin.y + (bounds.size.height - rc.size.height) / 2;
            break;
    }
    return rc;
}
- (void)drawTextInRect:(CGRect)rect
{
    CGRect rc = [self textRectForBounds:rect limitedToNumberOfLines:self.numberOfLines];
    [super drawTextInRect:rc];
}

然而发现:对于自适应宽高(CGSize)的Label, 设置了verticalAlignment属性基本上没多大区别

origin.x  origin.y 均为零   并且SIZE区别几乎没有  所有也不会有多大区别。

这里我进行了一个对比:对于字符串@"1314",设置不同的UIFont 观察UILabel和内部的textRect的大小差别

UIFont                                 1                                         50                                          100

rc(text)                1.000000,2.333333        105.666667,61.000000          208.666667,120.666667

bounds(label)      1.000000,2.193359        105.541992,60.667969          208.349609,120.335938

相差                                    0,0.139974             0.124675,0.332031                0.317058, 0.330729

rc居然还要比bounds大那么一点点,我认为为了文字不被截取,文字大小还是比其文字边框还要小的,

并且针对不同大小的UIFont或字体类型,这种小的程度还是不一样的。

所以就算设置verticalAlignment属性也发现不了什么区别。

如果只将文字大小设置更大,导致rc比bounds大,那么文字部分就可能会被截取;

如果只增加UILabel的大小,导致rc比bounds小,那么就会看到除了文字外多余的空白区域;

对于后两者,设置verticalAlignment属性,就能够明显的看到上下偏移了。

所以这种方案对于实现所需效果无效。

终点:

找呀找呀  又找到了另外一种方法,可以通过attributedText属性让UILabel显示富文本

实现一个字符串中包含不同颜色、字号等。

我封装了一个方法:

// 获取带有不同样式的文字内容
//stringArray 字符串数组
//attributeAttay 样式数组
- (NSAttributedString *)attributedText:(NSArray*)stringArray attributeAttay:(NSArray *)attributeAttay{
  // 定义要显示的文字内容
    NSString * string = [stringArray componentsJoinedByString:@""];  //拼接传入的字符串数组
  // 通过要显示的文字内容来创建一个带属性样式的字符串对象
    NSMutableAttributedString * result = [[NSMutableAttributedString alloc] initWithString:string];
        for(NSInteger i = 0; i < stringArray.count; i++){     // 将某一范围内的字符串设置样式
        [result setAttributes:attributeAttay[i] range:[string rangeOfString:stringArray[i]]];
    }
    // 返回已经设置好了的带有样式的文字
    return [[NSAttributedString alloc] initWithAttributedString:result];
}

以及其使用

   NSDictionary *attributesExtra = @{NSFontAttributeName:kLabelFont,//字号12
                                              NSForegroundColorAttributeName: [UIColor orangeColor]};
  NSDictionary *attributesPrice = @{NSFontAttributeName:kPriceFont,//字号18
                                               NSForegroundColorAttributeName: [UIColor orangeColor]};
  NSAttributedString *attributedString = [self attributedText:@[@"¥", @"1314", @"起"]
                                                 attributeAttay:@[attributesExtra,attributesPrice,attributesExtra]];
   UILabel *price = [[UILabel alloc]init];    price.attributedText = attributedString;
   CGRect rect = [attributedString boundingRectWithSize:CGSizeMake(self.width / 2, 100) options:NSStringDrawingUsesLineFragme    ntOrigin context:nil];  //此方法获取到的是自适应的Rect,而不是CGSize    最大Size值为CGSizeMake(self.width / 2, 100)   price.frame = CGRectMake(0,0,rect.size.width, rect.size.height);
时间: 2024-11-08 21:30:26

【IOS】将字体大小不同的文字底部对齐的相关文章

在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下.由www.169it.com 搜集整理 代码1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Transit

2015 IOS IOS_UIWebView字体大小、字体颜色、背景色——在蓝懿教育 学习笔记

前段时间需要修改webView背景色,上stackoverflow搜了很久没有找到结果,百度搜索,各种转载,各种坑爹,搜出来的都只有字体大小和字体颜色,页面背景没有看到,本人发布方法,希望可以帮助到更多人 在webView的delegate回调方法-webViewDidFinishLoad:(UIWebView*)webView;中写上一下语句即可 //字体大小 [webView stringByEvaluatingJavaScriptFromString:@"document.getEleme

IOS开发根据字体大小等获取文字所占的高度

Model *model = self.modelArr[indexPath.row]; //根据label文字获取CGRect NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc]init]; //set the line break mode paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping; NSDictionary *attrDi

Android-修改TabWidget字体大小颜色及对齐

在Android中,我们可以定义TabWidget来分页.在上一篇文章中有说到使用TabWidget定义Tab分页布局,但大部分用户可能会觉得默认的字体有点小,但Tab选项卡默认又不能设定字体大小,如果我们想要自定义样式,怎么办呢? 可以参考下面的定义方式来控制TabWidget中的标题样式:  //(重要:设定Taps的标题的字体大小.对齐方式等) for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) { //获取标题

iOS中通过设置CSS改变WebView字体大小,颜色,背景颜色

因为WebView自带的属性是不可以改变字体大小颜色这些需求的,只能通过改变css样式,内置来解决.在百度上搜了半天很多不靠谱,现在给出几种解决方案如下: 1.第一种方式:在WebView的代理方法webViewDidFinishLoad中: 字体大小: [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '12

根据html容器大小和显示文字多少调节字体大小

在做html相关的东西的时候经常会遇到这样的问题,容器大小(长x宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网页中所说的字体大小的px指的是字体的宽和高,也就是说在35px显示一个中文字符,该字符占去35x35的空间.知道这个之后,我们就可以想办法动态的根据容器大小和包含内容多少显示文字了. 首先要做的就是计算一个字符串的长短(一个中文字符记1个,一个英文字符记0.5个),我这里使用了简单的判断,当蚊子Un

如何调整chm文字字体大小

chm文档是使用用层叠样式表来控制字符大小的,通过IE的改变"文字大小"是没效果的,那我们是不是就没有办法改变它的大小了呢?显然不是的. 工具/原料 chm文件 方法/步骤 首先打开chm文件.发现这个字体在高分辨率下真的是小的可怜.   点击选项菜单   在弹出的菜单中点击Internet选项   选择 辅助功能   将"忽略网页上指定字号"勾选上.确定   现在你可以在chm文件中随意用"Ctrl+鼠标滚轮"的方法改变字体大小了. 如果解决了

iOS UILabel根据文本宽度改变字体大小

之前一直不知道有这样一个属性,看了这篇博文才知道 http://my.oschina.net/joanfen/blog/145184 myLabel.adjustsFontSizeToFitWidth = YES; //假设文字内容为@"曾在月光之下望烟花,曾共看夕阳渐降下",Label长度为200,则一行显示不下,若设置此属性为YES,则会降低字体大小,以显示全部内容.

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($