Tag: Iglistkit

iOS上的Messenger Messenger头像动画: 介绍当您的消息收件人看到您的消息时，Facebook Messenger具有特殊的可见状态动画。它旨在向发件人提供信息通知，告知您的受众群体正在积极在线并实时查看您的消息。此功能的商业价值不仅是鼓励人们发送更多实时消息，还使经常发送消息的人们感到高兴。 1：1聊天以及群聊中都可以使用此功能。我创建了一个简短的gif，以说明所看到的头部移动动画：那么我们从哪里开始呢？＃1 Vanilla UICollectionView 首先，我确定的一件事是，我们应该使用UICollectionView 。 UICollectionView不仅支持自定义布局，而且还具有用于插入/更新/删除/移动操作的本机动画。因此，最重要的一点是移动动画。从Apple文档获取UICollectionView： func moveItem(at indexPath: IndexPath, to newIndexPath: IndexPath) 我们可以使用它来实现看到的脑袋之间的移动动画。 UICollectionView在内部管理所有动画详细信息，并通过配置正确的动画属性来处理所有繁重的工作，并将其发送给Core Animation以获得实际效果。所以现在的问题是，我们如何为这个UICollectionView构造数据模型？这很容易，我们只需要创建一个一维对象数组，其中包含一个Message或一个User （对于可见头）。现在，我们有了三个节控制器，并且HScrollSeenHeadSectionController包含另一个H滚动UICollectionView用于显示的头部。这次我不打算使用自定义UICollectionViewLayout，因为我认为嵌套的SectionController可以自动处理。但是，这就是我得到的：事实证明，使用嵌套部分控制器作为所有可见头部的容器存在一些问题：没有移动动画。数据模型现在变为二维数组，我们必须模拟更新的数据结构。 IGListKit不会将其视为移动动画，因为从技术上讲，我们不能在两个不同的 UICollectionView之间移动单元格。 H滚动UICollectionView的布局不正确。为了布局从右边缘开始对齐的可见头，我们必须为此H滚动组件专门实现一个新的自定义UICollectionViewLayout。我放弃了这种方法，我认为需要在库级别解决此问题，以支持不同UICollectionView之间的单元格移动动画，这似乎并不简单。＃3 IGListKit +自定义UICollectionViewLayout 最后，我决定使用＃1中的Custom UICollectionViewLayout并将其与IGListKit结合使用。基本上，相同的想法是使用一维数组并使用单个UICollectionView为屏幕上的所有UI元素提供动力。使用IGListKit的好处是，它全部是数据驱动的，无需了解有关何时移动或何时删除的UICollectionView详细信息。图书馆会自动为我们计算它，我们可以这样做：如果我们在第3行点击最右边的seeedHead，则需要对两个seehead进行动画处理，因此我们的插入和删除更新集为：插入到[第3节，项目0]上，元素类型： seenhead1 在[第2节，项目0]上删除，元素类型： seenhead0 ， […]

如何改善您的IGListCollectionView: 在我的上一篇文章中，我展示了如何将UITableView迁移到IGListCollectionView，今天，我将展示如何通过添加其他类型的单元格和处理触摸事件来改进它。所以我们将最后一篇文章的项目用作我们的入门项目，您可以在这里找到我们的目标是添加一个UISearchBar，一个带有水平滚动的UICollectionView，它将填充事件（我将其称为EmbeddedView），这是一种查看字符（行和网格）并在触摸事件上更改viewcontroller的替代方法。为了简短而无聊，我将仅介绍一些关键主题，向您展示我们如何实现这一目标的：首先，我们需要更改将模型加载到IGListCollectionView的方式。我们的ViewController有一个应该符合IGListDiffable的Character数组，但是现在我们将使用该协议而不是一个具体的类，因此我们需要创建一个新的IGListDiffable.数组IGListDiffable. 我们要包含在列表中的所有对象都应符合它，因此我们将创建一个Search ，一个CharactableView （将在我们的单元格是行还是网格时处理）， Portrait和一个Embedded模型。每个模型将代表我们的IGListCollectionView中的一个单元格。您可以在下面看到我们如何在Search模型中做到这一点之后，我们将在SectionControllers上工作。除了EmbeddedSectionController之外，每个SectionController的工作方式都与我在上一篇文章中看到的一样，这一点值得特别注意，因为它将具有自己的IGListCollectionView和IGListAdapter因此我们可以从Marvel API中提取事件并将其显示给用户。它应该实现IGListAdapterDataSource和IGListAdapterDelegate来拉动更多事件，例如在无尽的TableView中。最后，我们只需要更改ViewController即可使用我们的新单元格。我们创建了一个名为views的IGListDiffable数组。在IGListAdapterDataSource objects(for:)方法中，我们基于filterString过滤字符，并添加Seach和EmbbedView以便将其放置在字符列表之前。 return [self.searchView as IGListDiffable] + [self.embeddedView] + (filter as [IGListDiffabe]) 每次更改列表的布局时，我们都需要调用adapter.performUpdates()来更改列表，行到网格或网格到行的位置，它会基于diff算法重新加载IGListCollectionView。要处理单元格上的触摸事件，我们需要实现didSelectItem()方法，就像在RowSectionController上RowSectionController 您可以在此处检查最终项目。如果您有任何意见，请通知我。

IGListKit —将UITableView迁移到IGListCollectionView: IGListKit是Instagram发布的数据驱动框架，可帮助我们创建快速灵活的UICollectionViews。实际上，它还提供了许多其他功能，例如动画和线性复杂度差异计算，使我们的应用看起来更凉快。今天，我将展示如何将UITableView迁移到IGListKit。首先，我们需要一个使用UITableView的应用程序，因此我们将使用Thiago Lioy的Marvel App。您可以在github上查看他的代码，以及他如何以中等方式创建这个很棒的应用程序。在安装IGListKit并开始使用它之前，让我们看一下Lioy的代码。在CharactersViewController我们可以看到TableView以及它的委托和数据源，其中使用了Character数组。首先，我们需要安装IGListKit。这可以通过可可足类或迦太基来完成。使用cocoapods，您的pod文件中将具有以下内容： pod ‘IGListKit’, :git => ‘https://github.com/Instagram/IGListKit.git’, :branch => ‘master’ 现在，我们可以从更改Character模型开始。我们的模型应符合IGListDiffable协议。我们可以通过扩展来做到这一点 IGListKit使用了一个有趣的适配器概念，它可以将对象分解为称为SectionControllers的各个部分。每个SectionController负责一个可以具有多个单元格的节，但是在此示例中，我们将仅具有一个单元格。现在，我们可以创建一个名为tableCharacterViewController.swift的新UIViewController 。在此文件中，我们有一个IGListCollectionView，一个IGListAdapter并实现IGListAdapterDataSource。您可以在github上检查此应用程序。您可以在第二篇文章中检查如何使用不同的单元来改进IGListCollectionView并处理触摸事件。

我们的应用程序还会找到一个新家：HOMESCREEN第一部分: 这篇文章最初发表在 ImmobilienScout技术博客上在相当长的一段时间内，当用户开始使用我们的应用程序时，该应用程序会立即以其最擅长的屏幕启动：搜索新家。将搜索表单作为应用程序登录页面，可以极大地帮助用户找到快速结果，或更改其搜索条件以缩小搜索范围。然后，我们决定将其带入一个新的层次，即根据我们的推荐引擎，用户，当前位置还是显示为上一次搜索添加的最新属性，为您带来内容。基本上，我们已经将所有这些因素纳入了我们的新主屏幕。启动应用程序后，将显示新的主屏幕，并向用户提供自定义的内容，第一部分是Last Search ，其中包含最新属性，并添加了与上次执行搜索相同的条件，突出显示了新列表（用户没有尚未打开）。 “ 推荐”部分显示了由我们的推荐引擎提供的属性，该属性适合搜索参数并突出显示不在搜索结果中但具有用户可能感兴趣的相似特征的属性。“ 附近”根据用户可能感兴趣的假设显示附近的属性在他们当前位置附近找到新房子。在这种情况下，用户是在家中还是在工作中搜索都没有关系。太酷了，那么我们如何从iOS的角度构建它呢？乍一看，这似乎是一个简单的网格布局，但是我们做得越多，就越相信我们-它比我们一开始的预期要复杂得多。因此，例如，如果我们希望每个节内容具有不同的布局，例如全宽属性，例如其他节中的VS Normal属性布局，该怎么办？或添加或使用一根钉子（而不是普通属性）将一个截面作为全宽地图视图显示？或嵌套的UICollectionView呢？这是IGListKit进入游戏的地方！ IGListKit建立在UIKit的UICollectionView之上，并且以数据驱动的方式工作，因此它提供了将数据模型映射到其相关的IGListSectionController的Adapter，然后从IGListSectionController提取并处理应如何显示数据，因此逻辑在这里进行。这有助于解耦逻辑和不同类型的组件。区分是IGListKit的另一个优势，它使用最长公共子序列算法执行比较和对`collectionView`的更新，这在大数据集（例如我们的结果列表屏幕），例如无缝快速比较和应用更新的情况下是一个大赢家。随包免费提供。嵌套组件：从更高级别的角度来看，我们需要支持不同的组件类型，如本文前面所提到的，但是当我们深入研究时，我们需要一个部分来根据需要包含不同的组件类型，并且每个组件都可以控制其类型。会显示出来，考虑到该代码段，可以使用“ SectionController”在“ IGListKit”中的工作方式轻松实现：这很容易将2个子`sectionController`嵌套在一个父子控件中，每个子控制器完全控制其显示方式并处理它自己的数据源（无论是本地数据还是从后端获取），它还处理第3个状态，即错误情况下，“ ErrorSectionController”定义其行为方式并再次尝试获取组件，并且一切都由数据模型分离和驱动，而无需放置单个集中式自定义逻辑来处理它们的每种情况/状态。这是我们用于iOS的新主屏幕制作的第一部分，第二部分即将发布。