UITableView изменяет изображение и положение заголовка ячейка за ячейкой - PullRequest
0 голосов
/ 05 февраля 2019

Мне было интересно, есть ли какой-нибудь возможный способ создать табличное представление с этим стилем:

enter image description here

У меня есть словарь, содержащий значения заголовка и изображенияМне нужно создать ячейку один Image-Right / Title-Left и затем наоборот.Как можно добиться чего-то подобного?

Ответы [ 4 ]

0 голосов
/ 05 февраля 2019

Вы можете сделать это с помощью setAffineTransform следующим образом:

• создать свой tableView с одной ячейкой-прототипом с изображением слева и меткой справа
• затем сделать это:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellIdentifier", for: indexPath) as! YourTableViewCell

    if (indexPath.row % 2 == 0) {
        cell.contentView.layer.setAffineTransform(CGAffineTransform(scaleX: -1, y: 1))
        cell.YourImage.layer.setAffineTransform(CGAffineTransform(scaleX: -1, y: 1))
        cell.YourLabel.layer.setAffineTransform(CGAffineTransform(scaleX: -1, y: 1))
    }

    // do what ever you want ...

    return cell
}

также лучшим решением является определение 2 ячеек-прототипов, но в вашем случае это сложный и быстрый способ достижения вашей цели.

0 голосов
/ 05 февраля 2019

Есть много способов сделать это:

  1. Создать 2 ячейки.Есть 2 ячейки, такие как OddTableViewCell и EvenTableViewCell.Вы можете выбрать путь индекса, который будет использоваться в методе cellForRow, например:

    extension ViewController: UITableViewDataSource {
    
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return dataArray.count
        }
    
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            if(indexPath.row%0 == 0) {
                let cell = tableView.dequeueReusableCell(withIdentifier: "EvenTableViewCell", for: indexPath) as! EvenTableViewCell
                cell.model = dataArray[indexPath.row]
                return cell
            } else {
                let cell = tableView.dequeueReusableCell(withIdentifier: "OddTableViewCell", for: indexPath) as! OddTableViewCell
                cell.model = dataArray[indexPath.row]
                return cell
            }
        }
    
    }
    
  2. Имеется одна ячейка, но дублированные виды, поэтому у вас есть 2 метки и 2 вида изображений.Затем спрячьте их, как вам нужно:

    class MyCell: UITableViewCell {
    
        @IBOutlet private var leftImageView: UIImageView?
        @IBOutlet private var rightImageView: UIImageView?
    
        @IBOutlet private var leftLabel: UILabel?
        @IBOutlet private var rightLabel: UILabel?
    
        var userImage: UIImage? {
            didSet {
                refresh()
            }
        }
        var userName: String? {
            didSet {
                refresh()
            }
        }
        var imageOnLeft: Bool = false {
            didSet {
                refresh()
            }
        }
    
        func refresh() {
            leftImageView?.image = imageOnLeft ? userImage : nil
            leftImageView?.isHidden = !imageOnLeft
            rightImageView?.image = imageOnLeft ? nil : userImage
            rightImageView?.isHidden = imageOnLeft
    
            leftLabel?.text = imageOnLeft ? nil : userName
            leftLabel?.isHidden = imageOnLeft
            rightLabel?.text = imageOnLeft ? userName : nil
            rightLabel?.isHidden = !imageOnLeft
        }
    
    }
    
  3. Иметь одну ячейку с видом на стек.Добавьте метку и изображение в виде стека.Вы можете изменить порядок элементов в представлении стека.Некоторый многообещающий ответ можно найти здесь .Остальные должны быть очень похожи на второе решение.

(4.) Также вы можете просто использовать представление коллекции и иметь ячейку метки и ячейку изображения.

0 голосов
/ 05 февраля 2019

Да, вы можете использовать табличное представление для достижения ваших требований.вам нужно будет выполнить следующие шаги:

Метод 1:

  • Создайте две ячейки табличного представления XIB, одну с меткой левой стороны и изображением правой стороны,второй - с левым и правым изображениями.
  • Сохраните один и тот же класс XIB, который вы создали, но с разными идентификаторами.
  • В табличном представлении cellForRowAtIndexPath методреализуйте следующую логику.

    extension ViewController: UITableViewDataSource {
    
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return datasourceArray.count
        }
    
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            if(indexPath.row % 0 == 0) {
                let cell = tableView.dequeueReusableCell(withIdentifier: "RightLabelTableViewCell", for: indexPath) as! CustomTablViewCell
                cell.model = datasourceArray[indexPath.row]
                return cell
            } else {
                let cell = tableView.dequeueReusableCell(withIdentifier: "LeftLabelTableViewCell", for: indexPath) as! CustomTablViewCell
                cell.model = datasourceArray[indexPath.row]
                return cell
             }
           }
         }
    

Примечание: вы можете использовать один класс для TableViewCell с другим идентификатором и соответственно оформить свой xib.

Метод 2:

Переверните представление содержимого ячейки табличного представления таким образом, чтобы они поменялись местами в вашем пользовательском интерфейсе.

добавьте следующий код в ваш cellForRowAtIndexPathа также добавить еще одну его часть, потому что ячейка для строки может вести себя странно из-за удаления:

 extension UIView {
    /// Flip view horizontally.
    func flipX() {
        transform = CGAffineTransform(scaleX: -transform.a, y: transform.d)
    }
 }

Использование:

cell.contentView.flipX()
cell.yourImage.flipX()
cell.youImageName.flipX()

Не забудьтедобавить еще часть в методе cellForRowAt.

0 голосов
/ 05 февраля 2019
  • Создайте одну ячейку с 2-мя изображениями и 2-мя метками слева и справа
  • , когда вы перешли на левое изображение, на этот раз скрыть правое изображение так же, как в метке.

cell

import UIKit

class TestTableViewCell: UITableViewCell {

    @IBOutlet weak var lbl_left: UILabel!
    @IBOutlet weak var lbl_right: UILabel!
    @IBOutlet weak var img_right: UIImageView!
    @IBOutlet weak var img_left: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    func configure_cell(left:Bool)
    {
        if left{
            img_left.isHidden = true
            img_right.isHidden = false
            lbl_left.isHidden = false
            lbl_right.isHidden = true
            self.img_right.image = UIImage(named: "testimg")
        }else{
            img_left.isHidden = false
            img_right.isHidden = true
            lbl_left.isHidden = true
            lbl_right.isHidden = false
            self.img_left.image = UIImage(named: "testimg")
        }
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

ViewController

extension ViewController:UITableViewDataSource,UITableViewDelegate
{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120
    }
    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TestTableViewCell", for: indexPath) as? TestTableViewCell
        if (indexPath.row + 1) % 2 == 0 {
            cell?.configure_cell(left: true)
        } else {
            cell?.configure_cell(left: false)
        }

        return cell!
    }
}

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...