swift tabbar_建立一个以山羊为灵感的动画解散TabBar：带有UIKit的Swift 5

swift tabbar

GOAT is a widely used streetwear marketplace app. I use the app all the time and it has been a huge influence on my UI/UX designs. It is minimal, clean, responsive, and easy to use. One thing that has always stood out about it is the dismissing tabBar on scroll. When you scroll down, the tabBar dismisses down. Scroll up, and the tabBar reappears. Here is a demo of what I am talking about:

GOAT是一种广泛使用的街头服装市场应用程序。 我一直在使用该应用程序，这对我的UI / UX设计产生了巨大影响。 它最小，干净，响应Swift且易于使用。 一直脱颖而出的一件事是在滚动上关闭了tabBar。 向下滚动时，tabBar向下关闭。 向上滚动，然后重新出现tabBar。 这是我正在谈论的演示：

The way it is integrated into the app is very clean, which enhances my experience with the app.

它与应用程序集成的方式非常简洁，这增强了我对应用程序的体验。

Using a UICollectionView, here is my implementation of dismissing and presenting the tabBar based on the scroll direction.

使用UICollectionView ，这是我根据滚动方向关闭和显示tabBar的实现。

开始项目 (Starting the Project)

Here is my initial starting project. It is just a simple collectionView with a tabBar:

这是我最初的开始项目。 它只是一个带有tabBar的简单collectionView ：

确定滚动方向 (Determining the Scroll Direction)

The first thing we need to do is determine the direction of the scroll. This will allow us to determine whether we dismiss or present the tabBar based on the scroll direction.

我们需要做的第一件事是确定滚动方向。 这将使我们能够基于滚动方向确定是关闭还是显示tabBar。

We will first declare a variable that will keep track of the previous scroll direction in the class where the collectionView lies. In the case of my project, it is the HomeViewController.

我们将首先声明一个变量，该变量将跟踪collectionView所在类中的上一个滚动方向。 就我的项目而言，它是HomeViewController 。

private var prevScrollDirection: CGFloat = 0

Next, since we are using a UICollectionView, we can call the scrollViewDidScroll function. This function passes a variable through the function called (scrollView) that will give us the y-offset and the scrollView height. We will compare the previous scroll direction from the y-content offset and the scroll height to check if the user is scrolling up. When they are scrolling down, we will compare the previous scroll vs. the y-content offset and check if the y-content offset is greater than zero.

接下来，由于我们使用的是UICollectionView ，我们可以调用scrollViewDidScroll 功能。 此函数通过名为( scrollView )的函数传递变量 这将为我们提供y偏移和scrollView高度。 我们将根据y内容偏移量和滚动高度来比较先前的滚动方向，以检查用户是否向上滚动。 当他们向下滚动时，我们将比较前一个滚动与y内容偏移量，并检查y内容偏移量是否大于零。

Using the scrollView function, we can now determine the scroll direction. We print the scroll direction on the console to verify that we are indeed capturing the correct direction.

使用scrollView函数，我们现在可以确定滚动方向。 我们在控制台上打印滚动方向，以验证我们确实捕获了正确的方向。

After we determine the scroll direction, we will store the y-content offset into the prevScrollDirection variable we created.

确定滚动方向后，将y内容偏移量存储到我们创建的prevScrollDirection变量中。

通知中心 (NotificationCenter)

Here is how Apple describes the NotificationCenter:

这是Apple描述 NotificationCenter的方式：

“A notification dispatch mechanism that enables the broadcast of information to registered observers.”

“一种通知分发机制，可以将信息广播到注册的观察者。”

I decided to use NotificationCenter over the delegate protocol method since the latter requires very strict syntax. Using NotificationCenter allows for fewer lines of code and is very easy to implement. We just need to ensure we deallocate the NotificationCenter observers we will create.

我决定使用NotificationCenter 委托协议方法，因为后者需要非常严格的语法。 使用NotificationCenter可以减少代码行，并且非常易于实现。 我们只需要确保释放我们将创建的NotificationCenter观察者即可。

We will first declare a global variable for the notification name. For this example, we can do it outside the HomeViewController class.

我们将首先为通知名称声明一个全局变量。 对于此示例，我们可以在HomeViewController外部进行操作 类。

public let tabBarNotificationKey = Notification.Name(rawValue: "tabBarNotificationKey")

Next, let’s post the notification and pass the boolean based on the scroll direction. After reworking the scrollViewDidScroll function, we get this:

接下来，让我们发布通知并根据滚动方向传递布尔值。 重做scrollViewDidScroll 函数，我们得到这个：

We create a variable called isHidden. If the user is scrolling up, it will be false. If they are scrolling down, it will be true. We post a notification and pass the boolean using a dictionary through userInfo.

我们创建一个名为isHidden的变量。 如果用户向上滚动，它将为false 。 如果它们向下滚动，则为true 。 我们发布通知，并使用字典通过userInfo传递布尔值。

Next, we will go to the tabBar class where we will add an observer.

接下来，我们将转到tabBar类，在其中添加观察者。

We can add this observer in viewDidLoad:

我们可以在viewDidLoad添加该观察者：

NotificationCenter.default.addObserver(self, selector: #selector(self.notificationReceived(_:)), name: tabBarNotificationKey, object: nil)

Creating this will require us to create a function where we can access the boolean we passed from the posted notification:

创建此代码将需要我们创建一个函数，在该函数中，我们可以访问从发布的通知传递过来的布尔值：

Run the project. If you scroll, you will get the tabBar to hide, but it’s very abrupt:

运行项目。 如果滚动，将使tabBar隐藏，但是它非常突然：

Before we continue, we need to deallocate the NotificationCenter observers we created in the same class:

在继续之前，我们需要取消分配NotificationCenter观察者 我们在同一个类中创建的：

deinit {NotificationCenter.default.removeObserver(self)}

动画标签栏关闭 (Animating Tabbar Dismiss)

Our last step is animating the tabBar.

我们的最后一步是给tabBar设置动画。

Upon doing some research, I found an article by I am Simme on how to animate dismissing the tabBar. We can add this extension that extends the UITabBarController class:

经过研究，我发现我是Simme 的文章 ，内容涉及如何动画化tabBar。 我们可以添加此扩展来扩展UITabBarController类：

Once we add this extension, we can just call the notificationReceived function and pass it through isHidden to the setTabBar function we added.

添加此扩展名后，我们可以仅调用notificationReceived 函数并将其通过isHidden传递给setTabBar 我们添加的功能。

Run the project and we should get this result:

运行项目，我们应该得到以下结果：

Feel free to download the GitHub project to test it out yourself. Cheers.

随意下载GitHub项目以自己进行测试。 干杯。

翻译自: https://medium.com/better-programming/build-a-goat-inspired-animated-dismissing-tabbar-swift-5-with-uikit-bd6506f3af01

swift tabbar