Вывести список UIButtons в виде сетки без использования CollectionView - PullRequest
Новая
       8

Вывести список UIButtons в виде сетки без использования CollectionView

0 голосов
/ 04 сентября 2018

У меня будет квадратная сетка объектов UIButton. Каждый из этих UIButtons ссылается на уникальную опцию и идентификатор, поступающий из массива API.

Пример опции API 

options =     (
            {
        name = Color;
        "option_id" = 16;
        "product_option_id" = 1324;
        "product_option_value" =             (
                            {
                image = "example.com/image.jpg";
                name = red;
                "option_value_id" = 104;
                price = 0;
                "price_prefix" = "+";
                "product_option_value_id" = 4650;
            },
                            {
                image = "https://www.ishtari.com/image/cache/data/categories/color/Blue-1125.000000x1125.000000_0.jpg";
                name = blue;
                "option_value_id" = 91;
                price = 0;
                "price_prefix" = "+";
                "product_option_value_id" = 4649;
            }
        );

Я читаю API и перечисляю массив в UIButtons 

else if dict["type"].stringValue == "image" {
                        let imageOptionView = UIView(frame: CGRect(x: 5, y: Y, width: self.optionView.frame.size.width - 10, height: 30))
                        imageOptionView.isUserInteractionEnabled = true
                        self.optionView.addSubview(imageOptionView)
                        imageOptionView.tag = i
                        self.imageId.append("")
                        Y += 30;
                        let productOptionArray : JSON = JSON(dict["product_option_value"].arrayObject!)
                        let imagesArray:NSMutableArray = []
                        var internalY:CGFloat = 0
                        for j in 0..<productOptionArray.count {


                            let img = RadioButton(frame: CGRect(x: 5, y: internalY, width: 30, height: 30))

                            let imgName = productOptionArray[j]["name"].stringValue
                            img.setTitle(imgName, for: .normal)
                            img.setTitleColor(UIColor.black, for: .normal)
                            img.titleLabel?.font = UIFont.init(name: REGULARFONT, size: 13.0)


                            let images = productOptionArray[j]["image"].stringValue
                            let data = NSData(contentsOf: NSURL(string: images)! as URL)

                            img.setImage(UIImage(data: data! as Data), for: .normal)
                            img.titleEdgeInsets = UIEdgeInsetsMake(0, 6, 0, 0)
                            img.addTarget(self, action: #selector(self.onRadioButtonValueChangedAccount), for:.touchUpInside)

                            img.tag = j
                            imageOptionView.addSubview(img)
                            internalY += 40;

                            imagesArray.add(img)

            }   
                var paymentInformationContainerFrame = imageOptionView.frame
                    paymentInformationContainerFrame.size.height = internalY
                    imageOptionView.frame = paymentInformationContainerFrame
                    let imgButton:RadioButton = RadioButton()
                    //imgButton.groupButtons = imagesArray as! [RadioButton]

                    Y += internalY;

Однако я хочу, чтобы они отображались в виде сетки программно без использования CollectionView, как это возможно?

Вы видите, что я определил класс RadioButton на основе класса UIButton. Я использую Swift 3

РЕДАКТИРОВАТЬ: нашел решение в target-c здесь, на форуме, затем я преобразовал его в swift 3 ЗДЕСЬ 

else if dict["type"].stringValue == "image" {
            let imageOptionView = UIView(frame: CGRect(x: 5, y: Y, width: self.optionView.frame.size.width - 10, height: 30))
            imageOptionView.isUserInteractionEnabled = true
            self.optionView.addSubview(imageOptionView)
            imageOptionView.tag = i
            self.imageId.append("")
            Y += 30;
            let productOptionArray : JSON = JSON(dict["product_option_value"].arrayObject!)
            let imagesArray:NSMutableArray = []
            var internalY:CGFloat = 0

                for j in 0..<productOptionArray.count {
                            var rows: Int = 5
                            var columns: Int = 1
                            for n in 0..<rows {
                                for m in 0..<columns {

                            var frame = CGRect(x: 1 + 45 * n, y: Int(internalY) * m, width: 40, height: 40)

                            var img = RadioButton(frame: frame) as? RadioButton

                            let imgName = productOptionArray[j]["name"].stringValue
                            img?.setTitle(imgName, for: .normal)
                            img?.setTitleColor(UIColor.black, for: .normal)
                            img?.titleLabel?.font = UIFont.init(name: REGULARFONT, size: 13.0)


                            let images = productOptionArray[j]["image"].stringValue
                            let data = NSData(contentsOf: NSURL(string: images)! as URL)
                            img?.setImage(UIImage(data: data! as Data), for: .normal)
                            img?.titleEdgeInsets = UIEdgeInsetsMake(0, 6, 0, 0)
                            img?.addTarget(self, action: #selector(self.onRadioButtonValueChangedAccount), for:.touchUpInside)

                            img?.tag = j + n * columns + m
                            imageOptionView.addSubview(img!)
                            internalY += 40;

                            imagesArray.add(img!)

                        print("images", images)
                        print("imagesArray", imagesArray)
                        }

                            }
                        }

                        var paymentInformationContainerFrame = imageOptionView.frame
                        paymentInformationContainerFrame.size.height = internalY
                        imageOptionView.frame = paymentInformationContainerFrame
                        let imgButton:RadioButton = RadioButton()
                        imgButton.groupButtons = imagesArray as! [RadioButton]

                        Y += internalY;

}

Теперь я получаю кнопки в виде сетки, однако я не получаю правильные значения. Например, вместо того, чтобы показывать 3 вида (объекты), он повторяет 1 вид (объект) 5 раз, в то время как остальные не отображаются. Плюс расстояние между этим видом и следующим по горизонтали (Y), хотя я несколько раз менял значение Y, но не работал.

Результаты печати imageArray и изображений 

images https://example.com/option-1.jpg
imagesArray (
    "<RadioButton: 0x7fdfafce1b00; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062c660>>",
    "<RadioButton: 0x7fdfafce2e30; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; layer = <CALayer: 0x600000629700>>",
    "<RadioButton: 0x7fdfafdc1d00; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; layer = <CALayer: 0x604000629e20>>",
    "<RadioButton: 0x7fdfafd99910; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062e2a0>>",
    "<RadioButton: 0x7fdfafcdc960; baseClass = UIButton; frame = (181 0; 40 40); opaque = NO; layer = <CALayer: 0x60000062ff40>>"
)
images https://example.com/option-2.jpg
imagesArray (
    "<RadioButton: 0x7fdfafce1b00; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062c660>>",
    "<RadioButton: 0x7fdfafce2e30; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; layer = <CALayer: 0x600000629700>>",
    "<RadioButton: 0x7fdfafdc1d00; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; layer = <CALayer: 0x604000629e20>>",
    "<RadioButton: 0x7fdfafd99910; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062e2a0>>",
    "<RadioButton: 0x7fdfafcdc960; baseClass = UIButton; frame = (181 0; 40 40); opaque = NO; layer = <CALayer: 0x60000062ff40>>",
    "<RadioButton: 0x7fdfafdccc30; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063e8a0>>"
)
images https://example.com/option-2.jpg
imagesArray (
    "<RadioButton: 0x7fdfafce1b00; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062c660>>",
    "<RadioButton: 0x7fdfafce2e30; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; layer = <CALayer: 0x600000629700>>",
    "<RadioButton: 0x7fdfafdc1d00; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; layer = <CALayer: 0x604000629e20>>",
    "<RadioButton: 0x7fdfafd99910; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062e2a0>>",
    "<RadioButton: 0x7fdfafcdc960; baseClass = UIButton; frame = (181 0; 40 40); opaque = NO; layer = <CALayer: 0x60000062ff40>>",
    "<RadioButton: 0x7fdfafdccc30; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063e8a0>>",
    "<RadioButton: 0x7fdfafde4430; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063bd00>>"
)
images https://example.com/option-2.jpg
imagesArray (
    "<RadioButton: 0x7fdfafce1b00; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062c660>>",
    "<RadioButton: 0x7fdfafce2e30; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; layer = <CALayer: 0x600000629700>>",
    "<RadioButton: 0x7fdfafdc1d00; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; layer = <CALayer: 0x604000629e20>>",
    "<RadioButton: 0x7fdfafd99910; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062e2a0>>",
    "<RadioButton: 0x7fdfafcdc960; baseClass = UIButton; frame = (181 0; 40 40); opaque = NO; layer = <CALayer: 0x60000062ff40>>",
    "<RadioButton: 0x7fdfafdccc30; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063e8a0>>",
    "<RadioButton: 0x7fdfafde4430; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063bd00>>",
    "<RadioButton: 0x7fdfafde6200; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400062b620>>"
)
images https://example.com/option-2.jpg
imagesArray (
    "<RadioButton: 0x7fdfafce1b00; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062c660>>",
    "<RadioButton: 0x7fdfafce2e30; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; layer = <CALayer: 0x600000629700>>",
    "<RadioButton: 0x7fdfafdc1d00; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; layer = <CALayer: 0x604000629e20>>",
    "<RadioButton: 0x7fdfafd99910; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062e2a0>>",
    "<RadioButton: 0x7fdfafcdc960; baseClass = UIButton; frame = (181 0; 40 40); opaque = NO; layer = <CALayer: 0x60000062ff40>>",
    "<RadioButton: 0x7fdfafdccc30; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063e8a0>>",
    "<RadioButton: 0x7fdfafde4430; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063bd00>>",
    "<RadioButton: 0x7fdfafde6200; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400062b620>>",
    "<RadioButton: 0x7fdfafde8320; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063c400>>"
)
images https://example.com/option-2.jpg
imagesArray (
    "<RadioButton: 0x7fdfafce1b00; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062c660>>",
    "<RadioButton: 0x7fdfafce2e30; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; layer = <CALayer: 0x600000629700>>",
    "<RadioButton: 0x7fdfafdc1d00; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; layer = <CALayer: 0x604000629e20>>",
    "<RadioButton: 0x7fdfafd99910; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; layer = <CALayer: 0x60400062e2a0>>",
    "<RadioButton: 0x7fdfafcdc960; baseClass = UIButton; frame = (181 0; 40 40); opaque = NO; layer = <CALayer: 0x60000062ff40>>",
    "<RadioButton: 0x7fdfafdccc30; baseClass = UIButton; frame = (1 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063e8a0>>",
    "<RadioButton: 0x7fdfafde4430; baseClass = UIButton; frame = (46 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063bd00>>",
    "<RadioButton: 0x7fdfafde6200; baseClass = UIButton; frame = (91 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400062b620>>",
    "<RadioButton: 0x7fdfafde8320; baseClass = UIButton; frame = (136 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400063c400>>",
    "<RadioButton: 0x7fdfafdea760; baseClass = UIButton; frame = (181 0; 40 40); opaque = NO; tag = 1; layer = <CALayer: 0x60400062f760>>"
)

1 Ответ

0 голосов
/ 04 сентября 2018

Если вы не хотите использовать представление коллекции, вы можете использовать представление вертикального стека, содержащее несколько представлений горизонтального стека, или вы можете использовать представление прокрутки (если вы хотите, чтобы их можно было прокручивать) или содержащий UIView и пользовательский макет. код.

Обратите внимание, что возможно равномерно распределить фиксированное количество видов, используя ограничения, которые устанавливают центральную позицию каждого вида как часть ширины / высоты его вида контейнера

Для позиции x вы должны установить горизонтальное ограничение центра: 

center = (width / (number_of_views + 1) * (view_index + 1)

Таким образом, если бы было 3 вида, горизонтальный центр вашего первого вида, вид 0, был бы: 

center = (width/4) * (0 + 1)

или 

center = width/4

Таким образом, вы сделаете центральное положение самого левого вида относительно ширины суперпредставления с множителем 0,25. Примените одну и ту же формулу ко всем видам в сетке, измерениям x и y.

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

Нет похожих вопросов

...