Cine app example

This demo app supports iPhone and iPad layouts and implements the following screens:

• Movie list with search and tags:

The first screen displays a list of movies. The view's header includes a list of tags for searching movies grouped by country. The list presents movie images in a grid, with all grid images featuring automatic resizing. The grid is implemented to be memory-efficient, and image caching does not utilize device memory.

Users can also search for a movie by the movie's title or by the director (or one of the directors).

• MovieListView: The main movie list view. It loads tags and child tag views.
• MovieListViewModel: The view model for the movie list.

Tags:
• TagType: To get selected tag view.

Tags Views:
• MoviesView: Loads an A-Z tag view with an animated search text field.
• MoviesViewModel: The view model for the movies tag view.
• GroupedMoviesView: Displays movies grouped by country tag. This view shows movies grouped by tag region countries.
• GroupedMoviesViewModel: The view model for the grouped movies tag view.

Clicking on a movie poster in the list redirects you to another screen with more specific information about the movie.

• Movie detail:

The second screen provides detailed information about a movie, including the title, year, length in minutes, countries of origin, score, directors, writers, actors, and synopsis. The synopsis is scrollable vertically.

• MovieDetailView: Displays the movie detail view. It is presented as a modal view with shadows.
• MovieDetailViewModel: The view model for the movie detail view.

Example gifs with iPhone 14 Xcode simulator:

Example gif with iPad Pro (11 inch) Xcode simulator:

Architecture

I use native SwiftUI MVVM, which is a flexible architecture that can be implemented in a basic or advanced manner as needed. This project supports both UIKit and SwiftUI views. In case of issues with SwiftUI, we can address them using the ViewModel, which is fully compatible with both UIKit and SwiftUI views.

MVVM is a "reactive" architecture, ideally suited for use with SwiftUI and Combine. The view reacts to changes in the view model, and the view model updates its state based on data from the model.

MVVM involves three layers:

• The model layer contains data access objects and validation logic. It is responsible for reading and writing data, and it notifies the view model when data changes.
  
  
• The view model layer contains the state of the view and has methods to handle user interaction. It calls methods on the model layer for data access and updates the view when the model's data changes.
  
  
• The view layer is responsible for styling and displaying on-screen elements without containing business or validation logic. It binds visual elements to the view model's properties, receives user inputs and interactions, and calls methods on the view model in response.
  
  As a result, the view and model layers are completely decoupled, communicating only through the view model layer. However, data binding between the model and view can be achieved with Combine for reactive programming.

This architecture is adopted for its advanced approach, facilitating modular code and adherence to clean code principles, SOLID principles, and best practices.

Tools

• AttributedText: Helper to format html strings.
  
• GridColumns: Helper to show grid columns perfect fit size to iPad and iPhone screens.
  
• TargetDevice: To get current target device to show GridColumns.
  
• TVCustomScrollView: Custom SwiftUI scroll to get scrollOffset, scrollTotalHeight and other info to improve scroll animations, in this case to improve search textfield show/hide.
  
  
  

Common

• SearchColorStyle: Custom reusable SwiftUI color styles to change color states, in this case to search textfield.
  
• TagView: Custom reusable SwiftUI view with alignment guides to show search tags.
  
• MultiImageItemView: Custom reusable SwiftUI View to show images in LazyGrid.
  
• CloseButtonView: Custom reusable SwiftUI View to show close button, in this case to show movie detail close button.
  
• FormDetailView: Custom reusable SwiftUI View to show detail movie data in a better readability way.
  
  
  

Extension class

• View: To add custom placeholder view to SwiftUI.
  
• UIScreen: Extension to get different screen sizes from UIScreen.
  
• Localized+String: To improve the LocalizedString sintax.
  
  
  

Models

Structs:

• Movie: To model Movie data.
  
• ShowsByGenre: To model Movie collections by genre.
  
• TagItem: To model tags to search.
  
  
  

Networking

• DataManager: Manager to get and parse data from json to models.
  
• last7d.cine: json origin movie data.
  

XCTests

This app test ViewModels, Models, Tools, Common, etc.. with XCTests and UITests.
Test Coverage 100%

Swift Guide Style

The app code follows the Ray Wenderlich Swift Style Guide.

Centralized data

The app uses in "support" logical folder a ThemeManager.swift class to support centralized colors. It also uses multilanguage with Localizable.strings to centralized all the text in the app.

Swift Package Manager

• Kingfisher: Used to implement an easy way to download images from server with animation spinner and fade.
  
  
  

GitFlow

This app is developed using GifFlow, using only git commands and tool sourcetree.

Design

The app aims to implement appealing design and UI/UX, adhering to iOS native elements as per Apple guidelines, ensuring a proper layout, and incorporating safe areas for optimal viewing on the latest iPhone models.

Getting Started

Running in Xcode 14.2 and iOS 16.3 Written in Swift 5

Next..

Add network layer with real API service, add favourites, data persistence, etc..