قالب وردپرس درنا توس
Home / IOS Development / Create custom reviews for your apps

Create custom reviews for your apps



A year ago, I released BWWalkthrough, a library that facilitates the creation of walkthroughs without any restrictions on user interface design.
The library became quite popular at GitHub, so I decided to write this tutorial to help
Here you will find an overview of the final result of this tutorial (or check it directly on Vimeo):

Installing the Library

If you are using CocoaPods, this line enters Podfile and launch pod install command.

  pod "BWWalkthrough"

To manually install the library, just drag and drop these two files into your project BWWalkthroughPageViewController.swift and BWWalkthroughViewController.swift they are stored under the "Pod / Classes" folder 1

9659006] How it Works

To create this library, I have identified the most important items needed for a review:

Previous / Next Page Buttons to move through the walkthrough pages (obviously, one user can also drag the current page to the left and right to navigate through the steps.)

• A Jump / Close Button to close the review immediately.

• A Page Control to identify the current page and all the steps that go through.

• A list of Pages / steps to display.

BWW gives you all the logic needed to easily build a review with all of these items, your only task is to define the user interface (and if you need it, customize the animations).

Going through the logic is organized into 2 main areas: one Container and Walkthrough Pages .

] The container is where you set the buttons and page control, the pages are the only steps in the review. So the container is always shown and it is responsible to present the walkthrough commands and obviously the pages.

Before you dive into Xcode stuff, I suggest downloading the completed project to easily follow the next sections.

Container Setup

To create a new container, you only have to add a new viewer in Storyboard, from the Identity Inspector's Class to BWWalkthroughViewController and define a Storyboard ID (I have used "container" ).

Just drag and drop the items described earlier (next, previous and closed buttons and page controller) and set their automatic layout restrictions as you usually do for the user interface. Please note that if you do not need any of these items, you are not required to add them; you can even have a review completely UI-free!

When the items are in place, insert IBOutlet and IBAction connections:
1) Connect the next button to the display regulator property nextButton (ctrl + click on the button and drag to view the control icon).
2) Now perform the reverse connection and connect the display control to the next button (ctrl + click on the display control icon and drag to "next button"). You should see some actions. Select nextPage () the action.
You can do the same for previous and close the buttons, and do not forget to link the page management (if available in your user interface) to the pageControl property as well.

You have created a working container. Let's make a few pages!

Pages Setup

To view N steps, you must create N pages. Each page needs a View Controller. Add all necessary view controllers to Storyboard and assign them the class BWWalkthroughPageViewController and different Storyboard IDs (I have used page_1, page_2, page_3 and page_4).

Make sure the page is properly configured

Now you can place all the items you need on your pages, you are free to put the design as you wish!

Initialiser Walkthrough

Now that all the elements have been created, you must initialize the review. The only needed step is to call the addViewController function to include the pages in the review. Here is a simple example of code to initialize View Controllers from Storyboard and add all pages to the container.

  la sub = UIStoryboard (name: "Main", bundle: null)
walkthrough = stb.instantiateViewControllerWithIdentifier ("walkthrough") as! BWWalkthroughViewController
la page_one = stb.instantiateViewControllerWithIdentifier ("page_1")
la side_two = stb.instantiateViewControllerWithIdentifier ("page_2")
la page_three = stb.instantiateViewControllerWithIdentifier ("page_3")
la side_four = stb.instantiateViewControllerWithIdentifier ("page_4")

// Attach the pages to the master
walkthrough.delegate = self
walkthrough.addViewController (page_one)
walkthrough.addViewController (page_two)
walkthrough.addViewController (page_three)
walkthrough.addViewController (page_four)

You can find this code in the presentWalkthrough feature of the MainViewController class. This controller is the initial viewer of this app, and it is responsible to initialize and present the review. You can decide to present walkthrough using different techniques. For example, you can use the function (_: didFinishLaunchingWithOptions 🙂 of AppDelegate to select which controls are present or create a custom structure using control content that this decision is strongly connected for your architecture design.

In this example, we will only present the review after the original check is presented.

At this point walkthrough goes full  :)

Prebuilt animations = no code required!

You can easily get some nice animations and just change some settings that can be accessed directly through the interface builder without writing a single line of code. Open Storyboard and select one of your pages (not the container … a page!). In the attribute inspector you will see some interesting parameters.

• Speed: defines the animation rate for each axis.

• Speed ​​variation: Each element's speed is incremented incrementally with this value. If you hold it to zero, all the elements will have the same speed, change it to get a parallax effect.
The factor that changes the velocity variance is the elemental position in the hierarchy. The deepest element has the default speed, which moves up through the hierarchy, the speed variation will be added to the start speed. An element at Index 3 will have a speed equal to: Speed ​​+ (3 * Speed ​​variation).

• Animation Type: Available values ​​are "Linear", "Curve", "Zoom" and "Curve" "InOut". Basically, they change the algorithm that defines how to move items during transition to the next page and from the previous page. Play with the animation type and the speed you can achieve really nice effects! In the current example I have used Linear for first page, Curve for the other and Zoom for the third. The last page uses a custom animation, we'll talk about it later.

• Undo Alpha: set it to "On" to see a FadeIn / FadeOut effect during page transitions.

• Static themes: Here you can view the items you do not want to animate. These items will follow the regular scrollview transition without performing additional animation. Check page 3, the one with the zoom effect. As you can only see, the image of the scale animation is affected. The labels are not taken into consideration, because their codes are listed in the static codes field (2,3,4).

Have fun  :)

Walkthrough delegate

I If you need to perform some custom actions during user navigation, you can utilize 4 triggers handled by walkthrough delegate features, they are extremely self explanatory:

  walkthroughCloseButtonPressed ()
walkthroughNextButtonPressed ()
walkthroughPrevButtonPressed ()
walkthroughPageDidChange (undersider: Int)

A single example using this feature is the change of visibility of the shutter button. Let's say you only want to show the button when the review goes to its last page. You can easily implement walkthroughDidPageChange this way:

  fun walkthroughPageDidChange (pageNumber: Int) {
if (self.walkthrough.numberOfPages - 1) == pageNumber {
self.walkthrough.closeButton ?. hidden = false
}else{
self.walkthrough.closeButton ?. hidden = true
}
}

Another case of using delegate features is the action that rejects the review when the shutter button is pressed:

  fun walkthroughCloseButtonPressed () {
self.dismissViewControllerAnimated (true, completion: null)
}

(see MainViewController.swift example for more info.)

Custom animations

As you can see, the last page in this example performs a fully customized 3D animation. Well, this animation is not included in animation types as previously described. It's a very good news because it means you can achieve whatever animation you want! If you do not like what I have already built for you, I will not complain : P
To utilize custom animations, you must create a subclass of BWWalkthroughPageViewController and override the method walkthroughDidScroll (Position: Offset 🙂 .
This method receives the position x-19459009] and an arbitrary offset value . This displacement changes depending on the location of the page in the review. If the page is partial or full, the displacement is shown from 0.0 to 2.0, where 0 means that the page is to the right of the page displayed, 1.0 when the page is fully displayed, and 2.0 when the page is to the left of the current page.

You can easily create an algorithm to change what you want (colors, alpha, positions, scales) for one or all of the elements on the page relative to this offset value. Check this example, here we use a 3D rotation for the entire page team.

  override fun walkthroughDidScroll (position: CGF-oleate, offset: CGFloat) {
where tr = CATransform3DIdentity
tr.m34 = -1 / 1000.0
view.layer.transform = CATransform3DRotate (tr, CGFloat (M_PI) * (1.0 offset), 0.5.1, 0.2)
}

This code is included in the class MyCustomPageViewController and the class has been assigned on page 4 of walkthrough.

Conclusion

This class was created 1 year ago when it was fast something was new, so there is a lot of room for improvement on its code. I'm planning a complete restyl of the class for version 2.0, please suggest some improvements or features that you want to see implemented in BWWalktrough 2.0! You can always reach me on twitter @bitwaker or add a problem to the GitHub repo!

Thanks to StockSnap.io for the amazing scenery images and to FlatIcon.com for the cute pet jewels.

Ciao!

Download source




Source link