简体   繁体   中英

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.

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 {

@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.

Set top, bottom, leading and trailing constraint to content view.

Scrollview's scrolling directions depands on height and width of contantview. if you set content view's width equal to scrollview than scrollview is not scrollable in horizontal direction. Same for height , if you set content view's height equal to scrollview's height than scrollview is not scrollable in vertical direction.

In your case you have to set content view's width equal to scrollview's width therefore scrollview is not scrollable in horizontal direction. Content view automatically get height according to subviews(In your case UIimageview and 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. Set number of line = 0 in UILabel.

在此处输入图片说明

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

Set Label bottom constaint equal to any constant height (say 20) & number of lines = 0 .

as you are using scrollview then you have to give height to the 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 . Make sure each component (imageview & every label) have top and bottom constraint.

That's all you have to do.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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