同一视图控制器中的水平和垂直 collectionVIews
Horizontal and vertical collectionVIews in the same view Controller
我需要在 viewController 中显示两个 collectionView。
在顶部一行,然后在视图的其余部分是一个具有垂直滚动和两列的 collectionView。
这是显示两个 collectionViews 的当前代码:
@IBOutlet weak var collectionViewMarcas: UICollectionView!
var marcas = [Marcas]()
@IBOutlet weak var collectionViewDispositivos: UICollectionView!
var dispositivos = [Dispositivos]()
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if collectionView == collectionViewMarcas {
return marcas.count
}
return dispositivos.count
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// print("MARCA:"+marcas[indexPath.row].nombre)
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == self.collectionViewMarcas {
let cellMarcas = collectionView.dequeueReusableCell(withReuseIdentifier: "marca", for: indexPath) as! MarcasCollectionViewCell
let foto_marca = marcas[indexPath.row].icono
print(foto_marca)
let url = URL(string: "https://.../iconos/"+foto_marca)
UIImage.loadFrom(url: url!) { image in
cellMarcas.icono_marca.image = image
}
return cellMarcas
}
else {
let cellDisp = collectionView.dequeueReusableCell(withReuseIdentifier: "dispositivo", for: indexPath) as! DispositivosCollectionViewCell
let foto_dispos = dispositivos[indexPath.row].foto_dispositivo
print(foto_dispos)
let modelo = dispositivos[indexPath.row].modelo_del_dispositivo
cellDisp.modelo_disp.text = modelo
let precio = dispositivos[indexPath.row].precio_dispositivo + " €"
cellDisp.precio_disp.text = precio
let marca = dispositivos[indexPath.row].logo_marca
let urlmarca = URL(string: "https://../iconos/"+marca)
UIImage.loadFrom(url: urlmarca!) { image in
cellDisp.marca_logo.image = image
}
let urlfoto = URL(string: "https://.../dispositivos/"+foto_dispos)
UIImage.loadFrom(url: urlfoto!) { image in
cellDisp.foto_disp.image = image
}
return cellDisp
}
}
这里有截图:
我已经尝试实施 UICollectionViewDelegateFlowLayout 然后
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)
}
此实现适用于垂直 collectionView,但它也改变了水平 collectionView。
我怎样才能只更改垂直布局?
在您的 cellForItemAt
方法中,您正确地检查了将单元格分配给哪个集合视图。你基本上必须在 collectionView(_:layout:sizeForItemAt:)
.
中做同样的事情
由于您的集合视图的委托和数据源都是同一个视图控制器,因此无需检查更改是否应用于两者。
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
//You only apply the changes to collectionViewMarcas
if collectionView == self.collectionViewMarcas {
let padding: CGFloat = 50
let collectionViewSize = collectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}
}
您需要 Return 两个 Collection view Size collectionViewLayout 委托方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
//You only apply the changes to collectionViewMarcas
if collectionView == self.collectionViewMarcas
{
let padding: CGFloat = 50
let collectionViewSize = collectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}
// Here Below Line You need To return collectionViewDispositivos cell size
return CGSize(width: 60, height: 60)
}
我需要在 viewController 中显示两个 collectionView。
在顶部一行,然后在视图的其余部分是一个具有垂直滚动和两列的 collectionView。
这是显示两个 collectionViews 的当前代码:
@IBOutlet weak var collectionViewMarcas: UICollectionView!
var marcas = [Marcas]()
@IBOutlet weak var collectionViewDispositivos: UICollectionView!
var dispositivos = [Dispositivos]()
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if collectionView == collectionViewMarcas {
return marcas.count
}
return dispositivos.count
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// print("MARCA:"+marcas[indexPath.row].nombre)
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == self.collectionViewMarcas {
let cellMarcas = collectionView.dequeueReusableCell(withReuseIdentifier: "marca", for: indexPath) as! MarcasCollectionViewCell
let foto_marca = marcas[indexPath.row].icono
print(foto_marca)
let url = URL(string: "https://.../iconos/"+foto_marca)
UIImage.loadFrom(url: url!) { image in
cellMarcas.icono_marca.image = image
}
return cellMarcas
}
else {
let cellDisp = collectionView.dequeueReusableCell(withReuseIdentifier: "dispositivo", for: indexPath) as! DispositivosCollectionViewCell
let foto_dispos = dispositivos[indexPath.row].foto_dispositivo
print(foto_dispos)
let modelo = dispositivos[indexPath.row].modelo_del_dispositivo
cellDisp.modelo_disp.text = modelo
let precio = dispositivos[indexPath.row].precio_dispositivo + " €"
cellDisp.precio_disp.text = precio
let marca = dispositivos[indexPath.row].logo_marca
let urlmarca = URL(string: "https://../iconos/"+marca)
UIImage.loadFrom(url: urlmarca!) { image in
cellDisp.marca_logo.image = image
}
let urlfoto = URL(string: "https://.../dispositivos/"+foto_dispos)
UIImage.loadFrom(url: urlfoto!) { image in
cellDisp.foto_disp.image = image
}
return cellDisp
}
}
这里有截图:
我已经尝试实施 UICollectionViewDelegateFlowLayout 然后
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)
}
此实现适用于垂直 collectionView,但它也改变了水平 collectionView。
我怎样才能只更改垂直布局?
在您的 cellForItemAt
方法中,您正确地检查了将单元格分配给哪个集合视图。你基本上必须在 collectionView(_:layout:sizeForItemAt:)
.
由于您的集合视图的委托和数据源都是同一个视图控制器,因此无需检查更改是否应用于两者。
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
//You only apply the changes to collectionViewMarcas
if collectionView == self.collectionViewMarcas {
let padding: CGFloat = 50
let collectionViewSize = collectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}
}
您需要 Return 两个 Collection view Size collectionViewLayout 委托方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
//You only apply the changes to collectionViewMarcas
if collectionView == self.collectionViewMarcas
{
let padding: CGFloat = 50
let collectionViewSize = collectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}
// Here Below Line You need To return collectionViewDispositivos cell size
return CGSize(width: 60, height: 60)
}