美文网首页
3、UIButton

3、UIButton

作者: 广东煲仔饭049 | 来源:发表于2016-01-06 22:28 被阅读58次

    一个很简单的设置,设置选中和取消选中,效果如下


    UIbuttonClick_2.gif

    代码如下

    import UIKit
    
    class UIButtonUseVC: UIViewController {
    
        //用于展示点击按钮后的改变
        var contentLab: UILabel?
        
        override func viewDidLoad() {
            
            view.backgroundColor = UIColor.whiteColor()
            //点击按钮后显示的内容
            contentLab = UILabel(frame: CGRectMake(screenWidth - 150, gap64+gap64, 120, 20))
            contentLab?.textColor = UIColor.blackColor()
            contentLab?.font = UIFont.systemFontOfSize(27)
            contentLab?.text = "0"
            view.addSubview(contentLab!)
            
            //添加经过设置的按钮
            view.addSubview(configBtnNormal())
            
        }
        
       //返回一个普通设置的按钮
        func configBtnNormal() -> UIButton {
            //初始化同时设置frame
            let btn = UIButton(frame: CGRectMake(gap16, gap64+gap12, 120, 64))
            //背景色
            btn.backgroundColor = UIColor.groupTableViewBackgroundColor()
            //各状态下标题
            btn.setTitle("普通状态", forState: .Normal)
            btn.setTitle("选中状态", forState: .Selected)
            //各状态下标题颜色
            btn.setTitleColor(UIColor.blackColor(), forState:  .Normal)
            btn.setTitleColor(UIColor.redColor(), forState: .Selected)
            //字体
            btn.titleLabel?.font = UIFont.systemFontOfSize(16)
            //各状态下图片
            btn.setImage(UIImage(named: "btn_general_multiselect_off"), forState: .Normal)
            btn.setImage(UIImage(named: "btn_general_multiselect_on"), forState: .Selected)
            //内部控件的水平和垂直对齐方式(就是标题和图片),默认都是center,因此设置水平方向的即可
            btn.contentHorizontalAlignment = .Left
            //取消高亮时的变灰
            btn.adjustsImageWhenHighlighted = false
            //点击事件,有:表示传btn过去
            btn.addTarget(self, action: Selector("methodName:"), forControlEvents: .TouchUpInside)
            //tag默认是0
            btn.tag = 10
            
            return btn
        }
        
        //点击按钮后调用的方法
        func methodName(btn :UIButton) {
            //改变其select状态
            if btn.selected == true {
                btn.selected = false
            } else {
                btn.selected = true
            }
            //将lab上次的内容转成Int类型和按钮的tag值相加
            //string转成Int要确保其是数值,因此在lab初始化时设置其为"0"
            //再将相加的值转成字符串
            contentLab?.text = String( Int((contentLab?.text)!)! + btn.tag)
        }
        
        //点击按钮后调用的方法
        func methodName(btn :UIButton) {
            //改变其select状态
            if btn.selected == true {
                btn.selected = false
            } else {
                btn.selected = true
            }
            //将lab上次的内容转成Int类型和按钮的tag值相加
            //string转成Int要确保其是数值,因此在lab初始化时设置其为"0"
            //再将相加的值转成字符串
            contentLab?.text = String( Int((contentLab?.text)!)! + btn.tag)
        }
    }
    
    

    还有一些其他的样式,在此只给出部分UIbutton的设置代码和要更改的敌方

    屏幕快照 2016-01-10 15.25.06.png

    那个按钮的实际的点击位置就是红框了


    屏幕快照 2016-01-10 15.23.46.png
     //样式1
        func configBtnStyle1() {
            //先设置放置按钮的BGview
            //CGRectGetMaxY 是取某控件的最下面的y坐标
            let btnBGView = UIView(frame: CGRectMake(0, CGRectGetMaxY((contentLab?.frame)!)+gap36, screenWidth, gap44))
            btnBGView.backgroundColor = UIColor.clearColor()
            //添加到主view上
            view.addSubview(btnBGView)
            //有五个图标,所以一个按钮宽度是屏幕5分之一
            let btnWidth = screenWidth/5
            //循环设置
            for i in 0...4 {
                //初始化同时设置frame,将i转为CGFloat类型
                let btn = UIButton(frame: CGRectMake(CGFloat(i)*btnWidth, 0, btnWidth, gap44))
                //判断i值来设置按钮名称和图片
                switch i {
                case 0:
                    btn.setTitle("编辑", forState: .Normal)
                    btn.setImage(UIImage(named: "icon_manage_edit"), forState: .Normal)
                case 1:
                    btn.setTitle("增加", forState: .Normal)
                    btn.setImage(UIImage(named: "icon_manage_restock"), forState: .Normal)
                case 2:
                    btn.setTitle("分享", forState: .Normal)
                    btn.setImage(UIImage(named: "icon_manage_share"), forState: .Normal)
                case 3:
                    btn.setTitle("多图", forState: .Normal)
                    btn.setImage(UIImage(named: "icon_manage_multishare"), forState: .Normal)
                case 4:
                    btn.setTitle("删除", forState: .Normal)
                    btn.setImage(UIImage(named: "icon_manage_delete"), forState: .Normal)
                default: break
                    
                }
                //各状态下标题颜色
                btn.setTitleColor(UIColor.blackColor(), forState:  .Normal)
                //字体
                btn.titleLabel?.font = UIFont.systemFontOfSize(16)
                
                //内部控件的水平和垂直对齐方式(就是标题和图片)
                btn.contentHorizontalAlignment = .Center
                btn.contentVerticalAlignment = .Center
                //取消高亮时的变灰
                btn.adjustsImageWhenHighlighted = false
                //添加到背景上
                btnBGView.addSubview(btn)
                
            }
            //在顶部加分隔线
            let topSeparatorLine = UIView(frame: CGRectMake(0, 0, screenWidth, 1))
            topSeparatorLine.backgroundColor = UIColor.groupTableViewBackgroundColor()
            //在底部加分隔线
            let bottomSeparatorLine = UIView(frame: CGRectMake(0, CGRectGetHeight(btnBGView.frame)-1, screenWidth, 1))
            bottomSeparatorLine.backgroundColor = UIColor.groupTableViewBackgroundColor()
            //添加到BGview上
            btnBGView.addSubview(topSeparatorLine)
            btnBGView.addSubview(bottomSeparatorLine)
            
        }
    

    如果我们需要设置按钮内部各控件的位置,就要使用到

    UIEdgeInsetsMake

    public func UIEdgeInsetsMake(top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> UIEdgeInsets
    

    用来设置其内部控件的偏移量,分别是上、左、下、右(逆时针顺序),-值代表反方向


    首先,将内部的水平对齐方式设置为left,然后在 debug view可以看到两种不同对齐方式的区别,

    btn.contentHorizontalAlignment = .Left
    

    第一排的对齐方式是center,所以可以看到左右两边的空白距离是一样的,设置为left后,距离左侧距离就为0了


    D465AA20-9594-4A3C-8721-705A04A9FEDF.png

    这时候只要再根据当前button内部的两个控件位置即可以容易算出其他所要的效果。例如需要两个都居中就是: (总长-控件的宽度)/2

    //图片、标题宽度
    let btnContentWidth: CGFloat = 22
    btn.imageEdgeInsets = UIEdgeInsetsMake(-18 , (btnWidth-btnContentWidth)/2, 0, 0)
    btn.titleEdgeInsets = UIEdgeInsetsMake(0, (btnWidth-btnContentWidth)/2-btnContentWidth, -18, 0)
    

    下图所示,就可以两个控件都居中了


    D0CE5F94-6AE6-45E0-AFD6-836271618C53.png

    相关文章

      网友评论

          本文标题:3、UIButton

          本文链接:https://www.haomeiwen.com/subject/qkxfkttx.html