Как сделать Horizontal scrollView и несколько кнопок в нем (программирование)

Question

Извини, у меня проблема. Я не пользуюсь storyBoard.

Я хочу сделать вид, как это.
фотография от terenceLuffy/AppStoreStyleHorizontScrollView

но я пытаюсь сделать это. Наконец,scrollView просто показывает последнюю кнопку, как это.

Это код:

var scView:UIScrollView = UIScrollView()
var buttonPadding:CGFloat = 10
var xOffset:CGFloat = 10


scView.backgroundColor = UIColor.blue
scView.translatesAutoresizingMaskIntoConstraints = false


func viewDidLoad() {

for i in 0 ... 10 {

    let button = UIButton()

    button.tag = i
    button.backgroundColor = UIColor.darkGray
    button.setTitle("\(i)", for: .normal)
    button.addTarget(self, action: #selector(btnTouch), for: UIControlEvents.touchUpInside)

    button.frame = CGRect(x: xOffset, y: CGFloat(buttonPadding), width: 70, height: 30)

    xOffset = xOffset + CGFloat(buttonPadding) + button.frame.size.width
    scView.addSubview(button)


}

scView.contentSize = CGSize(width: xOffset, height: scView.frame.height)

}

Помогите мне, пожалуйста. Спасибо всем!

Answer 1

Я попробовал ваш код и немного его изменил. Это работает, как и ожидалось, если у вас нет чего-то другого:

var scView:UIScrollView!
let buttonPadding:CGFloat = 10
var xOffset:CGFloat = 10

override func viewDidLoad() {
    super.viewDidLoad()
    scView = UIScrollView(frame: CGRect(x: 0, y: 120, width: view.bounds.width, height: 50))
    view.addSubview(scView)

    scView.backgroundColor = UIColor.blue
    scView.translatesAutoresizingMaskIntoConstraints = false

    for i in 0 ... 10 {
        let button = UIButton()
        button.tag = i
        button.backgroundColor = UIColor.darkGray
        button.setTitle("\(i)", for: .normal)
        //button.addTarget(self, action: #selector(btnTouch), for: UIControlEvents.touchUpInside)

        button.frame = CGRect(x: xOffset, y: CGFloat(buttonPadding), width: 70, height: 30)

        xOffset = xOffset + CGFloat(buttonPadding) + button.frame.size.width
        scView.addSubview(button)


    }

    scView.contentSize = CGSize(width: xOffset, height: scView.frame.height)
}

Answer 2

Есть два способа сделать это:) Один из сложных способов использования scrollView и вычисления смещения и программной настройки представлений в ScrollView, так как в subView остальное использует CollectionView

Шаг 1:

Добавьте UICollectionView в раскадровку, установите высоту collectionView в соответствии с вашими требованиями:)

Шаг 2

Создайте ячейку, размер которой зависит от ваших требований. Я создал ячейку с цветом фона оранжевый / розовый. Добавил ярлык, чтобы показать ваш номер.

Шаг 3:

Установите для ячейки повторно используемый идентификатор ячейки, а также установите ее класс:)

Шаг 4:

Установить горизонтальное направление прокрутки collectionView:)

Шаг 5:

Теперь реализуем делегаты collectionView и методы источника данных:)

extension ViewController : UICollectionViewDataSource,UICollectionViewDelegate {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath) as! MyCollectionViewCell
        cell.myLabel.text = "ABCD"
        return cell;
    }
}

Это все:)

Окончательный O/P

Посмотрите на collectionView с ячейкой ABCD:D

Дополнительная информация

Если вы перетаскиваете collectionView на UIViewController, вы можете увидеть, что collectionView оставляет пробел в верхней части, который вы можете устранить, сняв флажок Adjust ScrollView Insets of ViewController:)

Answer 3

import UIKit

class ViewController: UIViewController {

    var imageStrings:[String] = []
     var myScrollView:UIScrollView!


    @IBOutlet weak var previewView: UIImageView!



    var scrollWidth : CGFloat = 320
    let scrollHeight : CGFloat = 100
    let thumbNailWidth : CGFloat = 80
    let thumbNailHeight : CGFloat = 80
    let padding: CGFloat = 10

    override func viewDidLoad() {
        super.viewDidLoad()

        imageStrings = ["image01","image02","image03","image04","image05","image06","image07","image08"]

        scrollWidth = self.view.frame.width

        //setup scrollView
        myScrollView = UIScrollView(frame: CGRectMake(0, self.view.frame.height - scrollHeight, scrollWidth, scrollHeight))

        //setup content size for scroll view
        let contentSizeWidth:CGFloat = (thumbNailWidth + padding) * (CGFloat(imageStrings.count))
        let contentSize = CGSize(width: contentSizeWidth ,height: thumbNailHeight)

        myScrollView.contentSize = contentSize
        myScrollView.autoresizingMask = UIViewAutoresizing.FlexibleWidth


        for(index,value) in enumerate(imageStrings) {
            var button:UIButton = UIButton.buttonWithType(.Custom) as! UIButton
            //calculate x for uibutton
            var xButton = CGFloat(padding * (CGFloat(index) + 1) + (CGFloat(index) * thumbNailWidth))
            button.frame = CGRectMake(xButton,padding, thumbNailWidth, thumbNailHeight)
            button.tag = index

            let image = UIImage(named:value)
            button.setBackgroundImage(image, forState: .Normal)
            button.addTarget(self, action: Selector("changeImage:"), forControlEvents: .TouchUpInside)

            myScrollView.addSubview(button)
        }
        previewView.image = UIImage(named: imageStrings[0])
        self.view.addSubview(myScrollView)
    }
        // Do any additional setup after loading the view, typically from a nib.


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func changeImage(sender:UIButton){
        let name = imageStrings[sender.tag]
        previewView.image = UIImage(named: name)
    }


}

Answer 4

Это легко с минимальным использованием раскадровки. Вы можете избежать этого довольно легко. Все, что вам нужно:

1. Вид прокрутки
2. Горизонтальный вид стека
3. Установите ограничения выше, как показано в проекте
4. Количество кнопок - столько контроллеров представления, сколько нужно отобразить.
5. Контейнерное представление - это будет представление, которое будет содержать активный контроллер представления.

Пожалуйста, обратитесь к этому проекту для получения примера кода: https://github.com/equitronix/horizontalScrollMenu

Answer 5

Выполнение этого из раскадровки с использованием представлений прокрутки и стековых представлений делает это очень простым решением. Наряду с кучей контроллеров sub view и переходов. Я разместил пример кода на GitHub. Пожалуйста, посмотрите здесь:

https://github.com/equitronix/horizontalScrollMenu

Дайте мне знать, если это работает.

Answer 6

    //make that variable gloabl
   let button = UIButton.init(type: .custom)
    var arrMmenu :  NSMutableArray = []
    var  selectedIndex : Int = 0
     @IBOutlet weak var btnScrollView: UIScrollView!
    var lineArray : NSMutableArray = []
    var buttonArray : NSMutableArray = []

// Вызов buttonCreated()

  //MARK:- Create an Horizontral LayOut
func buttonCreated()
{

    btnScrollView.contentSize.width = 0
 namesOfMenu = ["GMC","GPA","GTL"]
    var scrollwidth: CGFloat = 10.0

    for j in 0..<namesOfMenu.count
    {
        let name = namesOfMenu[j] as! String
        let size : CGSize? = name.size(withAttributes : [NSAttributedStringKey.font : UIFont.systemFont(ofSize: 10.0)])


        let textsize = CGSize(width : CGFloat(ceilf(Float(size!.width))), height : CGFloat(ceilf(Float(size!.height))))

        var strikwidth : CGFloat = textsize.width
        strikwidth = textsize.width + 30
        let frame = CGRect(x: scrollwidth , y : CGFloat(7),width :CGFloat(strikwidth + 20) , height :CGFloat(20))
        let frameLine = CGRect(x: scrollwidth , y : CGFloat(30),width :CGFloat(strikwidth + 20) , height :CGFloat(2))
        let button = UIButton(type: .custom)
        let line = UIView()
        line.frame = frameLine
        button.tag = j
        view.tag = j
        button.frame = frame
        line .backgroundColor = UIColor.red
        button.backgroundColor = UIColor.red
        button.setTitleColor(UIColor.white, for: UIControlState.normal)
        button.layer.borderColor = UIColor.white.cgColor
        button.titleLabel?.textAlignment = .center
        button.addTarget(self, action: #selector(self.buttonEvent(_:)), for: .touchUpInside)
        button.setTitle(name, for : .normal)
        scrollwidth = scrollwidth + strikwidth + 30
        let strofMenu = namesOfMenu[selectedIndex] as! String

        if (j == selectedIndex)
        {

            if(strofMenu == "GMC")
            {
                // apicall()
            }

            line.backgroundColor = hexStringToUIColor(hex: "#3174C7")
            button.backgroundColor = UIColor.clear

            button.setTitleColor(hexStringToUIColor(hex: "#3174C7"), for: UIControlState.normal)


        }else
        {
            line.backgroundColor = UIColor.clear
            button.backgroundColor = UIColor.clear

            button.setTitleColor(MyConstant.Color.dark_gray_shade, for: UIControlState.normal)

        }
        button.titleLabel?.font =  MyConstant.fontApp.Regular

        buttonArray.add(button)

        lineArray.add(line)

        btnScrollView.addSubview(button)

        btnScrollView.addSubview(line)

    }

    btnScrollView.contentSize = CGSize(width : CGFloat(scrollwidth), height :  CGFloat(40.0))

    btnScrollView.isPagingEnabled = false

    btnScrollView.showsHorizontalScrollIndicator = false

    btnScrollView.showsVerticalScrollIndicator = false
}

//MARK:- Button Event

@objc func buttonEvent(_ sender : UIButton)

{

    let index = sender.tag

    selectedIndex = index

    let getRepoName = namesOfMenu[index] as! String

    print(getRepoName)


    for i in 0..<buttonArray.count

    {

        let buttonone : UIButton = (buttonArray[i] as! UIButton)

        let line : UIView  = (lineArray[i]) as! UIView

        if i == selectedIndex
        {
            buttonone.backgroundColor = UIColor.clear

            line.backgroundColor = hexStringToUIColor(hex: "#3174C7")

            buttonone.setTitleColor(hexStringToUIColor(hex: "#3174C7"), for: .normal)
            //
            //                if(getRepoName == "GMC")
            //                {
            //                    clickedCellIndexes.add(0)
            //
            //                    arrmutablefordata.removeAllObjects()
            //                    tblhome.reloadData()
            //                    apicall()
            //                }


            //buttonone.titleLabel
        }else
        {
            buttonone.backgroundColor = UIColor.clear

            line.backgroundColor = UIColor.clear

            buttonone.setTitleColor(MyConstant.Color.dark_gray_shade, for: .normal)

        }





    }

}