问题
Hello i am creating App using Swift
and i am creating grid view using Collectionview
but i got different output on different devices here is the code for populating and setting layout of collectionview
var imageArray = [UIImage]()
var nameArray = ["General album","Videos","New album","Custom name album"]
private var numberOfItemsInRow = 2
private var minimumSpacing = 10
private var edgeInsetPadding = 10
extension GalleryViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! GalleryCollectionViewCell
cell.imgView.image = imageArray[indexPath.row]
cell.lblName.text = nameArray[indexPath.row]
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let inset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
edgeInsetPadding = Int(inset.left+inset.right)
return inset
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return CGFloat(minimumSpacing)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return CGFloat(minimumSpacing)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = (Int(UIScreen.main.bounds.size.width) - (numberOfItemsInRow - 1) * minimumSpacing - edgeInsetPadding) / numberOfItemsInRow
return CGSize(width: width, height: width)
}
}
from this code i am not able to achive exact grid layout so i tried below code
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let padding: CGFloat = 50
let collectionViewSize = collectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}
I got this code from this link: Display UICollectionView with 2 columns of equal size square cells
but i am not able to achive exact grid layout its changed based on device i am sharing two screen shot
iPhone 11 Max Pro screen shot:
iPhone 7 Screen Shot:
in iphone 7 i am getting layout perfect but on iPhone 11 Max Pro i am not getting perfect any solution? than please help me
回答1:
Add the following code in the "viewDidLoad" method of your controller:-
collectionView.delegate = self
collectionView.dataSource = self
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical //.horizontal
layout.minimumLineSpacing = 10
layout.minimumInteritemSpacing = 10
collectionView.setCollectionViewLayout(layout, animated: true)
Add only "insetForSectionAt" and "sizeForItemAt" these methods to handle the layout of your collection View. As I have modified the delegate and data source you can directly use it.
extension GalleryViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! GalleryCollectionViewCell
cell.imgView.image = imageArray[indexPath.row]
cell.lblName.text = nameArray[indexPath.row]
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)//here your custom value for spacing
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let lay = collectionViewLayout as! UICollectionViewFlowLayout
let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing
return CGSize(width:widthPerItem, height: widthPerItem)
}
}
回答2:
Im assuming your issue here is that the horizontal spacing is too much in iphone 11 Pro Xmax . The reason to this is that the iphone xsMax screen is much larger than the iphone 7 Screen. Take a look at this link below it has all the IOS screen sizes and widths and pixels which may come in handy. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
As for your issue , the width of the device is different from iphone 7 to iphone 11 so the issue is you are setting the minimumSpacing ,width , height for an iphone 7 screen and you need to use constraints for the sides and use the constarints to adjust the widths , and heights and the spacing needs to be edited so that it is similar to all screens .
The chances of it coming perfectly equal in all your screens are minor but you can do much better with this approach .
来源:https://stackoverflow.com/questions/63071918/collectionview-grid-layout-issue-with-different-devices