Tag: 材质设计

充满材料设计的天空: 关于Google及其给iOS UI开发人员的礼物。我知道。我是一名Android开发人员，应该与这个小机器人呆在一起。但是，即使它在iOS中实现，我也无法抗拒Material Design！几天前，我正在为我目前的公司开发一个应用程序。我做了一个“ meh”布局（我不专门从事iOS布局，但是工作是工作，我必须安排这样做）。看到糟糕的设计-好吧，它并没有那么糟糕，只是没有那么有趣-看着漂亮的Android对应产品，我脑海里浮现出一个疑问：“材质设计呢？”。不久前，我尝试了一个由CosmicMind的iOS第三方库，其中包含许多MD控件（请在此处进行检查），但真诚地，它并没有说服我。我不知道为什么，对我来说，它太“塑性”了，无法使用……也许对您来说它运行良好，所以尝试一下，也许您找到了梦想中的图书馆！因此，我在网络上搜索了有关Big G设计范例的另一个库，然后我进入了一个GitHub存储库，这使我大为震惊：iOS的Material Components。只有一堆星星（目前大约有六百个星星，考虑到GitHub上有许多10–20k★s项目，这并不是一个很大的数字！），但是我开始阅读其中的描述。 “由Google的工程师和UX设计师的核心团队开发。”好的，我已经在做梦了：Google员工为Material Design设计的iOS库？我也可以用我喜爱的图形样式开发Apple产品吗？我必须学习和使用它！好吧，故事的结尾让我开心，就像一个婴儿用我的公司iPad跑步（嘘，别对老板说，我很好地对待这些东西🙄），向我的同事们展示了奇迹，以及一个令人惊叹且非常流畅的应用程序。今天，我只想向您展示如何使用这个漂亮的库：我们将构建一个小的Material Design Twitter客户端（“ Pff，另外一个？！网络上有很多关于蓝鸟客户端的教程！” —是的。程序员没有想象力，我发现已经完成的Swifter Twitter-API-swift时期。在GitHub上可以找到我写的，我在本文中谈论的Twitter客户端。

iOS上的Material Design圆形进度视图: 我在iPhone上经常使用Gmail应用程序，并且我一直喜欢Google用来循环加载电子邮件和/或在向下滑动时刷新的循环进度动画视图。我说的是“材料设计圆形进度视图”，尤其是不确定的实现，其中圆上的两个点似乎一直在互相追逐。我决定使用Swift在iOS上实现此功能，然后尝试一下。您可以在这里找到git repo。这是一个相当快的实现，我只花了几个小时就完成了。真的可以改善吗？可能是。我将来会重新讨论吗？当然。进度视图动画由两个基本部分组成：笔划和旋转。简而言之，我们有一个视图，我们要添加一个称为“ circularLayer”的CAShapeLayer 。我们必须确保它没有填充色，并为其定义可见的线宽，因为我们将使用它来绘制圆。让CircularLayer = CAShapeLayer（） CircularLayer.lineWidth = 4.0 CircularLayer.fillColor = nil layer.addSublayer（circularLayer）我们需要设置一个圆形的UIBezierPath ，稍后再对其进行动画处理。这是在视图的layoutSubviews（）方法上完成的。为此，我们计算要绘制的圆的半径并描画一条圆弧路径，并将其添加到circularLayer中。请注意，起始角度为π/ 2，这是基于对进度视图在Gmail iOS应用上开始和结束的位置的观察。让半径=最小值（bounds.width，bounds.height）/ 2 — circleLayer.lineWidth / 2 让arcPath = UIBezierPath（arcCenter：CGPointZero，radius：radius，startAngle：CGFloat（M_PI_2），endAngle：CGFloat（M_PI_2 +（2 * M_PI）），顺时针：true） CircularLayer.path = arcPath.CGPath 好的，让我们来看看实现的内容。现在我们有了中风的道路，但我们需要对其进行动画处理。我们使用strokeEnd从点0.0到1.0进行动画处理。我们还将动画添加到strokeStart中，以稍稍延迟地赶上移动点。对于最后的触摸，我们使用具有EastIn和EaseOut时序的动画曲线，以突出显示“追赶”效果。让inAnimation：CAAnimation = […]

物料设计组件pada iOS：选项卡: Adapun Komponen 材料设计 Yang Akan Kita Bahas Pada Tulisan Kali Ini Adalah Tabs 。 Android的Seperti halnya komponen-komponen yang sudah kita bahas sebelumnya和Tabs juga merupakan komponen yang sudah sangat常见的Android应用程序。 Pertama kita perlu menambahkandependecy pada Podfile kita。 pod’MaterialComponents / Tabs’ Setelah melakukan perintah 吊舱安装，kita akan bisa menggunakan sebuah类yang bernama MDCTabBar 。 Dan Untuk Mulai Menggunakan MDCTabBar […]

物料设计组件pada iOS：卡片视图: Pada tulisan kali ini kita阿肯色曼巴球膜卡视图 seperti pada gambar di atas。 Jadi secara gamblang bisa kita katakan bahwa 卡片视图 merupakan kontainer yang dimana cirinya antara lain：Memiliki 阴影 dengan 仰角 tertentu dan juga sudut-sudut yang memiliki半径tertentu。 Untuk mengimplementasi 卡视图 pada aplikasi iOS kita 材质设计组件（MDC），依赖于 berikut pada Podfile pod’MaterialComponents / Cards’ Setelah melakukan perintah 吊舱安装，makan […]

适用于iOS的Material Showcase: 基于Material Design Guidelines的iOS应用的优雅美观的水龙头展示柜视图库。介绍在开发跨平台应用程序时，应将统一的UI / UX置于较高优先级。当我们实施“功能发现”以指导用户首次浏览我们的应用程序时，我们的设计师决定遵循材料设计准则。 Android团队感到很自在，因为那里有一些流行的库（例如TapTargetView或MaterialTapTargetPrompt）开始。相比之下，对于iOS版本，它需要我们的工作来从头开始实现，因为没有现有的库可以满足我们的需求。因此，我们计划将其构建为一个开放源代码库，其他开发人员也可以使用它。结果通过仔细遵循Google Material页面上有关UI优点和动画的详细指南，我们得到了如下结果。您可以使用CocoaPods轻松将其添加到iOS应用中。材质展示柜 iOS应用的优雅美观展示。 cocoapods.org 或者，您可以从Github存储库包装其源代码并将其放入您的项目中。 aromajoin / material-showcase-ios material-showcase-ios – iOS应用程序的优雅美观的展示柜。 github.com 特征支持任何UIView 提供便捷的方法来快速与特殊的UI组件（UIBarButtonItem，UITabBarItem，UITableViewCell）进行交互。轻松自定义主题和动画。有关更多信息，请在Github存储库中进行检查。贡献我希望它不仅是第一个“ Material Feature Discovery” iOS库，而且希望它成为减少iOS开发人员工作的简单，优雅且可靠的组件。如果您发现它有用并且想做出贡献，请在Github上查看它，所有拉取请求都非常感谢。