Here black border shows the Parent UIView of UIImageView and Red border showing UIImageView i'm downloading image from server but the image is going outside of the UIImageView area as shown in the image. I'm doing it programmatically any help would be very much appreciated. I'm adding code block below
let bottomView : UIView = UIView(frame: CGRect(x : 10, y: stackView.height, width: view.width * 0.75, height: view.width * 0.75 ))
view.addSubview(bottomView)
bottomView.layer.borderColor = UIColor.black.cgColor
bottomView.layer.borderWidth = 1
bottomView.translatesAutoresizingMaskIntoConstraints = false
bottomView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
bottomView.topAnchor.constraint(equalTo: stackView.bottomAnchor, constant: -20).isActive = true
bottomView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
bottomView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
bottomView.widthAnchor.constraint(equalToConstant: view.width * 0.75).isActive = true
bottomView.heightAnchor.constraint(equalToConstant: view.width * 0.75).isActive = true
let imageView : UIImageView = UIImageView(frame : CGRect(x: 0, y: 0, width: 250, height: 250 ))
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 1
bottomView.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.centerXAnchor.constraint(equalTo: bottomView.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: bottomView.centerYAnchor).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 250).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 250).isActive = true
imageView.downloadedFrom(link: (sizeResult?.results![0].data?.size_Chart?.mobile_image?.imageValue?.imageMain?.url)!, contentMode : .scaleAspectFill)
this bottomView will be added UIAlertViewController.
This image shows ** contentMode is Aspect Fit **
You can use clip to bound with your image view, Definitely It will resolve your issue.
Swift:
override func viewDidLoad() {
super.viewDidLoad()
self.bottomView.clipsToBounds = false
self.imageView.clipsToBounds = true
}
Set the properties of uiimageview and content mode:
self.imageView.clipsToBounds = true
self.imageView.contentMode = .scaleAspectFit
imageView?.contentMode = .scaleAspectFit
self.imageView.clipsToBounds = true
it was worked for me..
The last line of your code should be this -
imageView.downloadedFrom(link: (sizeResult?.results![0].data?.size_Chart?.mobile_image?.imageValue?.imageMain?.url)!, contentMode : .scaleAspectFit)
Related
I have a Shuffle package added to my project (https://cocoapods.org/pods/Shuffle-iOS), the package works fine, but the problem is that even though I set cards width and height to my UIView, cards are out of UIView anyways, I tried changing the frame of my cards and set width and height to UIViews, but they are still out of UIView any solutions?
my UIView is mainView in code below
func card1(index: swipeCardData) -> SwipeCard {
let card = SwipeCard()
card.swipeDirections = [.left, .right, .up]
card.layer.cornerRadius = 12
card.layer.shadowOffset = CGSize.zero
card.layer.shadowOpacity = 1.0
card.layer.shadowRadius = 6.0
card.layer.masksToBounds = false
card.layer.borderWidth = 2
let view_bg = UIView(frame: CGRect(x: 16, y: 60, width: mainView.frame.size.width, height: mainView.frame.height)) // here is set cards width and frame to my UIView
card.content = view_bg
view_bg.layer.cornerRadius = 12
view_bg.clipsToBounds = true
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [self] in
let view_bg1 = UIView(frame: CGRect(x: 0, y: 0, width: view_bg.frame.size.width, height: view_bg.frame.size.height))
card.content?.addSubview(view_bg1)
let img_card_type = UIImageView(frame: CGRect.zero)
img_card_type.contentMode = .scaleAspectFit
img_card_type.translatesAutoresizingMaskIntoConstraints = false
img_card_type.isHidden = true
view_bg1.addSubview(img_card_type)
img_card_type.centerXAnchor.constraint(equalToSystemSpacingAfter: view_bg1.centerXAnchor, multiplier: 1).isActive = true
img_card_type.topAnchor.constraint(equalTo: view_bg1.topAnchor, constant: 0).isActive = true
img_card_type.widthAnchor.constraint(equalToConstant: 100).isActive = true
pictures for better understanding :
as you can see on the screenshot above the card content is out of mainView which is in the background(gray box)
the end result below
The reason is you are not providing height for image view and telling to expand according to aspect ratio of image. set a max height for image view. to better UX centre imageview in both axis and a fixed either height or width and a maximum for other width or height.
img_card_type.centerXAnchor.constraint(equalToSystemSpacingAfter: view_bg1.centerXAnchor, multiplier: 1).isActive = true
img_card_type.centerYAnchor.constraint(equalToSystemSpacingAfter: view_bg1.centerYAnchor, multiplier: 1).isActive = true
img_card_type.widthAnchor.constraint(equalToConstant: 100).isActive = true
img_card_type.heightAnchor.constraint(lessThanOrEqualToConstant: 100).isActive = true
I am working on a "Profile View Controller" which is inside a TableViewCell and table cell dimension is set as UITableView.automaticDimension:
The problem is that I would like to set the background image view (Blue) with a variable height based on cell width and a 16:9 ratio. For some reason I am not being able to change the view height even if I set the constant.
Here the code:
let topView : UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.layer.cornerRadius = 20
view.backgroundColor = .yoofitDarkBlue
view.layer.masksToBounds = true
view.layer.shadowColor = UIColor.lightGray.cgColor
view.layer.borderWidth = 0.5
view.layer.borderColor = UIColor.yoofitDarkBlue.cgColor
view.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
view.layer.shadowRadius = 12.0
view.layer.shadowOpacity = 0.7
return view
}()
let userImage : UIImageView = {
let i = UIImageView()
i.translatesAutoresizingMaskIntoConstraints = false
i.image = UIImage(named: "user2")
i.layer.masksToBounds = true
i.layer.cornerRadius = 75
i.layer.borderWidth = 1
i.layer.borderColor = UIColor.white.cgColor
return i
}()
var userNameLabel:UILabel = {
let l = UILabel()
l.translatesAutoresizingMaskIntoConstraints = false
l.font = UIFont(name: "AvenirNext-DemiBold", size: 20)
l.textAlignment = .center
l.textColor = .yoofitBlack
return l
}()
func setupViews() {
self.backgroundColor = .clear
self.selectionStyle = .none
addSubview(topView)
let width = self.frame.width
print(width) // print 320
topView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
topView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
topView.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true // this doesn't work even if I set another number like 600
topView.layoutIfNeeded()
addSubview(userImage)
userImage.centerYAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true
userImage.centerXAnchor.constraint(equalTo: topView.centerXAnchor).isActive = true
userImage.widthAnchor.constraint(equalToConstant: 150).isActive = true
userImage.heightAnchor.constraint(equalToConstant: 150).isActive = true
addSubview(userNameLabel)
userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 10).isActive = true
userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
userNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
userNameLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -20).isActive = true
}
PLEASE NOTE THERE ARE 2 answers to this question. The latter is definitely the correct one but the first maybe may help others.
So this is how I fixed it but I hope to get better answers. This answer helped me to go to the right path (iOS: How to Align The Center of a View With The Bottom of Another View With AutoLayout)
I have added a containing view which is twice as the required size of my top view (the blue one).
I centered the picture on the containing view.
self.conteiningView.backgroundColor = .red // I made this red so you can visually see how the views are related to each other
let width = self.frame.width
self.addSubview(conteiningView)
conteiningView.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = true
conteiningView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
conteiningView.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
conteiningView.heightAnchor.constraint(equalToConstant: (width/16*9)*2).isActive = true // twice of the blue view
conteiningView.layoutIfNeeded()
self.conteiningView.addSubview(topView)
topView.topAnchor.constraint(equalTo: conteiningView.topAnchor).isActive = true
topView.leftAnchor.constraint(equalTo: conteiningView.leftAnchor).isActive = true
topView.rightAnchor.constraint(equalTo: conteiningView.rightAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true // 16:9 ration
conteiningView.addSubview(userImage)
userImage.centerYAnchor.constraint(equalTo: conteiningView.centerYAnchor).isActive = true
userImage.centerXAnchor.constraint(equalTo: conteiningView.centerXAnchor).isActive = true
userImage.widthAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.heightAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.layer.cornerRadius = width/4 // to mantain nice proportions
conteiningView.addSubview(userNameLabel)
userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 10).isActive = true
userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
userNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
With red background:
With clear background:
UPDATE: The answer above works but I have actually found the problem:
Even if I had set:
self.tableView.rowHeight = UITableView.automaticDimension
self.tableView.estimatedRowHeight = 300
For some (silly me) I had also implemented:
tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
This, of course, does not be implemented for the automatic dimension to work.
removing that allowed to use the following code to achieve the same result but without setting a predefined height:
self.addSubview(conteiningView)
conteiningView.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = true
conteiningView.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
conteiningView.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
conteiningView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
conteiningView.layoutIfNeeded()
self.conteiningView.addSubview(topView)
topView.topAnchor.constraint(equalTo: conteiningView.topAnchor).isActive = true
topView.leftAnchor.constraint(equalTo: conteiningView.leftAnchor).isActive = true
topView.rightAnchor.constraint(equalTo: conteiningView.rightAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: width/16*9).isActive = true
conteiningView.addSubview(userImage)
userImage.centerYAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true // the vertical center is now set nicely at bottom edge of my top view.
userImage.centerXAnchor.constraint(equalTo: topView.centerXAnchor).isActive = true
userImage.widthAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.heightAnchor.constraint(equalToConstant: width/2).isActive = true
userImage.layer.cornerRadius = width/4
conteiningView.addSubview(userNameLabel)
userNameLabel.topAnchor.constraint(equalTo: userImage.bottomAnchor, constant: 2).isActive = true
userNameLabel.centerXAnchor.constraint(equalTo: userImage.centerXAnchor).isActive = true
userNameLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
userNameLabel.heightAnchor.constraint(equalToConstant: 35).isActive = true
I am new in iOS Development. If using storyboard, I can place an Image view in view controller like this
I need to make something like that programmatically.
so I have custom view from a library called RevealingSplashView , but I need to add an image view to that custom UI View. I just know to add the image view, maybe something like this
let imageName = "yourImage.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
revealingSplashView.addSubview(imageView)
but I don't know how to set that constraint to image view to
a. align to center x to superview
b. proportional width to superview 0.8
c. height constraint = 25
d. align bottom to safe area = 32
how to do that ?
here is the code I use before want to add image view
let screenSize = UIScreen.main.bounds
let iconWidth = (screenSize.width) * 0.8
let iconHeight = iconWidth * 1 // ratio 1:1
revealingSplashView = RevealingSplashView(iconImage: UIImage(named: "Loading Page Asset")!,iconInitialSize: CGSize(width: iconWidth, height: iconHeight), backgroundColor: AppColor.mainYellow.getUIColor())
revealingSplashView.animationType = SplashAnimationType.twitter
revealingSplashView.imageView?.contentMode = .scaleAspectFill
// add loading indicator to RevealingSplashView Programatically
revealingSplashViewIndicator.color = UIColor.white
revealingSplashViewIndicator.frame = CGRect(x: 0.0, y: 0.0, width: 30.0, height: 30.0)
revealingSplashViewIndicator.center = CGPoint(x: self.view.center.x, y: self.view.center.y + (iconHeight/2) + 64 )
revealingSplashView.addSubview(revealingSplashViewIndicator)
revealingSplashViewIndicator.bringSubviewToFront(self.revealingSplashView)
revealingSplashViewIndicator.startAnimating()
let window = UIApplication.shared.keyWindow
window?.addSubview(revealingSplashView)
I recommend using anchors:
let imageName = "yourImage.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
revealingSplashView.addSubview(imageView)
// you need to turn off autoresizing masks (storyboards do this automatically)
imageView.translatesAutoresizingMaskIntoConstraints = false
// setup constraints, it is recommended to activate them through `NSLayoutConstraint.activate`
// instead of `constraint.isActive = true` because of performance reasons
NSLayoutConstraint.activate([
imageView.centerXAnchor.constraint(equalTo: revealingSplashView.centerXAnchor),
imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8),
imageView.heightAnchor.constraint(equalToConstant: 25),
imageView.bottomAnchor.constraint(equalTo: revealingSplashView.safeAreaLayoutGuide.bottomAnchor, constant: -32),
])
To add constraints programmatically you need to set
imageView.translatesAutoresizingMaskIntoConstraints = false
then you can set the constraints:
imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8).isActive = true
imageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
if you want to activate constraints you need to set
isActive = true
also if you support iOS < 11 you need to put a control because you don't have the safeArea
revealingSplashView.addSubview(imageView)
imageView.centerXAnchor.constraint(equalTo: revealingSplashView.centerXAnchor).isActive = true
imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
imageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
imageView.translatesAutoresizingMaskIntoConstraints = false
I try to implement UIView with sequence. With below code the output like in this picture. (This is normal behaviour)
But I want to line up like below picture
Elements sorted from right!
imageView.trailingAnchor.constraint(equalTo: participantView.safeAreaLayoutGuide.trailingAnchor, constant: CGFloat(-(counter * widthX - 5 * counter)) ).isActive = true
What can I do now?
let widthX = 30
var counter = 0
for x in element {
guard let image = x.image else { continue }
let urlX = URL(string: "...")
let imageView = UIImageView()
participantView.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.trailingAnchor.constraint(equalTo: participantView.safeAreaLayoutGuide.trailingAnchor, constant: CGFloat(-(counter * widthX - 5 * counter)) ).isActive = true
imageView.topAnchor.constraint(equalTo: participantView.topAnchor, constant: 0).isActive = true
imageView.bottomAnchor.constraint(equalTo: participantView.bottomAnchor, constant: 0).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 30).isActive = true
imageView.backgroundColor = .white
imageView.layer.cornerRadius = 15
imageView.clipsToBounds = true
imageView.contentMode = .scaleAspectFit
imageView.layer.borderWidth = 1
imageView.layer.borderColor = UIColor.lightGray.cgColor
counter += 1
imageView.kf.setImage(with: urlX)
}
Replace
participantView.addSubview(imageView)
with
participantView.insertSubview(imageView,at:0)
position of 1 ,2 ..etc (left/right alignment) depends on image
I am currently working with iCarousel
https://github.com/nicklockwood/iCarousel on my project. The objective is to come up with a spotify cover flow UI.
I am facing problems with the following code:
func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
let tempView = UIView(frame: CGRect(x: 0, y: 0, width: 350, height: 350))
tempView.layer.cornerRadius = 10
tempView.layer.masksToBounds = true
tempView.translatesAutoresizingMaskIntoConstraints = false
tempView.backgroundColor = .white
var uiimage = UIImageView()
uiimage.image = #imageLiteral(resourceName: "songAlbumCover")
uiimage.translatesAutoresizingMaskIntoConstraints = false
var temviewsmaller = UIView(frame: CGRect(x: 0, y: 0, width: 350, height: 350))
temviewsmaller.backgroundColor = .yellow
temviewsmaller.addSubview(uiimage)
// When I included the following constraints the "cards" disappear why??
uiimage.topAnchor.constraint(equalTo: temviewsmaller.topAnchor).isActive = true
uiimage.bottomAnchor.constraint(equalTo: temviewsmaller.bottomAnchor).isActive = true
uiimage.leftAnchor.constraint(equalTo: temviewsmaller.leftAnchor, constant: 10).isActive = true
uiimage.rightAnchor.constraint(equalTo: temviewsmaller.rightAnchor, constant: 10).isActive = true
tempView.addSubview(temviewsmaller)
return tempView
}
Is there a problem iCarousel and NSLayoutConstraint? I am trying to put more information on the "cards" such as label object and image object. But since I am not using storyboard and do everything programmatically. Been looking for online tutorial on this but no luck :(
Cards will show up correctly if no constraints are applied. But i need the constraints eventually since I am thinking of adding more subviews such as UILabel and such.
updated:
func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
print(carousel.contentView.center.y)
print(carousel.contentView.center.x)
let tempView = UIView()
tempView.layer.cornerRadius = 10
tempView.layer.masksToBounds = true
tempView.translatesAutoresizingMaskIntoConstraints = false
tempView.backgroundColor = .white
var uiimage = UIImageView()
uiimage.image = #imageLiteral(resourceName: "yeezy")
uiimage.translatesAutoresizingMaskIntoConstraints = false
var temviewsmaller = UIView()
temviewsmaller.backgroundColor = .yellow
temviewsmaller.addSubview(uiimage)
// When I included the following constraints the "cards" disappear why??
uiimage.topAnchor.constraint(equalTo: temviewsmaller.topAnchor).isActive = true
uiimage.bottomAnchor.constraint(equalTo: temviewsmaller.bottomAnchor).isActive = true
uiimage.leftAnchor.constraint(equalTo: temviewsmaller.leftAnchor, constant: 10).isActive = true
uiimage.rightAnchor.constraint(equalTo: temviewsmaller.rightAnchor, constant: 10).isActive = true
tempView.addSubview(temviewsmaller)
temviewsmaller.topAnchor.constraint(equalTo: tempView.topAnchor).isActive = true
temviewsmaller.bottomAnchor.constraint(equalTo: tempView.bottomAnchor).isActive = true
temviewsmaller.leftAnchor.constraint(equalTo: tempView.leftAnchor, constant: 10).isActive = true
temviewsmaller.rightAnchor.constraint(equalTo: tempView.rightAnchor, constant: 10).isActive = true
carousel.contentView.addSubview(tempView)
tempView.topAnchor.constraint(equalTo: carousel.contentView.topAnchor).isActive = true
tempView.bottomAnchor.constraint(equalTo: carousel.contentView.bottomAnchor).isActive = true
tempView.leftAnchor.constraint(equalTo: carousel.contentView.leftAnchor, constant: 10).isActive = true
tempView.rightAnchor.constraint(equalTo: carousel.contentView.rightAnchor, constant: 10).isActive = true
return carousel.contentView
}