【问题标题】:How can I insert an image in a UILabel, or make it look like I did?如何在 UILabel 中插入图像,或者让它看起来像我一样?
【发布时间】:2012-07-09 03:54:46
【问题描述】:

我正在编写一个基于几何的应用程序。在应用程序的某一时刻,会有一个带有一些自定义单元格的 UITableView。这些单元格包含 UILabel。在这些标签的文本中,我想插入看起来像这两个三角形的符号:
(来源:wiley.com

但是,由于我在任何 Apple 字体中都找不到这些符号,有没有办法在字符串中插入图像来代替符号?

这是一个(非常)粗略的想法(实际表格不会是静态的):

【问题讨论】:

    标签: iphone ios uilabel


    【解决方案1】:

    您不能在 UILabel 中插入图像。 但是你可以在你的 UITableView 的自定义单元格中添加一个 UIImageView,然后在里面放一个 UIImage。

    【讨论】:

    • 是的,我很确定这就是答案。但是我怎样才能在插入的图像周围环绕我的文本呢?
    • @Garrett 如果您希望文本环绕图像,您可能需要研究转移到 UIWebView,您可以在其中以编程方式创建 HTML。
    • 是的,我认为这是更好的方法。
    • @Garrett 我相信有更好的例子,但这里有一个简单的例子来说明如何用文本和图像填充 UIWebView:stackoverflow.com/questions/11247777/…。您必须设计自己的 HTML 字符串,但希望这会为您指明正确的方向。
    • 另一个值得研究的选项是将一些已经包含符号的字体包含到您的包中。
    【解决方案2】:
    1. 制作一个 UILabel 并为每个字母使用该 UILabel 的实例。
    2. 使用一些关于图像视图矩形的几何逻辑来放置字母而不考虑大小......例如

          UILabel *aLetterLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
          aLetterLabel.text = @"A";
      
          //centered top
          aLetterLabel.frame = CGRectMake((shapeImage.frame.origin.x +  (shapeImage.frame.size.width/2)), shapeImage.frame.origin.y, 35, 35);
      
          //centered
          aLetterLabel.frame = CGRectMake((shapeImage.frame.origin.x + (shapeImage.frame.size.width/2)), (shapeImage.frame.origin.y + (shapeImage.frame.size.height/2)), 35, 35);
      
          //cenetered bottom
          aLetterLabel.frame = CGRectMake((shapeImage.frame.origin.x + (shapeImage.frame.size.width/2)), (shapeImage.frame.origin.y+(shapeImage.frame.size.height-35)), 35, 35);
      
          //left center align
          aLetterLabel.frame = CGRectMake(shapeImage.frame.origin.x, (shapeImage.frame.origin.y + (shapeImage.frame.size.height/2)), 35, 35);
      

    将这些作为概念证明写得非常快...随时修改,等等。

    【讨论】:

    • 除了创建这么多 UILabel 之外,还有其他选择吗?这似乎是非常低效的,尤其是在 UITableViewCell 中。
    • 如果你真的想把它们放在表格视图中,我会说你需要为这些形状制作带有预先渲染的字母的图像......
    • 如果你能以某种方式在表格视图之外使用这些,根据我的理解,UILabel 是一个非常轻量级的 UIKit 元素,所以我不会担心。我唯一担心的是 tableview 出列单元格会导致很多问题,尤其是不同的形状和标签配置
    【解决方案3】:

    好的,我明白你想要做什么。我认为,关键是继续向单元格添加控件,并在执行过程中计算宽度。

    首先,我建议使用一种数据结构来保存您的单元格内容。一个简单的数组就可以完成这项工作。我通常将这些东西作为 ivar:

    @interface LabelWithImagesViewController ()
    {
        NSMutableArray *_cells;
    }
    @end
    

    然后用你想要的文本和图像填充这个数组。我正在做单行,但你可以为你需要的每一行重复。

    - (void)viewDidLoad
    {
        [super viewDidLoad];
    
        _cells = [[NSMutableArray alloc] init];
    
        [_cells addObject:[[NSArray alloc] initWithObjects:
                           [UIImage imageNamed:@"triangle.png"],
                           @"CAT",
                           [UIImage imageNamed:@"semiequal.png"],
                           [UIImage imageNamed:@"triangle.png"],
                           @"DOG",
                           @"  If",
                           [UIImage imageNamed:@"triangle1.png"],
                           @"then",
                           [UIImage imageNamed:@"triangle2.png"],
                           nil]];
    }
    

    然后,您需要创建您的单元格:

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        // Return the number of rows in the section.
        return _cells.count;
    }
    
    #define kEquationTag 100
    #define kCellHeight 44
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"equationCell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        UIView *equationContainer;
    
        if (cell == nil)
        {
            // if we don't have a cell create it, including the frame to hold our custom stuff
    
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    
            equationContainer = [[UIView alloc] initWithFrame:cell.contentView.bounds];
            equationContainer.tag = kEquationTag;
            [cell.contentView addSubview:equationContainer];
        }
        else
        {
            // if we are dequeing one that already exists, let's get rid of the old custom stuff
    
            equationContainer = [cell.contentView viewWithTag:kEquationTag];
            for (UIView *view in equationContainer.subviews)
            {
                [view removeFromSuperview];
            }
        }
    
        // Configure the cell...
    
        NSArray *cellContents = [_cells objectAtIndex:indexPath.row];
    
        NSUInteger x = 0;
        UIFont *font = [UIFont systemFontOfSize:12.0];
    
        for (NSObject *obj in cellContents)
        {
            if ([obj isKindOfClass:[NSString class]])
            {
                NSString *text = (NSString *)obj;
                CGSize size = [text sizeWithFont:font];
                UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(x, (kCellHeight - size.height)/2.0, size.width, size.height)];
                label.text = text;
                label.font = font;
                [equationContainer addSubview:label];
                x += size.width;
            } 
            else if ([obj isKindOfClass:[UIImage class]])
            {
                UIImage *image = (UIImage *)obj;
                UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, (kCellHeight - image.size.height) / 2.0, image.size.width, image.size.height)];
                imageView.image = image;
                [equationContainer addSubview:imageView];
                x += image.size.width;
            }
        }
    
        return cell;
    }
    

    这会产生:

    【讨论】:

    • 太棒了!这正是我一直在寻找的答案。只是一个问题,我导入的图像太大了。您制作的图片尺寸是多少?
    【解决方案4】:

    您可以使用所需的确切符号创建自己的字体。尝试这个: http://glyphdesigner.71squared.com

    【讨论】:

    • 这看起来很棒!如果我可以将两个答案设置为正确,我也会选择这个。如果不是因为价格标签,这绝对是我的首选。
    • 目前有 50% 的折扣!
    • 实际上,我收回了这一点... Glyph Designer 用于位图字体,即位图游戏,如精灵表。它们与原生 iOS 文本组件不兼容,无法作为字体加载!
    • 我设法让它与 Glyphs 的试用版一起使用:glyphsapp.com
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多