Need to move the cell inside the uicollectionview cell && Textfield image adding - swift

need to move the collection view cell accordingly. I have attached my screenshot for your reference:
the above is my current image but I need that to be like this:
Then I need to add image to the textfield but I have added some code but I could not add it
searchtextfield.leftViewMode = UITextFieldViewMode.always
searchtextfield.leftView = UIImageView(image: UIImage(named: "search"))

For the collection view cell width and height you have to use below method:
extension "Your Controller" : UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.size.width/2 - 15, height: collectionView.frame.size.width/2 - 15)
}
}
To make the the cell square I have added the with and height same. You can change it according to your requirement. The collection view width changes for different devices so you have to change the cell width and height too.
Don't forget to do the change in this too according to your requirement:
Hope this helps.

Related

Issues with resizing my UICollectionViewCell

I am currently trying to resize my cell within my CollectionView. I have already implemented the dataSource, CollectionViewDelegate and CollectionViewDelegateFlowLayout.
This is the code I have for the latter:
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout, sizeForItemAt
indexPath: IndexPath) -> CGSize
{
return CGSize(width: 100.0, height: 100.0)
}
}
The problem is that when I head over to my storyboard and select my CollectionView and then go to the Attributes Inspector to switch "Estimate Size" from "Automatic" to "None," I would get three columns after running my app [Image #1].
The result I am looking for is to be able to have one middle column with a bigger cell as I show on Image #2.
Has anybody dealt with this problem before?
In order to show a collection view cells as a list, you can change your cell width equals to the width of the collection view. Giving constant width will not work for different device size.
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout, sizeForItemAt
indexPath: IndexPath) -> CGSize
{
let width = collectionView.frame.width
return CGSize(width: width, height: 100.0)
}
}
And give your desired constraint values for the inner rectangular view to achieve the desired look. Make collectionView cell background to clear.

Auto-Layout for CollectionViewCell: Trailing/Leading constraints change cell size

I just can´t get familar with auto layout in Xcode. When I set trailing and leading constrains for Header Stack View, Bottom Stack View or the image between them, then the size (height/width) of my cell changes. Why does it happen and how can I avoid it? I think something isn´t right with the kind I build layouts. I am very grateful for any help.
I set the cell size with this code:
extension MainVC: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let height = view.frame.size.height
let width = view.frame.size.width
return CGSize(width: width * 0.42, height: height * 0.3)
}
}
My cell layout:
This is how the app looks when I use constrains for the Bottom Stack View.
This is without constrains for the Bottom Stack View (correct cell size).
Cells can now self-size with auto layout and ignore what you return in collectionView(_:layout:sizeForItemAt:). If you want to use collectionView(_:layout:sizeForItemAt:), change Estimate size to None in the storyboard.
https://stackoverflow.com/a/58369142/14351818

UICollectionViewCell not forcing Cell Size

I am using
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 400, height: 600)
}
to specify my CollectionView's cell sizes. It works fine but as soon as I add a width constraint (UILabel.width == ContentView.width) to my UILabel inside the ContentView of the cell, the cell's width shrinks to the intrinsic width of the UILabel.
I am using UICollectionViewDelegateFlowLayout and horizontal scrolling.
How can I force the ContentView to stick to the cell size I specified and let the subviews follow the auto layout constraints?
The problem is that in the storyboard your collection view's Estimate Size is configured to Automatic:
You need to set it to None if you want your sizeForItemAt implementation to be obeyed rather than the internal constraints.

How to make 2 rows in horizontal collection view without using sections

The horizontal scrolling in UICollectionView only returns one row and I need to make a horizontal scrolling collection view with 2 rows just like the image below
[1]: https://i.stack.imgur.com/Vs1kt.png :[1]
You need to set fix height of the CollectionView and then use sizeForItemAt() under UICollectionViewDelegateFlowLayout which returns CGSize. You have to manage the cell height something like this.
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 50.0, height: collectionViewHeight / 2) //<-- Manage height and width accordingly.
}

How to align collectionview cells right next to each other?

I am creating a profile page screen for my application. The screen displays all the user's recent posts. I used storyboard to create two UICollectionViewCells in a UICollectionView, one that displays your profile info and the other that displays your posts. See this for how I designed it in storyboard: https://i.stack.imgur.com/6TzwK.png
When I run the application, I get the following result: https://i.stack.imgur.com/XmvY3.jpg
However, I desire the cells placed in a way that it looks like the following: https://i.stack.imgur.com/nWQ14.jpg
How do I force the cells the align so it looks like the image above? Thanks!
Found an answer to the question. Implement UICollectionViewDelegateFlowLayout delegate to your class. Then, include the following method into the class:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = UIScreen.main.bounds.width // get the width of the screen
let scale = (width / 3) // get the width (and height) of each cell
if indexPath.row != 0 { // check to see if the cell is the profile header
return CGSize(width: scale, height: scale) // if not, then return the cell size
}
return CGSize(width: width, height: ((238/414) * width)) // if it is the profile header, return the size for it.
}
Make sure "Min Spacing" for the UICollectionView's storyboard setting to 0,0. The cells will then align into a grid view.