iOS:使用滚动功能显示图像和长文本的正确方法

时间:2015-05-11 13:43:52

标签: ios objective-c uiscrollview

我正在为新闻网站开发应用程序,当用户点击某个单元格(即文章)时,我使用UITableView显示新闻文章,其中每个单元格都是文章标题),另一个视图打开(使用segue),现在在这个视图中我想放下以下内容:

  1. 文章顶部的图片。
  2. 图片下的文章日期。
  3. 该日期下文章的描述。 (可能很长)
  4. 用户滚动整个视图的功能。 (不仅仅是描述)
  5. 注意:我尝试了很多方法,我似乎无法了解实施此结构的正确方法。

3 个答案:

答案 0 :(得分:5)

现代解决方案实际上相对简单:将整个事物组合为属性字符串并将其放入UITextView。文本视图将自动处理描述可能很长,所有内容应滚动在一起等事实。

E.g。

NSAttributedString *imageString = [NSAttributedString attributedStringWithAttachment:
                [[NSTextAttachment new] setImage:[UIImage imageNamed:@"whatever.png"]]];

...并使用自然方法组合属性字符串,并在其他文本位上设置字体和颜色等内容。然后只需textView.attributedString = compoundString;

详细说明的例子:

- (void)setStory:(Story *)story
{
    NSAttributedString *image = [story imageString];
    NSAttributedString *date = [story dateString];
    NSAttributedString *body = [story bodyString];

    NSMutableAttributedString *wholeStory = [NSMutableAttributedString new];

    // TODO: can you be sure image, date and body are all non-nil?
    NSArray *allComponents = @[image, date, body];
    for(NSAttributedString *component in allComponents)
    {
        [wholeStory appendAttributedString:component];
        if(component != [allComponents lastObject])
            [[wholeStory mutableString] appendString:@"\n\n"];
    }

    self.textView.attributedString = wholeStory;
}

... elsewhere, in the Story object ...

- (UIImage *)image
{
    // ...something...
}

- (NSString *)dateText
{
    // ...something, probably using NSDateFormatter unless it's returned
    // from a server or wherever already formatted...
}

- (NSString *)bodyText
{
    // ... something ...
}

- (NSAttributedString *)imageString
{
    return [NSAttributedString attributedStringWithAttachment:
            [[NSTextAttachment new] setImage:[self image]]];
}

- (NSAttributedString *)dateString
{
    return [[NSAttributedString alloc]
             initWithString:[self dateText]
             attributes:
             @{
                 NSFontAttributeName: [UIFont preferredFontForTextStyle: UIFontTextStyleSubheadline],
                 ... etc ...
             }];
}

- (NSAttributedString *)bodyString
{
    return [[NSAttributedString alloc]
             initWithString:[self bodyText]
             attributes:
             @{
                 NSFontAttributeName: [UIFont preferredFontForTextStyle: UIFontTextStyleBody],
                 ... etc ...
             }];
}

查看NSAttributedString UIKit Additions文档,了解除NSFontAttributeName以外您可以设置的各种属性的列表。请注意,我已经采用iOS 7+方式按要求而不是特定大小或字体来询问字体。这意味着已经调高了默认字体大小的用户将在您的应用中获得更大的文字。

答案 1 :(得分:1)

我创建了一个以编程方式添加约束的pod。 scrollViews有一个特殊类别,因为它们在使用自动布局时非常复杂。

以下是project

的链接

您可以查看一个示例应用,但您必须做的事情是

  • 初始化您的视图(图片,日期标签和说明标签)。
  • 添加scrollView
  • 添加scrollView
  • 的子视图
UIScrollView *scrollView = [[UIScrollView alloc] init];
[self.view addSubview:scrollView];
[scrollView addConstraintsToFillHorizontal];
[scrollView addConstraintsToFillVertical];

[scrollView addConstraintsToAlignVerticalAllViews:@[image, dateLabel, descriptionLabel]];

这应该很容易实现,但如果您需要更多帮助,请告诉我,我可以为您提供更多示例代码。

祝你的项目好运!

答案 2 :(得分:0)

另一种方法是将每篇文章显示为UIWebView中的HTML字符串。

NSURL *url = [NSURL URLWithString:self.articleController.url];
NSString *html = [NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding error:NULL];
[self.articleView.webView loadHTMLString:html baseURL:baseURL];