I make this in my IF clausure, in the cellForRowAtIndexPath method:
let blurEffect = UIBlurEffect(style: .Light)
let visualEffect = UIVisualEffectView(effect: blurEffect)
visualEffect.frame = cell.attachedImage.bounds
cell.attachedImage.addSubview(visualEffect)
In my ELSE clausure I want to remove the effect from cell.attachedImage.
How can I do it?
cellForRowAtIndexPath should not be adding subviews to cells. It's problematic because cells get reused, and if you're not keeping references to what you've added, you'll end up adding views multiple times and that can cause scrolling speed problems, as well as other bugs.
The proper approach is to create a cell subclass that already has the views set up. Your subclass can contain properties that reference the views so you can change, hide, move, or remove them from their superview as needed. But the logic for this should be in the cell subclass.
You just need to remove the visual effect view from it's superview. The trick is finding the right view to remove when the cell is recycled. The easiest way to do that would be to store it in a custom UITableViewCell implementation:
class CustomTableViewCell: UITableViewCell {
var visualEffectView: UIView?
var attachedImage: UIImageView!
// other views, including outlets
func setupIsBlurred(isBlurred: Bool) {
if isBlurred {
if self.visualEffectView == nil {
let blurEffect = UIBlurEffect(style: .Light)
let visualEffectView = UIVisualEffectView(effect: blurEffect)
visualEffectView.frame = self.attachedImage.bounds
self.attachedImage.addSubview(visualEffectView)
self.visualEffectView = visualEffectView
}
} else {
self.visualEffectView?.removeFromSuperview()
self.visualEffectView = nil
}
}
}
Related
I am trying to make UITabBar look blur.
I am trying to make something like this in this image
But my view now looks like this
This is my view for tabbar
I tried this code in UITabbarController -
Code:
class TabBarViewController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
configureTabbar()
}
func configureTabbar(){
let blurEffect = UIBlurEffect(style: .dark)
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
let vibrancyView = UIVisualEffectView()
vibrancyView.frame = tabBar.bounds
vibrancyView.autoresizingMask = .flexibleWidth
vibrancyView.effect = vibrancyEffect
tabBar.insertSubview(vibrancyView, at: 0)
tabBar.isTranslucent = true
tabBar.backgroundImage = UIImage()
tabBar.backgroundColor = .clear
tabBar.barStyle = UIBarStyle.black
tabBar.barTintColor = UIColor.clear
}
System bars such as UINavigationBar, UITabBar & UIToolbar are translucent by default and you don't need to add anything extra to get that effect.
You just need to make sure that your view extends it's content under system bars. You can go to storyboard and make sure the Extend Edges - Under Bottom Bars is checked for your UIViewController that you plan to see this effect on.
I'm trying to remove the background view for my UITargetPreview. I made the background color clear, however, you can still see the frame of the background.
This is what it currently looks like:
I currently have a view that has the text container and the image inside of it and that's what I use as the view for the UITargetedPreview.
Is there a way to only show the image and the text and not the background frame?
There is a tricky method to hide the shadow and to do that you should find a view with _UIPlatterSoftShadowView class name in the view hierarchy and then hide it.
func viewByClassName(view: UIView, className: String) -> UIView? {
let name = NSStringFromClass(type(of: view))
if name == className {
return view
}
else {
for subview in view.subviews {
if let view = viewByClassName(view: subview, className: className) {
return view
}
}
}
return nil
}
override func tableView(_ tableView: UITableView, willDisplayContextMenu configuration: UIContextMenuConfiguration, animator: UIContextMenuInteractionAnimating?) {
DispatchQueue.main.async {
if let window = UIApplication.shared.delegate?.window! {
if let view = self.viewByClassName(view: window, className: "_UIPlatterSoftShadowView") {
view.isHidden = true
}
}
}
}
NOTE: It's not documented internal class and can be changed anytime further but it works now on both ios 13/14.
Have you tried subclassing the UIView as a UIControl?
I had a similar issue but in my case the view for UITargetedPreview was glitchy. However, changing the UIView to a UIControl fixed everything.
try removing shadow of that background view.
You need to study UIBezierPath() to outline the specific area you want to enclose before you present the target view.
After that, you shall assign the specific path to shadow path / visible path
let params = UIPreviewParameters()
params.backgroundColor = .clear
if #available(iOS 14.0, *) {
params.shadowPath = bubblePath
} else {
params.visiblePath = bubblePath
}
I am having an annoying memory issue with a custom UIView when trying to add it as a tableView footer in a VC. Here is what I do:
I declare a custom UIView class called tableViewHeader. My footer is supposed to display a logo and some text, so it has 2 global variables (a UIImage View & a TextView) and one init method to initialize this UIView class (i.e., by adding the two subViews and set some constraints).
In my VC, in the TableView's footerForSection method I declare a new tableViewFooter variable, set the sub-views (attach my PNG, etc.)
and return that view.
The code works fine to display the footer but it wrecks havoc on my memory - the moment I run my app and open the VC that contains that tableViewHeader my memory jumps by ~20MB (~ 20% jump) and doesn't get released once my VC is released (I checked, the VC itself gets correctly de-initialized but it doesn't show any drop in memory).
I tested a few things:
Without adding that footerView and opening/ closing the VC doesn't show that 20MB jump, so I am fairly sure that this is caused by this custom tableViewHeader...
I also checked to make sure the UIImage I load from my Assets is not too large but it's only 200Kb. On top the problem is more the fact that the memory doesn't get released after my VC gets released...
I've tried declaring my variables (the tableViewFooter variable and the sub-views within that new class) but that leaves my variables as nil when I try to add them as sub-views...
I am running out of ideas as to what the culprit is/ how to fix it so any help you could give me would be really highly appreciated!
My code is below - thanks in advance!
Francois
My TableFooterView class:
class MessageTableFooterView: UIView {
var shouldUpdateConstraints = true
var logoView: UIImageView!
var explanationTextView: UITextView!
var addFriendBtn: UIButton!
override init(frame: CGRect){
super.init(frame: frame)
logoView = UIImageView(frame: CGRect.zero)
logoView?.autoSetDimension(.height, toSize: 145)
logoView?.autoSetDimension(.width, toSize: 145)
self.addSubview(logoView)
explanationTextView = UITextView(frame: CGRect.zero)
explanationTextView?.isEditable = false
explanationTextView?.isSelectable = false
explanationTextView?.font = UIFont(name: "HelveticaNeue", size: 17)
explanationTextView?.textColor = .darkGray
explanationTextView?.textAlignment = .center
self.addSubview(explanationTextView)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
My tableView viewForFooter Method:
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
if MessageService.instance.savedMsgs.count > 0 {
return nil
} else {
let headerView = MessageTableFooterView(frame: CGRect.zero)
headerView.logoView.image = UIImage(named: "savedMessagesIcon")
headerView.explanationTextView?.text = "Blablabla"
return headerView
}
}
I have added 2 labels to my cell and setup these constraints with snapkit, issue is I cant get the cell to expand correctly, it stays at its default height:
titleLabel.snp.makeConstraints { (make) -> Void in
make.top.equalTo(contentView.snp.top)
make.bottom.equalTo(descriptionLabel.snp.top)
make.left.equalTo(contentView.snp.left)
make.right.equalTo(contentView.snp.right)
}
descriptionLabel.snp.makeConstraints { (make) -> Void in
make.top.equalTo(titleLabel.snp.bottom)
make.bottom.equalTo(contentView.snp.bottom)
make.left.equalTo(contentView.snp.left)
make.right.equalTo(contentView.snp.right)
}
I mapped the four edges as you can see, however I know height isnt implied by these, how can I apply a height when the content is by nature, dynamic, and could be various heights...
setup for the labels looks like this:
lazy var titleLabel: UILabel = {
let titleLabel = UILabel()
titleLabel.textColor = .green
titleLabel.textAlignment = .center
contentView.addSubview(titleLabel)
return titleLabel
}()
lazy var descriptionLabel: UILabel = {
let descriptionLabel = UILabel()
descriptionLabel.textColor = .dark
descriptionLabel.textAlignment = .center
descriptionLabel.numberOfLines = 0
contentView.addSubview(descriptionLabel)
return descriptionLabel
}()
Give the table view an estimatedRowHeight, and set its rowHeight to UITableViewAutomaticDimension. Now the cells will be self-sizing. Well, if a label is pinned by all four sides to the content view, and if the cell is self-sizing, then that's all you have to do: the label will automatically change its height to accommodate its text, and the cell will automatically change size to accommodate the label.
First of all I think that you should add subviews to contentView in subclassed UITableViewCell class initializer method.
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.contentView.addSubview(titleLabel)
self.contentView.addSubview(descriptionLabel)
}
Secondly, make sure that in your viewDidLoad method (probably in your ViewController) these two lines are added:
tableView.estimatedRowHeight = 44.0
tableView.rowHeight = UITableView.automaticDimension
Of course, you should change estimatedRowHeight to accommodate your needs.
One more thing worth mentioning - you can create these constraints easier (using power of SnapKit):
titleLabel.snp.makeConstraints { (make) -> Void in
make.top.left.right.equalTo(contentView)
}
descriptionLabel.snp.makeConstraints { (make) -> Void in
make.top.equalTo(titleLabel.snp.bottom)
make.bottom.left.right.equalTo(contentView)
}
Attached you may find a picture of (left) my attempt to create a similar (right) UITableView. they look like buttons but they're only cells that can be clicked on as a tableview cell.
I have tried many different things including adding a container window inside a custom cell, adding a UIImage inside the custom cell but I just can't replicate these cells!
I have tried using a custom cell class, I have tried doing it through IB and I for the crazyiness of me, cannot recreate it.
Would anyone be able to give me a hint on how to create the (inside cell) text-bounding box/square? with the different background colour lighting?
If this can easily be done with IB I'd rather do it this way, but if you have a sample customcell class that I can take a look at that'd be greatly appreciated too!
Thank you for taking the time to look at my question.
I have made a sample for you close to your requirement. Have a look
https://github.com/RajanMaheshwari/CustomTableCell
I would like to do this using a UITableView.
My approach will be taking a custom cell and add a UIView with some constraints from left, right, up and down.
Also I will provide the same background color to UITableView, UIView which is the superview and the cell content view and also make the separator of UITableView as None and Selection of TableCell as None so that the UI looks like
Next after applying every constraint and making a CustomCell and making IBOutlets we will jump to code.
I will do all the shadow and outlining in Custom Cell's awakeFromNib method
This will be my CustomTableViewCell class
class CustomTableViewCell: UITableViewCell {
#IBOutlet weak var labelBackgroundView: UIView!
#IBOutlet weak var cellLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
labelBackgroundView.layer.borderWidth = 0.5
labelBackgroundView.layer.borderColor = UIColor.lightGrayColor().CGColor
labelBackgroundView.layer.shadowColor = UIColor.lightGrayColor().CGColor
labelBackgroundView.layer.shadowOpacity = 0.8
labelBackgroundView.layer.shadowRadius = 5.0
labelBackgroundView.layer.shadowOffset = CGSizeMake(0.0, 2.0)
labelBackgroundView.layer.masksToBounds = false;
}
I have two outlets.
One is the label in which you will be displaying the name.
Other is the outer view which you want to display with some outlining and shadow.
The ViewController code will be:
class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {
var array = [String]()
#IBOutlet weak var myTableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
array = ["Wealth","Health","Esteem","Relationship"]
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return array.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("CustomTableViewCell") as! CustomTableViewCell
cell.cellLabel.text = array[indexPath.row]
cell.labelBackgroundView.tag = indexPath.row
cell.labelBackgroundView.userInteractionEnabled = true
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(cellViewTapped))
cell.labelBackgroundView.addGestureRecognizer(tapGesture)
return cell
}
func cellViewTapped(sender:UITapGestureRecognizer) {
let view = sender.view
let index = view?.tag
print(index!)
}
}
Here I have not used didSelectIndex of UITableViewDelegate as I only want the tap on the Outlining LabelBackgroundView and not on complete cell.
So the final outcome is like this
I think you are on the right path. I did something similar in a project. I created a subclass of UIView (too add a shadow to the view) and added a view with this type inside the cell.
class ShadowedView: UIView {
override func awakeFromNib() {
layer.shadowColor = UIColor(red: 157.0/255.0, green: 157.0/255.0, blue: 157.0/255.0, alpha: 0.5).CGColor
layer.shadowOpacity = 0.8
layer.shadowRadius = 5.0
layer.shadowOffset = CGSizeMake(0.0, 2.0)
}
}
Don't forget to add some constraints to the view inside the cell.
You can arrange your collection view layout in "Size insepector"
And customise your image in the cell.