简体   繁体   English

如何使用滚动视图制作可滚动标签?

[英]how to make scrollable label using scroll view?

I want to make something like article to read view controller that contains UIImage and Label nested in the scroll view. 我想做一些类似文章的文章来阅读视图控制器,其中包含嵌套在滚动视图中的UIImage和Label。

I want if the article content is not to big, the scrolling function is disabled, but if the content is big, I want it can be scrolled and it can be scrolled as the same height of the label content height. 我想如果文章内容不大,则禁用滚动功能,但是如果内容较大,我希望可以对其进行滚动,并且可以将其滚动为与标签内容高度相同的高度。

(if the content article is not too much, then i don't need to scroll) (如果内容文章不是太多,那么我不需要滚动)

在此处输入图片说明

but if the content is a lot then I expect that I can scroll. 但是如果内容很多,我希望可以滚动。 at the moment, I can scroll if the content is big like below 目前,如果内容如下所示,我可以滚动显示

在此处输入图片说明

I have tried to set the bottom anchor like my code below but it doesn't work. 我试图像下面的代码一样设置底部锚点,但是它不起作用。 here is the autolayout I use for the bottom label contraint andthe view hierarchy 这是我用于底部标签约束和视图层次结构的自动布局

在此处输入图片说明

class NotificationDetailVC: UIViewController { class NotificationDetailVC:UIViewController {

@IBOutlet weak var notificationTitleLabel: UILabel!
@IBOutlet weak var notificationImage: UIImageView!
@IBOutlet weak var notificationDateLabel: UILabel!
@IBOutlet weak var notificationScrollView: UIScrollView!
@IBOutlet weak var notificationContentLabel: UILabel!


var dataNotification : [String:Any]?

override func viewDidLoad() {
    super.viewDidLoad()


    notificationScrollView.contentLayoutGuide.bottomAnchor.constraint(equalTo: notificationContentLabel.bottomAnchor).isActive = true

}

} }

Don't make bottom constraint to greater than. 不要使底部约束大于。 just set it equal to. 只需将其设置为等于。

Scroll view has a content view which contains all scrollable view. 滚动视图具有一个内容视图,其中包含所有可滚动视图。 You have to set height, width and x,y position of content view. 您必须设置内容视图的高度,宽度和x,y位置。

Set top, bottom, leading and trailing constraint to content view. 设置内容视图的顶部,底部,前导和尾随约束。

Scrollview's scrolling directions depands on height and width of contantview. Scrollview的滚动方向取决于contantview的高度和宽度。 if you set content view's width equal to scrollview than scrollview is not scrollable in horizontal direction. 如果将内容视图的宽度设置为scrollview,则scrollview在水平方向上不可滚动。 Same for height , if you set content view's height equal to scrollview's height than scrollview is not scrollable in vertical direction. 与height相同,如果将内容视图的高度设置为与scrollview的高度相等,则scrollview在垂直方向上不可滚动。

In your case you have to set content view's width equal to scrollview's width therefore scrollview is not scrollable in horizontal direction. 在您的情况下,必须将内容视图的宽度设置为等于scrollview的宽度,因此scrollview在水平方向上不可滚动。 Content view automatically get height according to subviews(In your case UIimageview and uilabel). 内容视图根据子视图(在您的情况下为UIimageview和uilabel)自动获得高度。 so set height, top, bottom constraint of imageview and top and bottom constraints of uilabel because uilabel height automatically set by it's text. 因此,请设置imageview的高度,顶部,底部约束以及uilabel的顶部和底部约束,因为uilabel的高度由其文本自动设置。 Set number of line = 0 in UILabel. 在UILabel中设置number of line = 0

在此处输入图片说明

在此处输入图片说明 在此处输入图片说明

Set Label bottom constaint equal to any constant height (say 20) & number of lines = 0 . 将Label底部约束设置为等于任何恒定高度(例如20)且number of lines = 0

as you are using scrollview then you have to give height to the imageview . 当您使用scrollview您必须为imageview赋予高度。 You don't need to worry about label height bcz its heigght will be calculated by its content height. 您无需担心标签高度,因为它的高度将通过其内容高度来计算。

Now your scrollviewContentHeight = imgView.height + all labels content height . 现在,您的scrollviewContentHeight = imgView.height + all labels content height Make sure each component (imageview & every label) have top and bottom constraint. 确保每个组件(imageview和每个标签)都有顶部和底部约束。

That's all you have to do. 那就是你要做的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM