如何在以编程方式创建的按钮上添加微调指示器

Question

你好，我已经在静态 TableView 上动态创建了按钮，如下所示

override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let footerView = UIView(frame: CGRectMake(0, 0, tableView.frame.size.width, tableView.frame.size.height))

  let button   = UIButton(type: UIButtonType.System) as UIButton
        button.frame = CGRectMake(0, 0, 414, 65)

        button.setTitle(buttonTitle, forState: UIControlState.Normal)
        button.addTarget(self, action:buttonAction, forControlEvents: UIControlEvents.TouchUpInside)
        button.setTitleColor(UIColor.whiteColor(), forState:UIControlState.Normal)
        button.titleLabel?.font = UIFont(name: Variables.MONTESERRAT_REGULAR, size: 20.0)
  button.backgroundColor = UIColor().blueColor()       //top
         footerView.addSubview(button!)


        return footerView
}

我想在单击按钮时在按钮顶部显示微调器。我知道如何制作点击功能或如何创建微调器。我只是不知道如何将微调器放在按钮顶部代替标题，以便当用户单击按钮时，标题隐藏并且微调器移动到标题位置。希望你能明白我在说什么

Answer 1

这是我的快速版本

let loginSpinner: UIActivityIndicatorView = {
    let loginSpinner = UIActivityIndicatorView(activityIndicatorStyle: .white)
    loginSpinner.translatesAutoresizingMaskIntoConstraints = false
    loginSpinner.hidesWhenStopped = true
    return loginSpinner
}()

然后在我的

viewDidLoad

函数中：

    loginButton.addSubview(loginSpinner)
    loginSpinner.centerXAnchor.constraint(equalTo: loginButton.centerXAnchor).isActive = true
    loginSpinner.centerYAnchor.constraint(equalTo: loginButton.centerYAnchor).isActive = true

最后在需要时调用

loginSpinner.startAnimating()

和

loginSpinner.stopAnimating()

函数。

注意：当开始和停止动画时，我也会禁用该按钮，因此取消设置禁用按钮的标题，以便微调器替换标题

loginButton.setTitle("", for: .disabled) // clear the title when it is disabled to just show the spinner

Answer 2

UIActivityIndicatorView *myspinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    [myspinner setCenter:button.center];
    [button addSubview:myspinner];

Answer 3

1. 您创建了一个微调器 (

   UIActivityIndicatorView

   )，还使其自动隐藏 (

   setHidesWhenStopped:

   )
2. 您将其作为子视图添加到按钮中 (

   addSubview

   )
3. 您将其放在按钮中央 (

   setCenter:

   )
4. 按下按钮后，您将标题设置为空字符串 (

   setTitle:forControlState:

   ) 并运行微调器 (

   startAnimating

   )

Answer 4

这是我通常的做法，您可以利用一些不同的行为：

let spinner = UIActivityIndicatorView(activityIndicatorStyle: .White)

spinner.frame = CGRect(x: -20.0, y: 6.0, width: 20.0, height: 20.0) // (or wherever you want it in the button)
spinner.startAnimating()
spinner.alpha = 0.0

button.addSubview(spinner)

您可以相应地更改 alpha。或者使用隐藏属性、停止/开始动画等。

Answer 5

如果有人寻找 Swift UI 代码 [SWIFT 5]

import SwiftUI

struct ButtonContentView: View {
    @State private var isButtonPressed = false
    @State private var isLoading = false
    
    var body: some View {
        ZStack {
            Button(action: {
                withAnimation {
                    isButtonPressed.toggle()
                    isLoading.toggle()
                }
                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                    withAnimation {
                        isButtonPressed.toggle()
                        isLoading.toggle()
                    }
                }
            }) {
                withAnimation(.easeInOut) {
                    Text(isButtonPressed ? "" : "Press Me")
                        .foregroundColor(.white)
                        .frame(width: isButtonPressed ? 60 : 200, height: isButtonPressed ? 60 : 50)
                        .background(Color.blue)
                        .clipShape(isButtonPressed ? RoundedRectangle(cornerRadius: 50) : RoundedRectangle(cornerRadius: 10))
                }
                
            }
            
            if isLoading {
                CircularProgressView()
                    .opacity(isButtonPressed ? 1 : 0)
                    .scaleEffect(isButtonPressed ? 1 : 0)
            }
        }
    }
}

struct CircularProgressView: View {
    @State private var rotation = 0.0
    var body: some View {
        Circle()
            .trim(from: 0.08, to: 1.0)
            .stroke(style: StrokeStyle(lineWidth: 4, lineCap: .round, lineJoin: .round))
            .foregroundColor(.white)
            .rotationEffect(.degrees(rotation))
            .frame(width: 40, height: 40)
        
            .onAppear {
                DispatchQueue.main.async {
                    withAnimation(.linear(duration: 1)
                        .repeatForever(autoreverses: false)) {
                            rotation = 360.0
                        }
                }
            }
    }
}

struct ButtonContentView_previews: PreviewProvider {
    static var previews: some View {
        ButtonContentView()
    }
}