[IOS] imitating & quot; new hot drawer rankings & quot; Dynamic startup pages YFSplashScreen and iosyfsplashscreen

[IOS] simulates the YFSplashScreen and iosyfsplashscreen dynamic startup pages of the new hot drawer list.

For IOS, you 'd better set the default system startup page. Otherwise, the black screen will pop up when you enter the application.

Is the effect we want to achieve:

General idea: Set a default system startup page. When you enter didfinishlaunchingwitexceptions,

Add a custom startup page to the Window. The initial screen is the same as the system startup page.

You can implement some animations on the custom boot page. After the animation ends, the custom boot page is removed.

 

1. Set the default system startup page

Now, the LaunchScreen. storyboard startup page file is automatically generated for the new project.

Go to the project root directory and click General to find the following:

In addition to setting the Launch Screen File directly, you can also set the Launch Image Source to add the Launch page.

So let's use this method. Use Assets. xcassets to add images,

1. We cannot use LaunchScreen. storyboard and can delete it. At the same time, Row 3 sets the Launch Screen File to null.

2. In the second row, click User Asset Cattalog-> Migrate: Luanch Images Source will change to Brand Assets.

But this is not what we need. Therefore, click the arrow on the right to enter Assets. xcassets, right-click AppIcon, and select

App Icons & Launch Images-> New IOS Launch Images, there will be many boxes on the right that can be filled with Images.

Then return and select LuanchImage from the second line. The result is shown in.

 

Now you can add images to the newly created LaunchImage to display the default startup screen of the system.

So far, many tutorials on the Internet do not know how to add images. For more information about how to set images, see.

(The result is that after an image is added, a large black edge is displayed on the upper and lower sides or no picture is displayed)

 

2. Set the system startup page Image

The content in LaunchImage is as follows, and I have marked the corresponding image resolution.

(In order to adapt to screens of different sizes, apart from Landscape screens, a total of five images with different resolutions are required, which have been distinguished by colors)

Then there is the image used by devices of different sizes (this name is just for better matching, put the image in the corresponding position of LaunchImage)

The size of the logical coordinate system (resolution) can be understood as the obtained [UIScreen mainScreen]. bounds. size.

Therefore, you can add the above five resolution images to a normal system default startup page.

(Note: If you do not add these items to the project, you can directly drag them to the corresponding position of the LaunchImage. in the directory

Assets. xcassets/LaunchImage. launchimage you can see 7 automatically generated images with specific names)

3. Custom page UIView

1. Set the background

After the system starts the screen by default, the custom UIView we added to the Window is displayed.

To ensure the smoothness of the image, you still need to set the background to the same image as the startup image.

For different devices, the default boot screen will display different images. If we manually determine to assign a value to the UIView background, there is no trouble.

We can use the "UILaunchImages" of infoDictionary in NSBundle to obtain the LaunchImage currently in use.

The obtained result is a dictionary array DicArrays, and the number of these images will change with the LaunchImage you added.

Here I will list the DicArays obtained when the number of matching all screens (the number of DicArrays is 4). See the following table:

Therefore, we only need to traverse the value of UILanuchimageName that corresponds to the size and direction.

-(NSString *) getCurrentLaunchImageNameForOrientation :( UIInterfaceOrientation) orientation {NSString * currentImageName = nil; CGSize viewSize = self. bounds. size; NSString * viewOrientation = @ "Portrait"; if (UIInterfaceOrientationIsLandscape (orientation) {viewSize = CGSizeMake (viewSize. height, viewSize. width); viewOrientation = @ "Landscape";} NSArray * imageDicts = [[NSBundle mainBundle] infoDictionary] valueForKey: @ "UILaunchImages"]; for (NSDictionary * dic in imageDicts) {CGSize imageSize = CGSizeFromString (dic [@ "UILaunchImageSize"]); // converts a string to Size NSString * orientation = dic [@ "UILaunchImageOrientation"]; // obtain the direction if (CGSizeEqualToSize (viewSize, imageSize) & [orientation is1_tostring: viewOrientation]) {currentImageName = dic [@ "UILaunchImageName"] ;}} return currentImageName ;}

After obtaining the name, you can assign a value to the UIImage using the name.

 

2. Set the icon and name

Have you noticed that the icons and text in the "drawer new hot list" always exist, and then the background color is changed to other images.

My idea is to overwrite the icons and text in the new hot drawer list at the top. The structure of the view after the default start chart is completed.

(In the red circle, the top-level image + text is displayed from left to right, And the UIImageView and the background image of the UIView are animated)

Therefore, we need to add icons and text at the top of the default UIVIew that are exactly the same as the background image to ensure that the system's LaunchImage is redirected to the custom page, the content will not change. However, the startup screen has multiple sizes, so you need to add the icon to the UIView according to a certain proportion. Therefore, it is best to design internal icons and texts in a certain proportion of the startup screen.

 

However, since there is no artist, I have come up with a solution. Directly layout the icons, text, and background on the UIView according to a certain proportion, and then give them to different simulators.

(My layout: the width and height of the square icon are 1/6 of the screen width. The y value is 1/7 of the screen height)

On simulators 4, 4.7, 5, and 5.5 inch, after switching to the maximum window (Command + 1) (Command + S), you can get the desired proportion.

On the 3.5 inch simulator, Command + 1 is: 640*960 Command + 3 is: 320*480

In this way, not only do you get the starting image, but you also have the layout of the top picture and text.

 

3. Save network requests and sandbox

Now the entire process is complete. Another function is to change the network image in the client, which will take effect the next time you enter the application.

Therefore, the network request NSURLSession and sandbox are involved. Some records are omitted here.

Use TaskDownloadSession and other related objects

A. Once the block is implemented, you cannot access the protocol. The delegate protocol can be used to control the download recovery and real-time progress.

B. totalBytesExpectedToWrite is-1 in the progress control protocol. solution:

NSMutableURLRequest * request;

[Request setValue: @ "forHTTPHeaderField: @" Accept-Encoding "];

See StackOverFlow: MBProgressHUD with NSURLConnection

 

For the source code and instructions, see GitHub: YFSplashScreen