如何制作水平scrollView及其中的一些按钮(编程)

时间:2016-12-22 09:05:45

标签: ios iphone swift uiscrollview horizontal-scrolling

抱歉,我有问题。我不使用storyBoard。

我想这样看。
photo by terenceLuffy/AppStoreStyleHorizontalScrollView

但我尝试这样做。 Finlly,scrollView只显示这样的最后一个按钮。 enter image description here

这是代码:

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)

}

请帮帮我。 谢谢大家!

6 个答案:

答案 0 :(得分:9)

实现它的方法有两种:一种是使用scrollView并在ScrollView上以编程方式计算偏移量和设置视图的一种方法,使用 CollectionView

第1步:

在故事板中添加UICollectionView,设置collectionView的高度以符合您的要求:)

enter image description here

第2步

创建一个单元格,其大小取决于您的要求。我创建了一个背景颜色为橙色/粉红色的单元格。在其上添加了一个标签以显示您的电话号码。

enter image description here

第3步:

将可重用的单元标识符设置为单元格并设置其类:)

enter image description here

enter image description here

第4步:

将collectionView滚动方向设置为水平:)

enter image description here

第5步:

现在实现collectionView委托和数据源方法:)

{{1}}

多数民众赞成:)

最终的O / P

enter image description here

使用单元格ABCD查看collectionView:D

其他信息

如果你在UIViewController上拖动一个collectionView,你可能会看到collectionView在顶部留下了一个空隙,你可以通过取消选中调整ScrollView的ViewController Insets来解决这个问题:)

enter image description here

答案 1 :(得分:3)

bb.generate({
axis: {
  y: {
    tick: {
      values: [1, 2],
      format: function(x) {
        if (x === 1) {
          return 'item1';
        }
        return 'item2';
      },
    },
  },
},
onrendered: function() {
  this.data.targets.forEach(function(v) {
    var id = v.id;
    var y = id === "heat" ? -25 : 0;

    d3.select(".bb-chart-line.bb-target-"+ id)
      .style("transform", "translateY("+ y +"px)");
  })
}

答案 2 :(得分: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)
}

答案 3 :(得分:1)

只需最少使用情节提要即可轻松实现。您可以轻松避免这种情况。您只需要:

  1. 滚动视图
  2. 水平堆栈视图
  3. 按照项目所示设置上述约束
  4. 许多按钮-需要显示的视图控制器就很多。
  5. 容器视图-这将是包含活动视图控制器的视图。

请参考此项目的一些示例代码: https://github.com/equitronix/horizontalScrollMenu

答案 4 :(得分:0)

    //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)

        }





    }

}

答案 5 :(得分:0)

使用滚动视图和堆栈视图从情节提要中执行此操作,这使该解决方案非常简单。以及一堆子视图控制器和过渡。我已经在GitHub上发布了示例代码。请在这里看看:

https://github.com/equitronix/horizontalScrollMenu

让我知道这是否可行。