UICollectionViewCell content change when scrolled up/down - ios

I am working on an UICollectionView where I have to rotate a label in the UICollectionViewCell. Before scrolling up/down it looks perfect. But once I scrolled the UICollectionView the label retransform to the status it was before.
Before Scrolling :
After Scrolling :
The code I used :
cell.lblName?.frame = CGRect(x: 15, y: (((self.collectionView?.frame.size.height)!/3)/2) - 20, width: cell.frame.size.height , height: 40)
cell.lblName?.backgroundColor = UIColor.red
cell.lblName?.transform = CGAffineTransform(rotationAngle: CGFloat((Double.pi/2) * 3))

Well, I did test for my self and its working perfectly, what i have done is
cell.label.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 2)
and i did useAutolayout, and it working as expected.
Follow the image bellow:
Cell ImageView and UILabel with Autolayout
Hope this help you.
Thanks
EDITED
Use cell.label.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2) for your type rotation.

You just need rotate view which are taken inside the cell.
Write this code snippet in cellForItem dataSource method of collection view.
cell.viewDemo.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)

Related

How to show a pop up view exactly in the center of what is currently being displayed in a table view conntroller?

I have a SettingsVC for my app, it contains a TableView detailing all the available options for my app. I want to show a pop up view whenever the user taps on one of these options to avoid taking the user to another VC. I have currently implemented the pop up view in others parts of app, but there's an issue when trying to present it from the SettingsVC, it seems that the bounds are for the whole size of the tableView and not what is currently on the screen, so if I scroll down, the pop up appears all the way up... Any ideas. Here's my setup method for the pop up view. The animateIn() method is to present the pop up view and the blur view.
func setUpPickerView(){
blurView.bounds = self.view.bounds
pickerView.bounds = CGRect(x: 0, y: 0, width: self.view.bounds.width * 0.75, height: self.view.bounds.height * 0.45)
pickerView.layer.cornerRadius = 15.0
pickerView.layer.cornerRadius = 15.0
animateIn(desiredView: blurView)
animateIn(desiredView: pickerView)
tableView.isUserInteractionEnabled = false
blurView.alpha = 0.6
}
The bounds of a view is the coordinate system inside the view. The frame of a view defines where the view appears in its parent's coordinate system. Your code is only seeing the bounds so the frame is probably defaulting to the top of the screen. I suspect you want something like:
blurView.frame = self.view.bounds
pickerView.frame = CGRect(
x: (blurView.bounds.size.height - self.view.bounds.width * 0.75) / 2
y: (blurView.bounds.size.width - self.view.bounds.height * 0.45) / 2
width: self.view.bounds.width * 0.75
height: self.view.bounds.height * 0.45)
However would you REALLY should probably be doing is setting up the blurView and the pickerView then establishing their locations using constraints.

animated expanding of subview by action without constraints

I have a UIViewController with a UIScrollView as subview. the scrollview size and origin are computed properties.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let sizeWidth = view.frame.size.width - (view.frame.size.width / 5)
let sizeHeight = (view.frame.height / 5) * 3
let originX = (view.width-sizeWidth) / 2
// sizes & positions of container & subviews
slideScrollView.frame = CGRect(x: originX,
y: 50,
width: sizeWidth,
height: sizeHeight)
how it looks like
by tapping the sign in or login button, the scrollview should expand animated. but it is the opposite.
#objc private func loginButtonTapped() {
UIView.animate(withDuration: 5, delay: 0, options: .allowAnimatedContent) {
self.slideScrollView.frame.size.height += (self.view.frame.height / 5) * 1
}
}
this is the result
it should expand, but it sets back to the action height property and expand to regular size,
i hope anyone can tell me why this happens and may have a solution.
Thats because your viewDidLayoutSubviews gets called multiple times (In this case twice as I have noticed by adding debug statements) when you start your animation with UIView.animate(withDuration: and because you always reset the slideScrollView.frame in viewDidLayoutSubviews you see unnecessary side effects.
You can always check this by putting a break point in viewDidLayoutSubviews when loginButtonTapped gets triggered. Refer this question for similar explaination
If your intention to use viewDidLayoutSubviews is to know when view is properly loaded and its frames are updated properly you can always use
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let sizeWidth = view.frame.size.width - (view.frame.size.width / 5)
let sizeHeight = (view.frame.height / 5) * 3
let originX = (view.width-sizeWidth) / 2
// sizes & positions of container & subviews
slideScrollView.frame = CGRect(x: originX,
y: 50,
width: sizeWidth,
height: sizeHeight)
}
Now your loginButtonTapped should work fine.
As per apple docs: viewDidLayoutSubviews Called to notify the view controller that its view has just laid out its subviews.
With that I think my explanation above makes sense, you use UIView.animate(withDuration: to modify the frame of scrollView so obviously View updates/re-renders the subViews hence viewDidLayoutSubviews gets called when you call UIView.animate(withDuration: and because of your frame update code in viewDidLayoutSubviews you see adverse side effects

Image adding in a Custom TableView

Is it possible to design the below UI using tableview ?
I know, I can define numberOfSections in the tableview. In each cell, I can define number of column. But, i am not sure how to add the image in the tableView ? What i understand is the image will be on the right side merging some cells. But how to do it or is it possible or not ?
Any help will be highly appreciated.
You will not be able to add an image to those 4 cells at once.
As I see it, there are two options:
create a single cell for those 4 cells, in which use UIStackViews or just autolayout to lay the contents out along with the image.
Change the tableView to a collectionView with custom layout implementation, then you can have the image as a single cell laid out to the right of those cells.
I myself would chose the first approach, because I believe it will be easier and faster to implement.
Yeah its possible. You need to do some calculation for Y Position, trailing space from tableview, etc
Add your image view into tableView.
let imageWidth: CGFloat = 150.0
let imageHeight: CGFloat = 150.0 //Addition of height of meging cells
let trailingSpace: CGFloat = 25.0
let yPosition: CGFloat = 100 //Calculate Y position depend on NavigationBar, Name cell, etc...
let imgView = UIImageView(frame: CGRect(x: view.frame.width - imageWidth - trailingSpace, y: yPosition, width: imageWidth, height: imageHeight))
imgView.backgroundColor = .clear
imgView.image = UIImage(named: "Waterfall")
imgView.contentMode = .scaleAspectFit
tableView.addSubview(imgView)

Add Corner Radius and drop shadow to UICollectionViewCell Swift 3

I'm trying to add corner radius + dropdown shadow to my UICollectionView Cell,
my Cell sturcuture is like this:
I added view to add shadow on it, and try to add corner radius to the to subviews: the white one and the imageview, I used the following code:
let frame = CGRect(x:0, y: 0, width: UIScreen.main.bounds.width, height: 80)
shadowingViewOutlet.layer.masksToBounds = false
shadowingViewOutlet.layer.shadowColor = UIColor.black.cgColor
shadowingViewOutlet.layer.shadowOffset = CGSize(width: CGFloat(0.0), height: CGFloat(3.0))
shadowingViewOutlet.layer.shadowOpacity = 0.5
if shadowingViewOutlet.layer.shadowPath != nil {
shadowingViewOutlet.layer.shadowPath = UIBezierPath(roundedRect:frame, cornerRadius:3).cgPath
}
but that dosen't work fine!
Anyone try to apply the same functionlaity to UICollectionViewCell and have a result in it?
please help.
Thanks.

Creating a grey space between the header view and the first cell

I am trying to create a grey space between the header view (with the two buttons) and the dynamic tableview as shown here:
This is what I was able to create so far:
Now there is a line between the header view and the dynamic table view. However, I would like to have a grey space as shown in the picture above. I tried using Grouped instead of Plain. And I hypothesize that this is a way to achieve my goal because it does add grey to my view like so but only at the bottom:
So I figured if I can add some padding unto my headerview, that cause the grey to show since I think the background is grey now. So I tried writing some code:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let headerView = taskListTableView.tableHeaderView
headerView!.setNeedsLayout()
headerView!.layoutIfNeeded()
let cGPoint = CGPoint(x: 0.0, y: 0.0)
let cGHeight = CGSize.init(width: 0, height: 10)
var frame = headerView!.frame
headerView!.bounds = CGRect(origin: cGpoint, size: cGHeight)
frame.size.height = CGFloat(30.0)
headerView!.frame = frame
taskListTableView.tableHeaderView = headerView
}
But this code is won't compile. Am I on the right track? What else could I do to achieve this effect?

Resources