MaterialDesignWidgets 0.1.1

MaterialDesignWidgets 0.1.1

×

由 Michael Ho 维护。

MaterialDesignWidgets 0.1.1

  • 由
  • Michael Ho

Material Design Widgets - Lightweight

此框架为您提供了充分的灵活性，以应用您想要在应用程序中使用的任何材料设计小部件！如果您只想使用整个包中的一位或两位小部件，请参阅以下步骤。

Generic badge Generic badge Generic badge Generic badge Generic badge

浅色模式 深色模式
Overview Overview Dark

您可以通过下载 MaterialDesignWidgetsDemo 来查看如何在您的应用程序中使用它。

关键特性

  • 一套完整的材料设计小部件，您需要用它来升级应用程序的视觉。
  • 小部件类都是为了 开放 编写的，这赋予您灵活地创建自己的能力。
  • 您不仅可以拉取整个包，还可以独立复制您需要的任何小部件的源代码。
  • 如果决定只使用其中一个小部件，可以按照以下 使用 说明进行操作，说明您需要哪些文件来使用该特定小部件。

需求

  • Swift 5.0
  • iOS 11.0+

使用

按钮

必需文件

  • RippleLayer.swift
  • MaterialButton.swift

正常按钮

let btnSample1 = MaterialButton(text: "Sample1", cornerRadius: 15.0)
let btnSample2 = MaterialButton(text: "Sample2", textColor: .black, bgColor: .white)
浅色模式 深色模式
System Default System Default Dark

加载按钮

let btnLoading = MaterialButton(text: "Loading Button", cornerRadius: 15.0)
loadingBtn.addTarget(self, action: #selector(tapLoadingButton(sender:)), for: .touchUpInside)

@objc func tapLoadingButton(sender: MaterialButton) {
    sender.isLoading = !sender.isLoading
    sender.isLoading ? sender.showLoader(userInteraction: true) : sender.hideLoader()
}
浅色模式 深色模式
System Default System Default Dark

阴影按钮

let btnShadow = MaterialButton(text: "Shadow Button", cornerRadius: 15.0, withShadow: true)
浅色模式 深色模式
System Default System Default Dark

垂直对齐按钮

let img = UIImage(named: "Your image name")
let btnV = MaterialVerticalButton(icon: img, title: "Fill", foregroundColor: .black, bgColor: .white)
浅色模式 深色模式
System Default System Default Dark

分段控制器

所需文件 - MaterialSegmentedControl.swift

填充的

let sgFilled = MaterialSegmentedControl(selectorStyle: .fill, fgColor: .black, selectedFgColor: .white, selectorColor: .black, bgColor: .lightGray)
// Below is styling, you can write your own.
sgFilled.backgroundColor = .lightGray
sgFilled.setCornerBorder(cornerRadius: 18.0)
浅色模式 深色模式
System Default System Default Dark

摘要

let sgOutline = MaterialSegmentedControl(selectorStyle: .outline, fgColor: .black, selectedFgColor: .black, selectorColor: .black, bgColor: .white)
浅色模式 深色模式
System Default System Default Dark

行文本

let sgLine = MaterialSegmentedControl(selectorStyle: .line, fgColor: .black, selectedFgColor: .black, selectorColor: .black, bgColor: .white)
浅色模式 深色模式
System Default System Default Dark

直线图标

let sgLineIcon = MaterialSegmentedControl(selectorStyle: .line, fgColor: .black, selectedFgColor: .black, selectorColor: .gray, bgColor: .white)
浅色模式 深色模式
System Default System Default Dark

追加正常段

for i in 0..<3 {
    segCtrl.appendSegment(text: "Segment \(i)", textColor: .gray, bgColor: .clear, cornerRadius: radius)
}

添加图标段

let icons = [yourImage1, yourImage2, yourImage3]
for i in 0..<3 {
    sgLineIcon.appendIconSegment(icon: icons[i], preserveIconColor: true, rippleColor: .clear, cornerRadius: 0.0)
}

添加值变更监听器

segCtrl.addTarget(self, action: #selector(yourSegmentedControlValueChangeMethod), for: .valueChanged)

文本框

必需文件

  • RippleLayer.swift
  • MaterialTextField.swift
let textField = MaterialTextField(hint: "TextField", textColor: .black, bgColor: .white)
浅色模式 深色模式
System Default System Default Dark

加载指示器

必需的文件 - MaterialLoadingIndicator.swift

let indicatorBlack = MaterialLoadingIndicator(radius: 15.0, color: .black)
indicatorBlack.startAnimating()
let indicatorGray = MaterialLoadingIndicator(radius: 15.0, color: .gray)
indicatorGray.startAnimating()
浅色模式 深色模式
System Default System Default Dark

安装

MaterialDesignWidgets 可通过 CocoaPods 获取。要安装它，仅需要在您的 Podfile 中添加以下行。

$ pod 'MaterialDesignWidgets'

如果您不使用 CocoaPods，您可以下载整个项目，然后将所有类拖放到项目中并使用。

致谢