The AppStore is often used by apple users. I have imitated it in the demo. The address of the project is here.
This article is to explain the good effect in the project, which mainly includes the following three parts:
1. Application cards in Today, opening and closing effects.
2. In the details of the game App, slide up and down in the gradual navigation bar and the top view, and slide across the displayed list
3. In the update list, click more of an item to refresh the cell
Concrete implementation:
1. Card opening and Folding:
-
Open: Click on a cell from Today’s list and present the details page.
-
Close: Click the close button from the details page, or hold down the screen slide to close the details page.
The whole animation is done from TodayViewController to CardDetailViewController.
The opening and closing all belong to the custom here animated transitions, so the first thing is to follow the agent UIViewControllerTransitioningDelegate details page
TodayAnimationTransition here is to define the transitions of the animation effect is how to implement specific, CardPresentationController transitions occur in the background, also is in the details page dropdown, see a gaussian blur effect.
Now let’s see how it’s presented. This is part of the implementation in TodayAnimationTransition. Swift.
It is divided into three parts:
-
Get the desired elements of the transition animation from the transitionContext
-
Set the size of the controller at the start of the animation, that is, the size of the cards in the list
-
At the end of the animation, the size of the controller fills the screen and the size of the card increases
Part of the dismiss principle is similar, but with a pull-down close gesture.
The animation also contains many details, including:
-
Hide and display status bar and bottom navigation bar.
-
Press and hold the card, the card shrinks, release, jump to the details page
The details can be viewed in the code.
2. Animations in game details
1. Slide up and down the gradient navigation bar and the top view. The corresponding controller is DetailViewController.
-
Start by customizing navigationBar. The corresponding class is DetailNavigationView
-
And then based on a full-screen slide, we put everything into a tableView.
-
Set the tableHeaderView with the top image as tableView.
-
Finally, as the tableView slides, scale the transparency of the navigationBar, the color of the return button, and the size of the tableHeaderView.
The calculation here is a little more complicated because it involves changes in size, transparency and color:
As above, the three comments correspond to
-
Changes in the size of the top picture
-
NavigationBar transparency changes
-
Returns the color change of the button
Specific implementation please see the code.
3. In the update list, click more to refresh cell.
The realization of the corresponding in UpdateTableViewController and UpdateTableViewCell
The main point here is that the adaptive height of using UITableViewCell is sometimes very useful.
For example, in the update list, the height of each cell is equal, but the height of the cell will change after clicking more buttons. After using adaptive height, we don’t care about the actual height of each cell, everything is left to the system to adapt.
Here, I used XIB to realize the layout of the cell. The key point is that the XIB is filled with controls that display text and other controls. When more text is displayed, the larger the label for displaying text is, the larger the height of the cell will be calculated by the system.
As shown in the figure, ContentLabel is the Label that displays the main text. Its upper, lower, left and right constraints make the cell height change with its height.
In the UpdateTableViewController code also very little,
Just set the estimated height of the cell, set the actual height to adaptive, and register the cell
The other parts
The project also includes my details page, search page and so on, interested friends can also see.
The end:
-
For the purpose of practicing English, the content displayed in the project and the comments in the code are all in English.
-
This project has only done a part, there are still many content can continue to do, interested friends, you can also submit you want to add, let us work together to improve this project.