Can't get keyboard height when using Interactive keyboard dismissal - ios

I have been trying to implement interactive keyboard like in 'iMessages' app Something like this;
I need to continuously get exact frame of keyboard when sliding it up or down.
I have already tried; keyboardWillChangeFrame, keyboardDidChangeFrame, keyboardWillShowForResizing, keyboardWillHideForResizing, keyboardWillShow, keyboardWillBeHidden None of them continuously return the frame. What is the best way to catch that frame?

That's a tricky & Simple.
ViewController inherits UIResponder
open class UIViewController : UIResponder, NSCoding, UIAppearanceContainer, UITraitEnvironment, UIContentContainer, UIFocusEnvironment
So it can become first responder since it can have input accessory view too.
What you have to do is
1) Go to Storyboard -> ViewController and then select your tableview and change keyboard dismiss type to
2) In your Viewcontroller
Add following code
var viewAcc : UIView? // That contains TextFied and send button
override var inputAccessoryView: UIView? {
return viewAcc
}
override var canBecomeFirstResponder: Bool {
return true
}
For you I have created simple Textfield and send button as example you can modify it with your's
func setupView () {
self.tblChatDetail.contentInset = UIEdgeInsetsMake(0, 0, 20, 0)
viewAcc = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44))
viewAcc?.backgroundColor = UIColor.white
textView = UITextView (frame: CGRect(x:0, y:0, width:0,height: 44 - 0.5))
textView.textContainerInset = UIEdgeInsetsMake(4, 3, 3, 3)
textView.delegate = self
viewAcc?.backgroundColor = .lightGray
viewAcc?.addSubview(textView);
sendButton = UIButton(type: .system)
sendButton.isEnabled = true
sendButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
sendButton.setTitle("Send", for: .normal)
sendButton.contentEdgeInsets = UIEdgeInsets(top: 6, left: 6, bottom: 6, right: 6)
sendButton.addTarget(self, action: #selector(ChatDetailViewController.sendMessage), for: UIControlEvents.touchUpInside)
viewAcc?.addSubview(sendButton)
textView.translatesAutoresizingMaskIntoConstraints = false
sendButton.translatesAutoresizingMaskIntoConstraints = false
viewAcc?.addConstraint(NSLayoutConstraint(item: textView, attribute: .left, relatedBy: .equal, toItem: viewAcc, attribute: .left, multiplier: 1, constant: 8))
viewAcc?.addConstraint(NSLayoutConstraint(item: textView, attribute: .top, relatedBy: .equal, toItem: viewAcc, attribute: .top, multiplier: 1, constant: 7.5))
viewAcc?.addConstraint(NSLayoutConstraint(item: textView, attribute: .right, relatedBy: .equal, toItem: sendButton, attribute: .left, multiplier: 1, constant: -2))
viewAcc?.addConstraint(NSLayoutConstraint(item: textView, attribute: .bottom, relatedBy: .equal, toItem: viewAcc, attribute: .bottom, multiplier: 1, constant: -8))
viewAcc?.addConstraint(NSLayoutConstraint(item: sendButton, attribute: .right, relatedBy: .equal, toItem: viewAcc, attribute: .right, multiplier: 1, constant: 0))
viewAcc?.addConstraint(NSLayoutConstraint(item: sendButton, attribute: .bottom, relatedBy: .equal, toItem: viewAcc, attribute: .bottom, multiplier: 1, constant: -4.5))
}
Just run and Bang on !!

Related

UITextView/UIView change frame width by dragging from its edges using pan gesture Swift iOS

I want to change UITextView / UIView frame width using pan gesture (Drag red dot to change frame width), as per the frame width number of line arrange accordingly. Anyone can please suggest how can I achieve this thing.
I have added pan gesture to both the red dot view and it's working fine to change width of UIview, but after rotate view it's not work properly.
func addCustomView() {
myView = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 100))
myView.backgroundColor = .yellow
//Left Dot
let leftDotView = UIView()
leftDotView.backgroundColor = .red
myView.addSubview(leftDotView)
let panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(leftDotMoveGesture(_:)))
panRecognizer.delegate = self
leftDotView.addGestureRecognizer(panRecognizer)
leftDotView.translatesAutoresizingMaskIntoConstraints = false
myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .leading, relatedBy: .equal, toItem: myView, attribute: .leading, multiplier: 1, constant: 0))
myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1, constant: 30))
myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 40))
myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 10))
//Right Dot
let rightDotView = UIView()
rightDotView.backgroundColor = .red
myView.addSubview(rightDotView)
let rightDotPanRecognizer = UIPanGestureRecognizer(target: self, action: #selector(rightDotMoveGesture(_:)))
rightDotPanRecognizer.delegate = self
rightDotView.addGestureRecognizer(rightDotPanRecognizer)
rightDotView.translatesAutoresizingMaskIntoConstraints = false
myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .trailing, relatedBy: .equal, toItem: myView, attribute: .trailing, multiplier: 1, constant: 0))
myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1, constant: 30))
myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 40))
myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 10))
//UItextView
let txtView = UITextView()
txtView.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
txtView.font = UIFont.systemFont(ofSize: 15.0)
txtView.isUserInteractionEnabled = false
txtView.backgroundColor = .clear
myView.addSubview(txtView)
txtView.translatesAutoresizingMaskIntoConstraints = false
myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .leading, relatedBy: .equal, toItem: myView, attribute: .leading, multiplier: 1, constant: 10))
myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .trailing, relatedBy: .equal, toItem: myView, attribute: .trailing, multiplier: 1, constant: -10))
myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1, constant: 10))
myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .bottom, relatedBy: .equal, toItem: myView, attribute: .bottom, multiplier: 1, constant: -10))
self.view.addSubview(myView)
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(draggedView(_:)))
panGesture.delegate = self
myView.isUserInteractionEnabled = true
myView.addGestureRecognizer(panGesture)
//add rotate gesture.
let rotate = UIRotationGestureRecognizer.init(target: self, action: #selector(handleRotate(recognizer:)))
rotate.delegate = self
myView.addGestureRecognizer(rotate)
}
//MARK: Gesture Recognizer
#objc func handleRotate(recognizer : UIRotationGestureRecognizer) {
if let view = recognizer.view {
view.transform = view.transform.rotated(by: recognizer.rotation)
recognizer.rotation = 0
}
}
#objc func draggedView(_ sender:UIPanGestureRecognizer){
self.view.bringSubviewToFront(myView)
let translation = sender.translation(in: self.view)
myView.center = CGPoint(x: myView.center.x + translation.x, y: myView.center.y + translation.y)
sender.setTranslation(CGPoint.zero, in: self.view)
}
#objc func leftDotMoveGesture(_ recognizer: UIPanGestureRecognizer) {
let touchLocation = recognizer.location(in: self.view)
var getSuperView = myView.frame
getSuperView.size.width = getSuperView.size.width + (getSuperView.origin.x - touchLocation.x)
getSuperView.origin.x = touchLocation.x
myView.frame = getSuperView
}
#objc func rightDotMoveGesture(_ recognizer: UIPanGestureRecognizer) {
let touchLocation = recognizer.location(in: self.view)
var getSuperView = myView.frame
getSuperView.size.width = touchLocation.x - getSuperView.origin.x
myView.frame = getSuperView
}
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
I have checked following but didn't got proper solutions for this functionality.
How to resize UIView by dragging from its edges?
https://github.com/ppoh71/resizeRectangleOnTouchDrag
https://newbedev.com/how-to-resize-uiview-by-dragging-from-its-edges
I will have to use rotate/pan gesture(to change position)/resize frame UIview also I need to add multiple n number of views as user wants.
The issue of strange behavior is due to you are resizing frame of the view. Since you are also rotating the views then resize, you need to resize the bounds of your view. When you rotate a view, it's frame keep getting changed but the bounds keep same.

Please tell me how called this UI name [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
What is this UI name?
It's just like a sticking on the keyboard...
and like a messenger apps UITextField...
I don't know this UI name.
What is that?
This is done with input accessory view of UIViewController
Use Your text as input accessory view of UIViewController so remove that bottom view from storyboard
Add Following in your view controller
var viewAcc: UIView?
var sendButton: UIButton!
var inputTextField: UITextField!
override var inputAccessoryView: UIView? {
return viewAcc
}
override var canBecomeFirstResponder: Bool {
return true
}
In View Did load method add following code
Note:Please change constraints according to your requirement
viewAcc = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44))
viewAcc?.backgroundColor = UIColor.white
inputTextField = UITextField (frame: CGRect(x:8, y:0, width:UIScreen.main.bounds.width, height: 44 ))
inputTextField.inputAccessoryView = nil
inputTextField.delegate = self as? UITextFieldDelegate
inputTextField.placeholder = "Enter message..."
viewAcc?.backgroundColor = .white
viewAcc?.addSubview(inputTextField);
let topBorderView = UIView()
topBorderView.backgroundColor = UIColor(white: 0.5, alpha: 0.5)
viewAcc?.addSubview(topBorderView)
viewAcc?.addConstraintsWithFormat(format: "H:|[v0]|", views: topBorderView)
viewAcc?.addConstraintsWithFormat(format: "V:|[v0(0.5)]", views: topBorderView)
sendButton = UIButton(type: .system)
sendButton.isEnabled = true
sendButton.titleLabel?.font = UIFont.systemFont(ofSize: 16)
sendButton.setTitle("Send", for: .normal)
sendButton.contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
sendButton.addTarget(self, action: #selector(handleSend), for: .touchUpInside)
viewAcc?.addSubview(sendButton)
inputTextField.translatesAutoresizingMaskIntoConstraints = false
sendButton.translatesAutoresizingMaskIntoConstraints = false
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .left, relatedBy: .equal, toItem: viewAcc, attribute: .left, multiplier: 1, constant: 8))
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .top, relatedBy: .equal, toItem: viewAcc, attribute: .top, multiplier: 1, constant: 7.5))
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .right, relatedBy: .equal, toItem: sendButton, attribute: .left, multiplier: 1, constant: -2))
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .bottom, relatedBy: .equal, toItem: viewAcc, attribute: .bottom, multiplier: 1, constant: -8))
viewAcc?.addConstraint(NSLayoutConstraint(item: sendButton, attribute: .right, relatedBy: .equal, toItem: viewAcc, attribute: .right, multiplier: 1, constant: 0))
viewAcc?.addConstraint(NSLayoutConstraint(item: sendButton, attribute: .bottom, relatedBy: .equal, toItem: viewAcc, attribute: .bottom, multiplier: 1, constant: -4.5))
Goto Storyboard select your tableview and set keyboard dismiss mode to interactive that's it
Now you can drag to dismiss keyboard and textfield along with your finger
EDIT IPHONE X SUPPORT
lazy var viewAcc: SafeAreaInputAccessoryViewWrapperView = {
return SafeAreaInputAccessoryViewWrapperView(for: button)
}()
Here is complete demo https://github.com/29satnam/InputAccessoryView
Hope it is helpful

How can I add an UISwitch to the section of an UITableView?

I want to place an UISwitch to the section of an UITableView. I already made it to place the Switch itself to the section; but it is not responding.
In titleForHeaderInSection I'm loading the view as UITableViewHeaderFooterView. After that I'm manually adding my subviews, like an UIImage and also my UISwitch:
override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
let key = Array(indexNames.keys)[section];
view.translatesAutoresizingMaskIntoConstraints = false;
let header = view as! UITableViewHeaderFooterView;
header.isUserInteractionEnabled = true
if let imageResource = (indexNames[key]![0] as! SectionItem).getIconResource() {
let headerImageView = UIImageView(frame: CGRect(x: 8, // header.contentView.frame.origin.x,
y: header.frame.origin.y + header.bounds.height / 2 - 18, // header.contentView.frame.origin.y,
width: 36, height: 36))
let headerImage = UIImage(named: imageResource)
headerImageView.contentMode = .scaleAspectFit // OR .scaleAspectFill
headerImageView.image = headerImage;
headerImageView.clipsToBounds = true
header.contentView.addSubview(headerImageView);
let headerText = UILabel(frame: CGRect(x: 52, y: header.frame.origin.y + header.bounds.height / 2 - 10, width: 100, height: 20));
// headerText.translatesAutoresizingMaskIntoConstraints = false
headerText.textColor = UIColor.blue;
headerText.text = key;
header.contentView.addSubview(headerText);
let groupSwitch = UISwitch(frame: CGRect(x: header.bounds.width - 132, y: header.frame.origin.y + header.bounds.height / 2 - 10, width: 100, height: 20));
groupSwitch.isEnabled = true
groupSwitch.isUserInteractionEnabled = true
header.contentView.addSubview(groupSwitch)
header.contentView.bringSubview(toFront: groupSwitch)
header.contentView.isUserInteractionEnabled = true
// view.;
NSLayoutConstraint(item: headerImageView, attribute: .leading, relatedBy: .equal, toItem: header, attribute: .leading, multiplier: 1.0, constant: 16.0).isActive = true
NSLayoutConstraint(item: headerImageView, attribute: .top, relatedBy: .equal, toItem: header, attribute: .top, multiplier: 1.0, constant: 8).isActive = true;
NSLayoutConstraint(item: headerImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 24).isActive = true
NSLayoutConstraint(item: headerImageView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 24).isActive = true
NSLayoutConstraint(item: headerText, attribute: .leading, relatedBy: .equal, toItem: headerImageView, attribute: .trailing, multiplier: 1.0, constant: 16).isActive = true
NSLayoutConstraint(item: headerText, attribute: .top, relatedBy: .equal, toItem: header, attribute: .top, multiplier: 1.0, constant: 8).isActive = true;
NSLayoutConstraint(item: headerText, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 150.0).isActive = true
NSLayoutConstraint(item: headerText, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 20).isActive = true
}
}
The switch itself is showing up, but it's not changing its state.
Do you have an idea how to solve my problem?
I just took your code and replaced the method by viewForHeaderInSection:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
header.isUserInteractionEnabled = true
let groupSwitch = UISwitch(frame: CGRect(x: 0, y: 0, width: 100, height: 20));
groupSwitch.isEnabled = true
groupSwitch.isUserInteractionEnabled = true
header.addSubview(groupSwitch)
return header
}
and it worked flawlessly.
You can customize your view as you want, adding whatever you want inside it before returning the delegate.
If your need is to place on footer, same way, but using viewForFooterInSection.

UITabBar Transition Issue Below iOS 11 Swift

I got this transition issue with iOS 9, I've attached a GIF below.
It looks like the custom textView is presuming x-axis of the tab bar top before segue and then settling to its original position.
However there's no issue with iOS 11, but same with iOS 10.
I also suspect this might be caused by the push segue, since it transitions fine with the other kinds of segue (without any height settling glitch).
I'm using Auto-layout. The comment textView is pinned to buttom of superView. Any tip would be highly appreciated.
Here's the code that's dismissing UITabBar on push.
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "previewVC" {
let destinationController = segue.destination as! PostViewController
destinationController.hidesBottomBarWhenPushed = true
}
}
Try another solution.
Use Your text as input accessory view of UIViewController so remove that bottom view from storyboard
Add Following in your view controller
var viewAcc: UIView?
var sendButton: UIButton!
var inputTextField: UITextField!
override var inputAccessoryView: UIView? {
return viewAcc
}
override var canBecomeFirstResponder: Bool {
return true
}
In View Did load method add following code
Note:Please change constraints according to your requirement
viewAcc = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44))
viewAcc?.backgroundColor = UIColor.white
inputTextField = UITextField (frame: CGRect(x:8, y:0, width:UIScreen.main.bounds.width, height: 44 ))
inputTextField.inputAccessoryView = nil
inputTextField.delegate = self as? UITextFieldDelegate
inputTextField.placeholder = "Enter message..."
viewAcc?.backgroundColor = .white
viewAcc?.addSubview(inputTextField);
let topBorderView = UIView()
topBorderView.backgroundColor = UIColor(white: 0.5, alpha: 0.5)
viewAcc?.addSubview(topBorderView)
viewAcc?.addConstraintsWithFormat(format: "H:|[v0]|", views: topBorderView)
viewAcc?.addConstraintsWithFormat(format: "V:|[v0(0.5)]", views: topBorderView)
sendButton = UIButton(type: .system)
sendButton.isEnabled = true
sendButton.titleLabel?.font = UIFont.systemFont(ofSize: 16)
sendButton.setTitle("Send", for: .normal)
sendButton.contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
sendButton.addTarget(self, action: #selector(handleSend), for: .touchUpInside)
viewAcc?.addSubview(sendButton)
inputTextField.translatesAutoresizingMaskIntoConstraints = false
sendButton.translatesAutoresizingMaskIntoConstraints = false
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .left, relatedBy: .equal, toItem: viewAcc, attribute: .left, multiplier: 1, constant: 8))
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .top, relatedBy: .equal, toItem: viewAcc, attribute: .top, multiplier: 1, constant: 7.5))
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .right, relatedBy: .equal, toItem: sendButton, attribute: .left, multiplier: 1, constant: -2))
viewAcc?.addConstraint(NSLayoutConstraint(item: inputTextField, attribute: .bottom, relatedBy: .equal, toItem: viewAcc, attribute: .bottom, multiplier: 1, constant: -8))
viewAcc?.addConstraint(NSLayoutConstraint(item: sendButton, attribute: .right, relatedBy: .equal, toItem: viewAcc, attribute: .right, multiplier: 1, constant: 0))
viewAcc?.addConstraint(NSLayoutConstraint(item: sendButton, attribute: .bottom, relatedBy: .equal, toItem: viewAcc, attribute: .bottom, multiplier: 1, constant: -4.5))
As your text view is not subview of view controller so it will work as expected
EDIT IPHONE X SUPPORT
lazy var viewAcc: SafeAreaInputAccessoryViewWrapperView = {
return SafeAreaInputAccessoryViewWrapperView(for: button)
}()
Hope it is helpful

UIVisualEffectView not working

I'm trying to add a blur effect to my view using the following code :
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
visualEffectView.frame = containerView.bounds
containerView.addSubview(visualEffectView)
containerView.userInteractionEnabled = true
containerView.bringSubviewToFront(visualEffectView)
visualEffectView.alpha = 1.0
However, I do not see any changes.
UPDATE
My apologies, but I don't think I made my intentions clear in the original question. What I want to achieve is something like this :
My view holds a UIImageView which fills the whole screen. Next, on the bottom of the screen, I have a container which is a UIView which holds some buttons etc. What I want to do is add a blur effect to the containerView, so that the UIImageView behind it is blurred, where the containerView is. So basically I set my containerView's alpha to 0.5, which means its semi transparent and I can see the image behind it. What I want to do now is for that image behind the containerView to be blurred.
CURRENT EFF :
CODE :
extension UIButton{
func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){
self.setImage(image, forState: state)
if let frame = frame{
self.imageEdgeInsets = UIEdgeInsets(
top: frame.minY - self.frame.minY,
left: frame.minX - self.frame.minX,
bottom: self.frame.maxY - frame.maxY,
right: self.frame.maxX - frame.maxX
)
}
}
}
class SingleImageFeedView: UIViewController {
lazy var mainImageView : UIImageView = {
let imageView = UIImageView()
imageView.frame = CGRectMake(0, 0, self.view.frame.width, self.view.frame.width * 1.3)
imageView.contentMode = UIViewContentMode.ScaleAspectFill
imageView.backgroundColor = UIColor.clearColor()
imageView.image = UIImage(named: "pizza")
return imageView
}()
let containerView : UIView = {
let this = UIView(frame: CGRectMake(0,0, 600,150))
this.backgroundColor = UIColor.clearColor()
this.layer.cornerRadius = 5
this.layer.borderColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 1.0).CGColor
this.layer.borderWidth = 0.5
return this
}()
let captionAndProfileImageContainerView : UIView = {
let this = UIView()
//this.backgroundColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 0.0)
this.backgroundColor = UIColor.clearColor()
return this
}()
let profilePicImageView : UIImageView = {
let imageView = UIImageView()
imageView.frame = CGRectMake(0, 0, 53, 53)
imageView.backgroundColor = UIColor.clearColor()
imageView.image = UIImage(named: "pizza")
imageView.contentMode = UIViewContentMode.ScaleToFill
return imageView
}()
let captionTextView: UITextView = {
let textField = UITextView(frame: CGRectMake(0,0, 150, 100))
textField.textColor = UIColor.whiteColor()
textField.editable = false
textField.text = "dwwdwwwwdwddwd"
textField.backgroundColor = UIColor.clearColor()
textField.font = UIFont.systemFontOfSize(12.0)
return textField
}()
let dividerLineView: UIView = {
let view = UIView()
view.backgroundColor = UIColor(white: 0.5, alpha: 0.5)
return view
}()
let commentAndLikesContainerView : UIView = {
let view = UIView()
//view.backgroundColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 0.0)
view.backgroundColor = UIColor.clearColor()
return view
}()
let commentLabel : UILabel = {
let label = UILabel()
label.text = "23"
return label
}()
let likesLabel : UILabel = {
let label = UILabel()
label.text = "25"
return label
}()
let voteUpButton : UIButton = {
let button = UIButton(frame: CGRectMake(0,0,25,25))
button.setImage((scaleImage((UIImage(named: "upvote"))!, toSize: CGSizeMake(25, 25))), inFrame: CGRectMake(0,0,25,25), forState: .Normal)
button.imageView?.contentMode = UIViewContentMode.Center
button.imageView?.clipsToBounds = true
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
return button
}()
let voteDownButton : UIButton = {
let button = UIButton(frame: CGRectMake(0,0,25,25))
button.setImage((scaleImage((UIImage(named: "upvote"))!, toSize: CGSizeMake(25, 25))), inFrame: CGRectMake(0,0,25,25), forState: .Normal)
button.imageView?.transform = CGAffineTransformMakeRotation((180.0 * CGFloat(M_PI)) / 180.0)
button.imageView?.contentMode = UIViewContentMode.Center
button.imageEdgeInsets = UIEdgeInsetsMake(6, 10, 10, 10)
button.imageView?.clipsToBounds = true
return button
}()
let commentButton : UIButton = {
let button = UIButton(frame: CGRectMake(0,0,25,25))
button.setImage((scaleImage((UIImage(named: "comment_feed_icon"))!, toSize: CGSizeMake(25, 25))), inFrame: CGRectMake(0,0,25,25), forState: .Normal)
button.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
button.imageView?.clipsToBounds = true
return button
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.clearColor()
setupViews()
}
func setupViews() {
self.captionAndProfileImageContainerView.addSubview(profilePicImageView)
self.captionAndProfileImageContainerView.addSubview(captionTextView)
self.commentAndLikesContainerView.addSubview(voteUpButton)
self.commentAndLikesContainerView.addSubview(voteDownButton)
self.commentAndLikesContainerView.addSubview(commentButton)
self.commentAndLikesContainerView.addSubview(commentLabel)
self.commentAndLikesContainerView.addSubview(likesLabel)
self.containerView.addSubview(captionAndProfileImageContainerView)
self.containerView.addSubview(dividerLineView)
self.containerView.addSubview(commentAndLikesContainerView)
self.view.addSubview(containerView)
self.view.bringSubviewToFront(containerView)
self.view.addSubview(mainImageView)
self.containerView.bringSubviewToFront(captionAndProfileImageContainerView)
self.containerView.bringSubviewToFront(dividerLineView)
self.containerView.bringSubviewToFront(commentAndLikesContainerView)
profilePicImageView.translatesAutoresizingMaskIntoConstraints = false
captionTextView.translatesAutoresizingMaskIntoConstraints = false
voteDownButton.translatesAutoresizingMaskIntoConstraints = false
containerView.translatesAutoresizingMaskIntoConstraints = false
voteUpButton.translatesAutoresizingMaskIntoConstraints = false
commentLabel.translatesAutoresizingMaskIntoConstraints = false
commentButton.translatesAutoresizingMaskIntoConstraints = false
commentAndLikesContainerView.translatesAutoresizingMaskIntoConstraints = false
captionAndProfileImageContainerView.translatesAutoresizingMaskIntoConstraints = false
likesLabel.translatesAutoresizingMaskIntoConstraints = false
dividerLineView.translatesAutoresizingMaskIntoConstraints = false
mainImageView.translatesAutoresizingMaskIntoConstraints = false
//main imageview constraints
self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 35))
self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: mainImageView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0))
self.view.sendSubviewToBack(mainImageView)
//containerview constraints
self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: -10))
self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Leading, relatedBy: .Equal, toItem: self.view, attribute: .Leading, multiplier: 1, constant: 10))
self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 1, constant: -10))
self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: -160))
//caption and profilepic constraints
self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Top, relatedBy: .Equal, toItem: containerView, attribute: .Top, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Leading, relatedBy: .Equal, toItem: containerView, attribute: .Leading, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: captionAndProfileImageContainerView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1, constant: -50))
self.view.addConstraintsWithFormat("H:|-8-[v0(50)]", views: profilePicImageView)
self.view.addConstraintsWithFormat("V:|-35-[v0(50)]", views: profilePicImageView)
profilePicImageView.layer.cornerRadius = 25
profilePicImageView.layer.masksToBounds = true
self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Top, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Top, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Leading, relatedBy: .Equal, toItem: profilePicImageView, attribute: .Trailing, multiplier: 1, constant: 10))
self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Trailing, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Trailing, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: captionTextView, attribute: .Bottom, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Bottom, multiplier: 1, constant: 0))
//likes and comments and divider
self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Top, relatedBy: .Equal, toItem: captionAndProfileImageContainerView, attribute: .Bottom, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Leading, relatedBy: .Equal, toItem: containerView, attribute: .Leading, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: commentAndLikesContainerView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: voteUpButton, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: voteUpButton, attribute: .Leading, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Leading, multiplier: 1, constant: 10))
self.view.addConstraint(NSLayoutConstraint(item: likesLabel, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 10))
self.view.addConstraint(NSLayoutConstraint(item: likesLabel, attribute: .Leading, relatedBy: .Equal, toItem: voteUpButton, attribute: .Trailing, multiplier: 1, constant: 10))
self.view.addConstraint(NSLayoutConstraint(item: voteDownButton, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: voteDownButton, attribute: .Leading, relatedBy: .Equal, toItem: likesLabel, attribute: .Trailing, multiplier: 1, constant: 10))
self.view.addConstraint(NSLayoutConstraint(item: commentButton, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 0))
self.view.addConstraint(NSLayoutConstraint(item: commentButton, attribute: .Leading, relatedBy: .Equal, toItem: voteDownButton, attribute: .Trailing, multiplier: 1, constant: 30))
self.view.addConstraint(NSLayoutConstraint(item: commentLabel, attribute: .Top, relatedBy: .Equal, toItem: commentAndLikesContainerView, attribute: .Top, multiplier: 1, constant: 10))
self.view.addConstraint(NSLayoutConstraint(item: commentLabel, attribute: .Leading, relatedBy: .Equal, toItem: commentButton, attribute: .Trailing, multiplier: 1, constant: 10))
if !UIAccessibilityIsReduceTransparencyEnabled() {
self.containerView.backgroundColor = UIColor.clearColor()
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
//always fill the view
blurEffectView.frame = containerView.bounds
blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.containerView.insertSubview(blurEffectView, atIndex: 1) //if you have more UIViews, use an insertSubview API to place it where needed
}
else {
self.view.backgroundColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 0.5)
}
containerView.clipsToBounds = true
}
}
I made a simple project with a UIImageView and and a container. Applying the blur to the container blurred the underneath photo. The containers background is set to transparent in storyboard.
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let containerView : UIView = {
let this = UIView(frame: CGRectMake(100,200, 200,200))
this.backgroundColor = UIColor.clearColor()
this.layer.cornerRadius = 5
this.layer.borderColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 1.0).CGColor
this.layer.borderWidth = 0.5
return this
}()
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visualEffectView.frame = containerView.bounds
self.view.addSubview(containerView)
containerView.insertSubview(visualEffectView, atIndex: 0)
let secondImg = UIImageView(image: UIImage(named: "swift_tut.png"))
secondImg.frame = CGRectMake(150,250, 200,200)
self.view.addSubview(secondImg)
self.view.bringSubviewToFront(containerView)
// Do any additional setup after loading the view, typically from a nib.
}
Try This Code , working for me
if !UIAccessibilityIsReduceTransparencyEnabled() {
self.view.backgroundColor = UIColor.clearColor()
let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
//always fill the view
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.view.insertSubview(blurEffectView, atIndex: 1) //if you have more UIViews, use an insertSubview API to place it where needed
}
else {
self.view.backgroundColor = UIColor.blackColor()
}

Resources