UIScrollView Subviews being misplaced when scaled down and Subviews not showing up when rounded - ios

Question

so I'm making my first Swift iOS app. I have two problems that I would like some help with.
First problem: I'm running into some issues with subviews that I created programmatically not being aligned properly when displayed on a small screen.
This first picture shows how I intend the scrollview to look. (iPhone 11 Pro Max)
However, this is what it looks like when it's on a smaller screen. (iPhone 8)
I think the issue is with me creating the subviews programmatically as the scrollview's size is what I want it to be.
Here's the swift code that I used inside viewDidLoad():
var districtNewsSize = 10;
var districtNewsFrame = CGRect(x:0,y:0,width:0,height:0);
// District News -----
districtNewsPageControl.numberOfPages = districtNewsSize;
for aIndex in 0..<districtNewsSize{
districtNewsFrame.origin.x = districtNewsScrollView.frame.size.width * CGFloat(aIndex);
districtNewsFrame.size = districtNewsScrollView.frame.size;
// create content in scrollview
let contentView = UIButton(frame: districtNewsFrame);
contentView.backgroundColor = makeColor(r: 147, g: 66, b: 78);
contentView.setTitle("titletext", for: .normal);
contentView.layer.cornerRadius = 20; // just to show how displaced the views are
// add contentview to scrollview
self.districtNewsScrollView.addSubview(contentView);
}
// change horizontal size of scrollview
districtNewsScrollView.contentSize = CGSize(width: districtNewsScrollView.frame.size.width * CGFloat(districtNewsSize), height: districtNewsScrollView.frame.size.height);
districtNewsScrollView.delegate = self;
Second Problem: When attempting to round the top two corners of the scrollview, the content inside the scrollview seems to disappear.
This is a picture of the first subview.
This is a picture of the second subview.
I also have a suspicion that this is caused by my function that I am using to round the top edges.
Here's the extension function I made for UIScrollView:
extension UIScrollView{
func setRoundedEdge(corners:UIRectCorner, radius: CGFloat){ // label.setRoundedEdge([.TopLeft, . TopRight], radius: 10)
let maskPath1 = UIBezierPath(roundedRect: bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius))
let maskLayer1 = CAShapeLayer()
maskLayer1.frame = bounds
maskLayer1.path = maskPath1.cgPath
layer.mask = maskLayer1
}
}
This is how I'm calling the function in viewDidLoad():
districtNewsScrollView.setRoundedEdge(corners: [.topRight,.topLeft], radius: 30);
Any help will greatly be appreciated. I've been stuck on these two problems and can't find anything online (probably because I'm not wording it right but I don't know how to describe these issues). Thank you!

Answer 1

I assume you are using storyboard for scrollview and programmatically adding subviews in viewDidLoad,
districtNewsFrame.origin.x = districtNewsScrollView.frame.size.width * CGFloat(aIndex);
districtNewsFrame.size = districtNewsScrollView.frame.size;
Should be changed to
districtNewsFrame.origin.x = UIScreen.main.bounds.size.width * CGFloat(aIndex);
districtNewsFrame.size = UIScreen.main.bounds.frame.size;
Use screen's size on viewDidLoad since the views in storyboards are loaded but constraints in auto layout is not yet applied.
For second question,
change extension to
extension UIScrollView{
func setRoundedEdge(corners:UIRectCorner, radius: CGFloat){ // label.setRoundedEdge([.TopLeft, . TopRight], radius: 10)
let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
layer.mask = mask
}
}
and view controller to
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews();
districtNewsScrollView.setRoundedEdge(corners: [.topRight,.topLeft], radius: 30);
}

Answer 2

Here's what I did to fix both issues:
// District News -----
districtNewsFrame.size = districtNewsScrollView.frame.size;
districtNewsFrame.size.width = UIScreen.main.bounds.size.width - 34;
for aIndex in 0..<districtNewsSize{
//districtNewsFrame.origin.x = (UIScreen.main.bounds.size.width-52) * CGFloat(aIndex);
//districtNewsFrame.size = UIScreen.main.bounds.size;
districtNewsFrame.origin.x = (districtNewsFrame.size.width * CGFloat(aIndex));
// create content in scrollview
let contentView = UIButton(frame: districtNewsFrame); // wrapper for article
//testButton.setImage(UIImage(named: "ahsldpi.png"), for: .normal);
contentView.backgroundColor = makeColor(r: 147, g: 66, b: 78);
// content inside contentView -------
let articleContentFrame = CGRect(x:0,y:0,width:districtNewsFrame.width,height:districtNewsFrame.height-60);
let articleContent = UIView(frame: articleContentFrame); // may be image?
articleContent.backgroundColor = makeColor(r: 138, g: 138, b: 138);
let articleLabelFrame = CGRect(x:0,y:districtNewsFrame.height-60,width:districtNewsFrame.width,height:60);
let articleLabel = UILabel(frame: articleLabelFrame);
articleLabel.text = " " + "Title";
articleLabel.backgroundColor = UIColor.white;
articleLabel.font = UIFont(name: "DINCondensed-Bold", size: 30);
// add content inside contentView to contentview
contentView.addSubview(articleContent);
contentView.addSubview(articleLabel);
// add contentview to scrollview
contentView.setRoundedEdge(corners: [.topRight,.topLeft,.bottomLeft,.bottomRight], radius: 30);
self.districtNewsScrollView.addSubview(contentView);
}
// change horizontal size of scrollview
districtNewsScrollView.contentSize = CGSize(width: (districtNewsFrame.size.width * CGFloat(districtNewsSize)), height: districtNewsScrollView.frame.size.height);
districtNewsScrollView.delegate = self;
```