TGPControls 5.1.0

TGPControls 5.1.0

×

测试已测试✗
语言语言 SwiftSwift
许可证 MIT
发布最新发布2018 年 6 月
SPM支持 SPM✗

由 SwiftArchitect 维护。

TGPControls 5.1.0

  • 作者
  • Xavier Schott

Demo Project

Build Status CocoaPods Carthage compatible MIT License

带有 刻度 和动画标签的 Slider（Swift）

TGPControls 是 UISlider 和 UILabel 的替代品，拥有在 Interface Builder 中的视觉预览、单行度量、平滑动画、简单的 API 和强大的自定义功能。

DiscreteSlider 是什么？

ticksdemo

TGPDiscreteSlider：带有离散步骤（即刻度）的滑块，具有可定制的轨道、手柄和刻度，范围离散。适用于选择单个步骤、星级评分、整数、彩虹颜色、切片等，任何非连续值的表示都非常理想。只需设置停止数量，TGPDiscreteSlider 就会为您处理选择和动画。

CamelLabels 是什么？

camellabels2

TGPCamelLabels：代表选择的动画标签集（舷窗效果）。可以单独使用或与 UIControl 结合使用。非常适合表示步骤。《离散滑块和 CamelLabels 可以协同工作。》

兼容性

  1. 使用 Swift 4 编写，可以与 Swift 或 Obj-C 集成
  2. TGPControls 兼容 AutoLayout，IB Designable 和 IB Inspectable
  3. 版本 5.0.1 和更高版本附带了适用于 iOS 8 及以上版本的 Swift 4 示例应用程序。
    版本 2.1.0 及以下版本支持 iOS 7
  4. 自动支持从左到右和从右到左的语言

imagessliderdemo

版权免责声明
上面的滑动条灵感来自 国家地理国家公园 iPhone App。
国家地理 iPhone App 由 Rally Interactive LLC 开发。
上面的图片、风格、外观和感觉均为 版权 © 2015 国家地理学会。
TGPControls 与国家地理学会、Rally Interactive LLC 或其任何子公司无关联。

完全可定制

alphabetslider

您可以控制滑动条及其标签的各个方面，从颜色、图像和字体开始，包括轨道和刻度形状以及滑块的阴影。所有关于范围和大小的问题都由系统自动处理。使用这两个类同时创建新的令人惊叹的控制，这些控制可以动态调整大小，并将其完美集成到您的应用程序中。

onoff

大部分的自定义可以在 Interface Builder 中完成，而且不需要任何编程。

如何集成（iOS 8 及以上版本）

使用CocoaPods

platform :ios, '8.0'
use_frameworks!
target 'TGPControlsDemo' do
pod 'TGPControls'
end

使用Carthage

github "SwiftArchitect/TGPControls"

除了定制功能外，您可以在iOS 8及以后的版本中完全在Interface Builder中操作，TGPDiscreteSlider和TGPCamelLabels都需要非常少的代码即可集成。

DiscreteSlider

为简化起见，TGPDiscreteSlider不是从UISlider继承的，而是从UIControl继承的。它使用minimumValue、tickCount和incrementValue（而不是minimumValue和maximumValue）。所有图形方面，如刻度或轨道的物理间隔或宽度，都由内部控制。这使得TGPDiscreteSlider可预测，保证始终紧密地适应其边界。

单步操作：要联合使用DiscreteSlider和CamelLabels，您需要正好1行代码。

discreteSlider.ticksListener = camelLabels

complete

这就完了！
通过TGPControlsTicksProtocol，camelLabels监听value和size变化。您可能想要采用此协议以处理变化，或者使用传统的UIControl通知。

高级步骤（1a）：注册到通知（就像任何UIControl一样）。

discreteSlider.addTarget(self,
action: #selector(valueChanged(_:event:)),
for: .valueChanged)

高级步骤（1b）：响应该通知。

func valueChanged(_ sender: TGPDiscreteSlider, event:UIEvent) {
self.stepper.value = Double(sender.value)
}

刻度样式、轨道样式、手柄样式属性

常数 值
.iOS 0 赋予任何组件iOS的外观：刻度不可见，轨道是蓝色和灰色，手柄是圆形的，带阴影
.rectangular 1 带有尖锐边缘的方形外观
.rounded 2 从圆形矩形到完美的圆形，取决于垂直与水平比率
.invisible 3 单独隐藏刻度、轨道甚至手柄非常有用

其他属性

监听器
ticksListener 一个TGPControlsTicksProtocol监听器，如TGPCamelLabels，它会接收间隔变化通知。
allTargets 从UIControl继承，接收控件事件的行为
刻度
tickStyle 看样式属性
tickSize 绝对尺寸
tickCount 离散步骤，必须是2或以上
tickTintColor 优先于控件tintColor
tickImage 一个UIImage，适合在tickSize内（†）
ticksDistance 水平间隔（计算）
轨道
trackStyle 看样式属性
trackThickness 高度
trackImage 一个UIImage，忽略trackThickness（†）
minimumTrackTintColor 轨道下侧
maximumTrackTintColor 轨道上侧
手柄
thumbStyle 看样式属性
thumbSize 绝对大小
thumbTintColor 背景
thumbImage 一个UIImage，规定了thumbSize（†）
thumbShadowRadius 打破扁平设计概念
thumbShadowOffset 应用于thumbShadowRadius，可能影响控件边界

(†) 自4.0.0版本引入。旧版本使用资源名称作为string。

image

CamelLabels

除了字体定制外，TGPCamelLabels只需要一组标签（以字符串的形式提供），以及一个活动索引选择。

步骤 1: 告诉 TGPCamelLabels 要选择什么 （参考上方的“单步”部分以使用DiscreteSlider + CamelLabels协同使用）

camelLabels.value = sender.value

没有第二步。 大部分自定义都可以在 Interface Builder 中完成。

属性

属性
tickCount 仅设计（最好不用）：刻度数量由代码中的 names 数组中的元素数量驱动
names 提供一个全新的标签集；替代 tickCount 属性，它将返回标签数量。典型用法可能是 camelLabels.names = ["OFF", "ON"]
ticksListener 将离散滑块与其骆驼标签相关联。这是您确保两个控件布局完全匹配以及调整方向变化时间距的最可靠方法。典型用法可能是 discreteSlider.ticksListener = camelLabels
ticksDistance 完全覆盖 标签间距；如果可用，请优先使用 ticksListener 机制。典型用法可能是 camelLabels.ticksDistance = 15
value 哪个标签被强调（被选中）
backgroundColor 当设置为 UIColor.clear 时，标签变为 tap-through（click-through）；在使用 TGPCamelLabels 在其他 UI 元素（甚至原生 iOS 对象）之上时使用！(*)

(*) 您可以在位于骆驼标签下方或下的 UISwitch 上轻点： uiswitch

边缘 & 动画
numberOfLiness 支持多行标签
offCenter 仅左侧和右侧标签：以各个标签宽度的比例表示的相对内边距：0：没有，+0.5：推进半个宽度（完全适应）或 -0.5：完全绘制在外部
insets 仅左侧和右侧标签：以像素为单位的绝对内边距
emphasisLayout 强调（选中）标签的垂直对齐；.top、.centerY 或 .bottom。默认是 .top（†）
regularLayout 常规标签的垂直对齐；.top、.centerY 或 .bottom。默认是 .bottom（†）

(†) 当 emphasisLayout = regularLayout 时，即 .centerY，不会发生骆驼动画。

强调标签
upFontName font
upFontSize size
upFontColor color
常规标签
dnFontName font
dnFontSize size
dnFontColor color

代码示例（Swift 3）

请参阅 TGPControlsDemo 项目：TGPControlsDemo（现代 Swift 语法 + IBInspectable）

使用 Carthage 运行演示

  1. cd TGPControlsDemo
  2. carthage update
  3. open TGPControlsDemo.xcodeproj
  4. 选择方案 TGPControlsDemo Cart
  5. 构建 & 运行

使用 Cocoapods 运行演示

  1. cd TGPControlsDemo
  2. pod install
  3. open TGPControlsDemo.xcworkspace
  4. 选择方案 TGPControlsDemo Pods
  5. 构建 & 运行
import UIKit
import TGPControls

class ViewController: UIViewController {
@IBOutlet weak var oneTo10Labels: TGPCamelLabels!
@IBOutlet weak var oneTo10Slider: TGPDiscreteSlider!
@IBOutlet weak var alphabetLabels: TGPCamelLabels!
@IBOutlet weak var alphabetSlider: TGPDiscreteSlider!
@IBOutlet weak var switch1Camel: TGPCamelLabels!

override func viewDidLoad() {
super.viewDidLoad()

alphabetLabels.names = [
"A","B","C","D","E","F","G","H","I","J","K","L","M",
"N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
switch1Camel.names = ["OFF", "ON"]

// Automatically track tick spacing and value changes
alphabetSlider.ticksListener = alphabetLabels
oneTo10Slider.ticksListener = oneTo10Labels
}

// MARK: - UISwitch
@IBAction func switch1ValueChanged(_ sender: UISwitch) {
switch1Camel.value = (sender.isOn) ? 1 : 0
}
}

自定义示例

image

custom