首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在导航栏中创建一个带有UIActivityIndi​​cator的按钮,其样式与普通按钮相同?

要在导航栏中创建一个带有UIActivityIndi​​cator的按钮,可以使用以下步骤:

  1. 首先,在导航栏中创建一个UIButton,并设置其样式与普通按钮相同。
  2. 然后,创建一个UIActivityIndicatorView,并将其添加到按钮上。
  3. 最后,根据需要控制UIActivityIndicatorView的显示和隐藏。

以下是一个简单的示例代码:

代码语言:swift
复制
import UIKit

class ViewController: UIViewController {

    let activityIndicatorView = UIActivityIndicatorView(style: .gray)
    let button = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建UIButton
        button.frame = CGRect(x: 0, y: 0, width: 50, height: 30)
        button.setTitle("按钮", for: .normal)
        button.addTarget(self, action: #selector(buttonClicked), for: .touchUpInside)

        // 创建UIActivityIndicatorView
        activityIndicatorView.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
        activityIndicatorView.center = CGPoint(x: button.bounds.width/2, y: button.bounds.height/2)
        button.addSubview(activityIndicatorView)

        // 添加UIButton到导航栏
        let barButton = UIBarButtonItem(customView: button)
        self.navigationItem.rightBarButtonItem = barButton
    }

    @objc func buttonClicked() {
        // 控制UIActivityIndicatorView的显示和隐藏
        if activityIndicatorView.isAnimating {
            activityIndicatorView.stopAnimating()
        } else {
            activityIndicatorView.startAnimating()
        }
    }
}

在这个示例中,我们首先创建了一个UIButton,并设置了其样式和标题。然后,我们创建了一个UIActivityIndicatorView,并将其添加到按钮上。最后,我们添加了一个点击事件,用于控制UIActivityIndicatorView的显示和隐藏。

需要注意的是,在使用UIActivityIndicatorView时,需要在合适的时机停止它的动画,否则它将一直显示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

最新iOS设计规范三|3大界面要素:(Bars)

一、导航(Navigation Bars) 导航出现在页面的顶部,位于状态下方,可以给一系列层级页面进行导航。当点击进入新页面时,导航左侧会出现一个返回按钮,并带有前一页面的标题。...有时,导航右侧也会有一个控件,“编辑”或“完成”按钮,用于管理活动视图中内容。在拆分视图中,导航可能会显示在拆分视图单个窗格。...但是,无边框样式在标准标题导航可能无法很好地起作用,因为该标题和按钮可能难以区分。iPad上拆分视图是一个例外,更多是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间一致性。...您可以通过使用边样式列表并将其放置在拆分视图主列创建。视图相关内容后面会讲。 将正确外观应用于边。要创建,请使用集合视图列表布局侧栏外观。 使用边在应用程序级别组织信息。...工具包含用于执行当前上下文有关动作按钮,例如创建项目,删除项目,添加注释或拍照。标签和工具永远不会在同一视图中同时出现。 提供相应工具按钮

9.9K10
  • iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    让内容固定在导航区域外显示(这个区域由应用statusBarFrame属性来定义)。如果你确定要这样做的话,请给导航区域添加固定屏幕背景色相同背景色。...可以填充颜色(使用tintColor来定义导航图标文字颜色;使用 barTintColor来填充导航背景色) API注释 导航包含于导航控制器(一个管理显示自定义视图层级结构程序对象)。...举个例子,不要在同一个应用中使用不透明导航和半透明工具。在屏幕处于同一方向时,最好不要改变不同屏上导航背景图片、颜色和透明度。 确保你自定义返回按钮外观操作仍然像一个返回按钮。...重要 跟所有标准按钮和图标相同,应当根据文档说明图标含义,而不是只凭图标外观来使用这些工具图标和导航图标。...重要 跟所有的标准按钮图表相同,根据文档说明图表含义而不是仅凭图表外观来使用这些图标是很关键。这样能够保证在关联特定含义按钮改变了外观情况下,你应用UI仍然是可用而有意义

    10.1K51

    iOS导航使用总结

    目录: 一、设置导航样式 二、解决自定义导航返回按钮后侧滑不可用问题 三、隐藏导航底部分割线 四、导航引起布局问题 相关文章:iOS状态使用总结 一、设置导航样式 设置导航样式可分为全局设置局部设置...注意1:局部设置全局设置方法相同,但调用方法对象变成了"self.navigationController.navigationBar" 注意2:局部设置必须遵循一个原则:"进入页面时修改,离开页面时还原...导航视图层级图 从图中可以看出,导航底部分割线是一个UIImageView对象,而且高度只有0.5,所以我们可以据此获取到导航底部分割线对象,在一个视图控制器实现此需求,代码如下: #import...UI布局进行优化:视图控制器里面第一个被添加进去视图是滑动类视图,并且Frame是整个屏幕大小时,系统会自动调整contenInset,以保证滑动视图里内容不被UINavigationBarUITabBar...导航透明情况下,滑动视图自动偏移,普通视图被遮挡 其实,这种系统优化也是可以控制关闭,关闭优化之后,滑动视图就会和普通视图一样,如果还设置布局原点是(0,0),其内容就会被导航所覆盖,关键代码如下

    3.2K20

    6详解AppBar小部件

    AppBar 应用是各种应用程序中最常用组件之一。它可用于容纳搜索字段、以及在页面之间导航按钮,或者只是页面标题。...由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...工具高度和不透明度 最后,我们有工具属性。工具包含文字,图标,按钮,和其他任何公司前景,除了小部件,Container和Image。...关于 Flutter AppBar 必须提供所有内容完整演练。我希望这篇文章能帮助你在未来所有的 Flutter 应用程序创建漂亮 AppBars。...用来在 Toolbar 标题下面显示一个 Tab 导航 this.elevation,//控件 z 坐标顺序,默认值 4,对于可滚动 SliverAppBar,当 SliverAppBar

    16.4K10

    UI篇-UINavigationController之易忘补充

    设置导航背景图片 (多见于导航背景颜色是渐变颜色,使用一张图片)但是这张图片设置好以后,所有的控件Y坐标都会下移64,也就是说,这张图片会占用屏幕64pt 高度屏幕,而且无法被普通试图覆盖使用...appearance] setBackgroundImage:[UIImage imageNamed:@"navBg"] forBarMetrics:UIBarMetricsDefault]; 设置普通导航颜色...在入口类全局设置就可以达到统一导航颜色效果。  ...:action:设置视图触发事件 tintColor  设置tintColor可以影响添加在导航条上系统样式按钮颜色  title: 标题  titleView :标题视图  leftBarButtonItem...每个视图控制器都有一个navigationItem属性,navigationItem设置按钮、右按钮、标题等,会随着控制器显示,也显示到navigationBar上 我们来看一下这些名词是什么意思

    2.1K20

    iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

    进度条(Bar).此样式比默认样式细,适合用在工具。 ? 当一个任务存在明确进程,可以使用进度条来给与用户反馈,尤其在需要明确告诉用户这个任务大约需要多少时间完成时候。...API提示: 想要了解更多如何在代码定义分段控件,可以参考 Segmented Controls 分段控件: 由两个或以上分段组成,每一个分段宽度相同分段数量成比例(分段数量越多,则宽度越小...合适的话,为内容区域内系统按钮描边或者加入背景。大多数情况下,你可以通过定义一个清晰按钮名称、选择一个不一样标题颜色或提供上下文情景提示来让用户知道这是一个按钮而非普通文本。...不要用引号,但保证大写 确保警告框在竖屏和横屏均显示正常。横屏模式下警告框高度会受到限制,大小竖屏下可能会有区别。...举个例子,如果一个模态视图中含有导航条和取消或完成任务按钮,这里导航样式应该app中导航条一样。 合适的话,在模态视图里加入可以说明任务内容标题。

    13.2K30

    iOS开发常用之网络

    TabBarController,支持自定义TabBarItem样式或添加动画 隐藏显示 SlideTapBar - 滚动菜单,向上滚动时隐藏tabbar,向下滚动马上显示tabbar。...LTNavigationBar - LTNavigationBar为导航添加动态着色效果,可自定义背景色.Demo包含:1。变换背景色; 2。滚动视图,导航和状态重叠。...一个用于统一管理导航转场以及当推或者弹出时候使动画效果更加顺滑通用库,并且同时支持竖屏和横屏。...ZTPageController - 模仿网易新闻和其他新闻样式一个菜单中有各自控制器,其中有4展示样式'网易风格''搜狐风格''腾讯风格1''网易style2'。...DynamicButton.swift - 一套完整,且带动画过渡图标按钮库。 TKDotSegment.swift - 是一个带有圆点动画细分。

    23.6K10

    如何使用Flexbox和CSS Grid,实现高效布局

    通过这个声明,导航元素放置会变得很容易。 导航左侧有一个 logo 和两个菜单项,右侧有一个登录按钮。...在导航,使用 align-items: baseline; 能够实现所有导航项目文本基线对齐,这样也使得导航看起来更加统一。...尤其在控制列表元素样式和设置导航按钮之间间距方面,特别有用。 使用 CSS Grid 创建布局 为了测试效率,接下来使用 CSS Grid 创建相同基本布局。...Flexbox 示例相同,但 CSS 创建网格布局完全不同。...使用 Flexbox,可以将所有元素连成一条直线,这也确保了所有元素都具有相同高度。 带有文本和按钮行内容 下图是包含了“额外”文本和按钮三个区域。

    3.5K10

    最佳实战|如何使用腾讯云微搭从0到1开发企业门户应用

    使用普通容器可以进行组件统一管理样式调整,因此在实际开发应用过程建议将组件按模块放置到普通容器,便于管理同时也会提升开发效率。...创建单个导航 Tab 创建一个普通容器,并在容器中加入网格布局组件,将网格组件列比例属性配置为"12"。...[c8fda68a15c863985b96968f3e9b54b9.png] 步骤4:企业动态导航 创建模块标题 创建一个普通容器,在普通容器添加文本组件,在右侧配置区中将文本组件内容修改为"最新动态...[9e68e5b2e9f7a4fc57197ef5cc4be235.png] 步骤3:联系我们模块 品牌简介模块相同创建一个背景容器并居中,并在背景容器添加一个文本组件作为模块标题,将文本组件内容修改为...步骤1:创建普通变量 为企业门户主页页面创建普通变量,用于接收点击导航Tab时返回数据模型 ID。单击上方变量,在当前页面创建一个普通变量命名为 getId,数据类型选择字符串。

    1.4K30

    最佳实战|如何使用腾讯云微搭从0到1开发企业门户应用

    使用普通容器可以进行组件统一管理样式调整,因此在实际开发应用过程建议将组件按模块放置到普通容器,便于管理同时也会提升开发效率。...创建单个导航 Tab 创建一个普通容器,并在容器中加入网格布局组件,将网格组件列比例属性配置为"12"。...[c8fda68a15c863985b96968f3e9b54b9.png] 步骤4:企业动态导航 创建模块标题 创建一个普通容器,在普通容器添加文本组件,在右侧配置区中将文本组件内容修改为"最新动态...[9e68e5b2e9f7a4fc57197ef5cc4be235.png] 步骤3:联系我们模块 品牌简介模块相同创建一个背景容器并居中,并在背景容器添加一个文本组件作为模块标题,将文本组件内容修改为...步骤1:创建普通变量 为企业门户主页页面创建普通变量,用于接收点击导航Tab时返回数据模型 ID。单击上方变量,在当前页面创建一个普通变量命名为 getId,数据类型选择字符串。

    1.4K30

    最佳实战|如何使用腾讯云微搭从0到1开发企业门户应用

    使用普通容器可以进行组件统一管理样式调整,因此在实际开发应用过程建议将组件按模块放置到普通容器,便于管理同时也会提升开发效率。...创建单个导航 Tab 创建一个普通容器,并在容器中加入网格布局组件,将网格组件列比例属性配置为"12"。...[c8fda68a15c863985b96968f3e9b54b9.png] 步骤4:企业动态导航 创建模块标题 创建一个普通容器,在普通容器添加文本组件,在右侧配置区中将文本组件内容修改为"最新动态...[9e68e5b2e9f7a4fc57197ef5cc4be235.png] 步骤3:联系我们模块 品牌简介模块相同创建一个背景容器并居中,并在背景容器添加一个文本组件作为模块标题,将文本组件内容修改为...步骤1:创建普通变量 为企业门户主页页面创建普通变量,用于接收点击导航Tab时返回数据模型 ID。单击上方变量,在当前页面创建一个普通变量命名为 getId,数据类型选择字符串。

    2.6K82

    【Java 进阶篇】深入了解 Bootstrap 表格和菜单

    表格和菜单是网页设计重要组成部分,它们用于展示数据、导航和用户交互。Bootstrap 是一个强大前端框架,提供了丰富表格样式和菜单组件,使开发者能够轻松创建功能丰富网页。... 元素:这是链接元素,用于创建网站标志。 元素:这是按钮元素,用于切换导航折叠状态。...-- 导航栏内容 --> 这些样式可以根据您设计需求来选择,以使导航网站或应用程序一致。 下拉菜单 下拉菜单是导航中常见交互元素,它们允许用户访问更多选项。...以下是一个示例,展示如何在导航创建下拉菜单: 在这个示例,我们创建一个带有下拉菜单导航项。

    25730

    最新iOS设计规范四|3大界面要素:视图(Views)

    (Bars) ,可以告诉用户在APP当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...将“取消”按钮作为默认按钮,并使用粗体文本。 允许用户通过退出APP到主屏幕来取消警示框。当警示框出现时,退出到主屏幕可以退出APP。这个操作产生点击取消按钮效果是相同。...如果系统必须执行缩放,那么所有图像具有相同大小和形状时,最容易实现。 六、页面视图(Pages) 页面视图控制器提供了一种在内容页面之间实现线性导航方式,例如在文档、书籍、记事本或日历。...拆分视图提供选项卡相同快速导航,同时更好地利用了大屏幕。 为每种类型列选择适当样式。对于显示侧主列,请使用侧栏外观。此外观适用于应用程序级导航和集合列表,例如Mail邮箱。...对于显示列表视图补充列,请使用普通边栏外观。这种外观适合于单个内容列表,例如邮箱消息。 在主要和补充列持续突出显示任务选择。

    8.5K31

    最新iOS设计规范五|3大界面要素:控件(Controls)

    (Bars) ,可以告诉用户在APP当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...系统按钮 系统按钮通常出现在导航和工具,也可以在任何地方使用。 ? 在标题中使用动词。特定于操作标题显示按钮是交互式,并说明单击该按钮时会发生什么。 使用标题格式命名标题。...信息按钮 翻转视图后,“信息”按钮可显示有关应用程序配置详细信息,有时会显示在当前视图背面。信息按钮有两种样式:浅色和深色。选择应用程序设计最匹配且不会在屏幕上看不清楚样式。 ?...此模式不适用于紧凑型样式。 日期选择器显示的确切值及其顺序取决于用户使用环境。 当空间有限时,请使用紧凑日期选择器。折叠后,紧凑型样式将显示一个按钮,该按钮以应用程序主色显示当前值。...“更多”按钮可以大多数界面很好地集成在一起,用户也能够理解点击它可以访问其他功能。通常样式是三个点放在圆形按钮来表示“更多”。或者,您可以通过在现有按钮上执行特定手势来让人们显示菜单。

    8.6K30

    Cocoa编程中视图控制器视图类详解

    UITableViewCell类表格单元项) UIPickerView 各种样式: UINavigationBar (对于导航一个UINavigationItem类导航项) UITabBar...进度活动: UIActivityIndicatorView UIProgressView  控制器类 UIViewController类       UIViewController负责创建管理视图及在低内存时候将它们从内存移除...设置导航按钮并不是去设置导航本身。一切都是在被推入UIViewController子类内部执行推入请求和相关导航定制(:右键按钮)。...描述了导航上显示内容,而正好UIViewController另有一导航项属性navigationItem包括左按钮(leftBarButtonItem)、右按钮(rightBarButtonItem...不过,也可以视具体情况,我们直接在一个独立视图控制器创建UITabBarController实例对象,自定义一个用于视图 切换控制器类ViewSwitcherViewController,就可在其中

    5.1K50

    微信小程序自定义顶部导航并适配不同机型

    前言在小程序,顶部导航一个非常重要组件,它不仅可以方便用户进行页面切换,还可以提高用户体验。默认情况下,小程序顶部导航是由系统自动生成,我们只能修改一些基本样式背景色、文字颜色等。...但是,如果想要实现更加复杂样式自定义图标、自定义背景等,而且在不同手机屏幕上,导航高度和样式也可能有所不同。因此,我们需要自定义顶部导航,以满足我们设计需求和用户体验。...因此本篇博客将介绍如何在小程序自定义顶部导航,并适配不同手机机型。正文内容一、为什么要自定义顶部导航?...增加页面交互性:自定义顶部导航可以增加页面交互性,让用户更容易进行页面操作。二、自定义顶部导航基本思路将系统自动生成顶部导航隐藏创建一个自定义导航组件,包含导航样式和交互逻辑。...在需要使用导航页面引入自定义导航组件。根据不同机型屏幕尺寸和分辨率,调整导航样式和布局。为导航添加交互功能,点击导航项切换页面等。

    2.5K82

    QPushButton 基本使用

    槽函数是一个普通Python函数,它接受特定参数(例如,按钮点击事件参数),并在函数体内执行所需操作(特别注意,槽函数不能带有括号,否则会自动执行而导致错误)。就像下面的代码一样。...运行效果如下: 三、按钮常用功能和属性 在前两部分,我们介绍了如何创建按钮和响应点击事件。在本部分,我们将深入了解按钮常用功能和属性,以便更好地定制和管理按钮外观和行为。...2、设置按钮大小、位置和布局: 您可以使用按钮几个方法来设置大小和位置,以及在用户界面布局。...在本部分,我们将学习如何创建自定义按钮,并重写行为和外观。 1、继承 QPushButton 类: 创建自定义按钮第一步是创建一个类,继承自 QPushButton 类。...) # 自定义绘制代码 # 绘制按钮背景、文本和图标 painter.end() 在上述代码,我们创建一个 QPainter 实例,并使用方法来绘制按钮外观。

    57840

    最佳实战 | 使用微搭低代码10分钟快速搭建企业门户应用

    5、随后在标题组件样式配置区,将标题组件上下边距调整为20,便于页面展示更加清晰。 6、随后添加宫格导航组件,用于场景能力相关展示。...7、在右侧组件配置区为宫格导航进行图片标题配置。 8、宫格导航配置完成后,我们右键选中刚刚创建标题组件,选择克隆,将克隆后标题组件拖拉至宫格导航组件下方并修改标题组件文本内容。...3、为列表视图绑定数据模型后,将列表图片、文本依次数据进行绑定即可完成图文列表页构建。 创建关于我们页面 1、之后再次新增一个页面,并命名为""关于我们"。...2、为普通容器配置单击后跳转至内容详情页事件,单击下方新建页面参数,创建一个名为\_id 页面参数。 3、页面参数创建完成后,单击页面参数右侧数据绑定按钮。...配置应用底部导航 为每一个页面底部添加一个 Tab 组件来实现应用底部导航,Tab 配置如下图所示: 为内容详情页添加顶部导航 进入内容详情页面,添加一个顶部导航组件,并将顶部导航组件移动至大纲树最上级

    1.8K31
    领券