iOS开发：长描述致图片消失，如何兼顾文本与图片显示？

问题描述 #

当图片对应的描述文本过长时，图片会被挤出视野无法查看，如何实现完整显示文本与图片的效果？
如何让文本支持上下滚动？

尝试过缩小文本字号，但可读性极差；也调整过行间距，视觉效果同样糟糕。希望文本显示美观且不影响图片展示，请问解决方案是什么？能否让标签支持上下移动？

相关代码（FavoriteDetailViewController） #

import UIKit
import ProgressHUD

class FavoriteDetailViewController: UIViewController {
    
   @IBOutlet weak var shortdescriptionLabel: UILabel!
    @IBOutlet weak var favoriteImageView: UIImageView!
    @IBOutlet weak var favoriteTitleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var nameField: UITextField!
    
    var breed: Breed!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        populateView()
    }
    
    private func populateView() {
        favoriteImageView.kf.setImage(with: breed.image?.asUrl)
        favoriteTitleLabel.text = breed.name
        descriptionLabel.text = breed.description
        shortdescriptionLabel.text = breed.shortDescription
    }
    
    @IBAction func favoriteButton(_ sender: UIButton) {
        guard let name = nameField.text?.trimmingCharacters(in: .whitespaces),
              !name.isEmpty else {
            ProgressHUD.showError("Please enter your name")
            return
        }
        print("Hello \(name)")
    } 

}

解决方案 #

1. 用UITextView替换长文本UILabel（推荐）

直接将需要显示长文本的UILabel替换为UITextView，既能保留文本排版的美观性，又自带滚动功能：

• 在Storyboard中，删除原有的descriptionLabel和shortdescriptionLabel，添加UITextView组件，重新关联IBOutlet，类型改为UITextView。
• 配置UITextView属性：设置isEditable = false（禁止编辑）、isScrollEnabled = true（开启滚动），调整textContainerInset设置合适内边距，保证文本和边界的间距美观。
• 代码中赋值逻辑不变：

@IBOutlet weak var shortdescriptionTextView: UITextView!
@IBOutlet weak var descriptionTextView: UITextView!

private func populateView() {
    // ...其他代码
    descriptionTextView.text = breed.description
    shortdescriptionTextView.text = breed.shortDescription
}

2. 用UIScrollView包裹长文本标签

如果不想替换组件，可以给长文本标签外层套一个UIScrollView：

• 在Storyboard中，给长文本标签添加父容器UIScrollView，设置ScrollView的约束：顶部接图片底部、左右贴屏幕边缘、底部接输入框顶部，固定高度范围。
• 设置标签的宽度和ScrollView一致，高度随内容自适应，ScrollView会自动在文本过长时允许上下滚动，图片位置固定不会被挤出。

3. 不推荐标签上下移动

让标签上下移动会导致界面布局混乱，用户需要频繁调整才能查看内容，体验远不如文本区域滚动方案，不建议采用。

内容的提问来源于stack exchange，提问作者LordGrim