5 libs “vi diệu” nhất dành cho các lập trình viên iOS (phần 1)

Tram Ho

8 năm ago

Thư viện là một tập hợp các đoạn code do một ai đó làm sẵn với mục đích là thực hiện sẵn một công việc dài dòng phức tạp đưa ra kết quả như ý muốn. Ngày nay, để làm một ứng dụng có đầy đủ các chức năng thì các lập trình cần phải tìm hiểu nhiều thư viện khác nhau, gom chúng lại với nhau và đưa những gì mà các bạn thấy cần thiết vào trong ứng dụng của mình.

Dưới đây là tổng hợp 1 số libs hay cho các lập trình viên iOS.

1. App thư viện hỗ trợ xem ảnh

Tương tự như facebook paper, MMPaperGallery là 1 apps thư viện hỗ trợ người dùng xem ảnh, với các tính năng khá thú vị như xem ảnh chất lượng cao, zoom, các thao tác vuốt…

Demo

Một số tính năng:

Hỗ trợ các đường link url hình ảnh cell.configureForURL(url)
Thu phóng hình ảnh
Tính năng nghiêng ảnh tương tự như Paper app
Copy thư mục Paper Gallery từ dự án và kiểm tra demo

Chi tiết: https://github.com/mukyasa/MMPaperGallery

2. Thư viện animation chuyển đổi

Tập hợp các chuyển đổi tùy chỉnh dành cho iOS, sử dụng protocol UIViewControllerAnimatedTransitioning

Demo:

Cách lập trình:

$ git clone https://github.com/shu223/AnimatedTransitionGallery
$ cd AnimatedTransitionGallery/
$ git submodule update --init --recursive

$ git clone https://github.com/shu223/AnimatedTransitionGallery

$ cd AnimatedTransitionGallery/

$ git submodule update --init --recursive

Các chuyển đổi có sẵn:

HUTransitionVerticalLinesAnimator
HUTransitionHorizontalLinesAnimator
HUTransitionGhostAnimator
ZBFallenBricksAnimator
CoreImageTransitionBoxBlur
CoreImageTransitionMotionBlur
CoreImageTransitionCopyMachine
CoreImageTransitionDisintegrateWithMask
CoreImageTransitionDissolve
CoreImageTransitionFlash
CoreImageTransitionMod
CoreImageTransitionPageCurl
CoreImageTransitionPageCurlWithShadow
CoreImageTransitionRipple
CoreImageTransitionSwipe
ATCAnimatedTransitioningFade
ATCAnimatedTransitioningBounce
ATCAnimatedTransitioningSquish
ATCAnimatedTransitioningFloat
LCZoomTransition
ADBackFadeTransition
ADCarrouselTransition
ADCrossTransition
ADCubeTransition
ADFadeTransition
ADFlipTransition
ADFoldTransition
ADGhostTransition
ADGlueTransition
ADModernPushTransition
ADPushRotateTransition
ADScaleTransition
ADSlideTransition
ADSwapTransition
ADSwipeFadeTransition
ADSwipeTransition
ADZoomTransition
CECardsAnimationController
CECrossfadeAnimationController
CECubeAnimationController
CEExplodeAnimationController
CEFlipAnimationController
CEFoldAnimationController
CENatGeoAnimationController
CEPortalAnimationController
CETurnAnimationController
KWTransitionStyleNameRotateFromTop
KWTransitionStyleNameFadeBackOver
KWTransitionStyleNameBounceIn
KWTransitionStyleNameDropOut
KWTransitionStyleNameStepBackScroll
KWTransitionStyleNameStepBackSwipe
KWTransitionStyleNameUp
KWTransitionStyleNamePushUp
KWTransitionStyleNameFall
KWTransitionStyleNameSink
DMAlphaTransition
DMScaleTransition
DMSlideTransition
HFAnimator
HFDynamicAnimator
BouncePresentTransition
FlipTransition
ShrinkDismissTransition

Chi tiết: https://github.com/shu223/AnimatedTransitionGallery

3. CarbonKit

CarbonKit là thư viện iOS mở bởi lập trình viên Ernal của iOS. Đây là thanh điều hướng tab gọn gàng, thường được thấy trong các sản phẩm hoàn thành theo phong cách thiết kế Material Design của Google trong các apps Android. Ngoài điều hướng, thư viện còn có hoạt động vút refresh thuận tiện. CarbonKit gồm: CarbonSwipeRefresh và CarbonTabSwipeNavigation

Cách lập trình:

CarbonKit có sẵn trong CocoaPods. Thêm vào Podfile của bạn:

use_frameworks!
pod <span class="pl-s"><span class="pl-pds">'</span>CarbonKit<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>~&gt;2.1<span class="pl-pds">'</span></span>

1 2	use_frameworks! pod <span class="pl-s"><span class="pl-pds">'</span>CarbonKit<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>~>2.1<span class="pl-pds">'</span></span>

Và chạy

pod install

1	pod install

CarbonSwipeRefresh

Code mẫu

#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>CarbonKit.h<span class="pl-pds">"</span></span>

<span class="pl-k">@interface</span> <span class="pl-en">ViewController</span> ()
{
    CarbonSwipeRefresh *refresh;
}
<span class="pl-k">@end</span>

<span class="pl-k">@implementation</span> <span class="pl-en">ViewController</span>
- (<span class="pl-k">void</span>)<span class="pl-en">viewDidLoad</span> {
    [<span class="pl-v">super</span> <span class="pl-c1">viewDidLoad</span>];

    refresh = [[CarbonSwipeRefresh <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithScrollView:</span><span class="pl-v">self</span>.tableView];
    [refresh <span class="pl-c1">setColors:</span>@[
        [UIColor <span class="pl-c1">blueColor</span>],
        [UIColor <span class="pl-c1">redColor</span>],
        [UIColor <span class="pl-c1">orangeColor</span>],
        [UIColor <span class="pl-c1">greenColor</span>]]
    ]; <span class="pl-c">// default tintColor</span>

    <span class="pl-c">// If your ViewController extends to UIViewController</span>
    <span class="pl-c">// else see below</span>
    [<span class="pl-v">self</span>.view <span class="pl-c1">addSubview:</span>refresh];

    [refresh <span class="pl-c1">addTarget:</span><span class="pl-v">self</span> <span class="pl-c1">action:</span><span class="pl-k">@selector</span>(<span class="pl-c1">refresh:</span>) <span class="pl-c1">forControlEvents:</span>UIControlEventValueChanged];
}

- (<span class="pl-k">void</span>)<span class="pl-en">refresh</span><span class="pl-en">:</span>(<span class="pl-k">id</span>)<span class="pl-smi">sender</span> {
    [refresh <span class="pl-c1">endRefreshing</span>];
}
<span class="pl-k">@end</span>

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

						#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>CarbonKit.h<span class="pl-pds">"</span></span>
 
<span class="pl-k">@interface</span> <span class="pl-en">ViewController</span> ()
{
    CarbonSwipeRefresh *refresh;
}
<span class="pl-k">@end</span>
 
<span class="pl-k">@implementation</span> <span class="pl-en">ViewController</span>
- (<span class="pl-k">void</span>)<span class="pl-en">viewDidLoad</span> {
    [<span class="pl-v">super</span> <span class="pl-c1">viewDidLoad</span>];
 
    refresh = [[CarbonSwipeRefresh <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithScrollView:</span><span class="pl-v">self</span>.tableView];
    [refresh <span class="pl-c1">setColors:</span>@[
        [UIColor <span class="pl-c1">blueColor</span>],
        [UIColor <span class="pl-c1">redColor</span>],
        [UIColor <span class="pl-c1">orangeColor</span>],
        [UIColor <span class="pl-c1">greenColor</span>]]
    ]; <span class="pl-c">// default tintColor</span>
 
    <span class="pl-c">// If your ViewController extends to UIViewController</span>
    <span class="pl-c">// else see below</span>
    [<span class="pl-v">self</span>.view <span class="pl-c1">addSubview:</span>refresh];
 
    [refresh <span class="pl-c1">addTarget:</span><span class="pl-v">self</span> <span class="pl-c1">action:</span><span class="pl-k">@selector</span>(<span class="pl-c1">refresh:</span>) <span class="pl-c1">forControlEvents:</span>UIControlEventValueChanged];
}
 
- (<span class="pl-k">void</span>)<span class="pl-en">refresh</span><span class="pl-en">:</span>(<span class="pl-k">id</span>)<span class="pl-smi">sender</span> {
    [refresh <span class="pl-c1">endRefreshing</span>];
}
<span class="pl-k">@end</span>

					

			

Nếu bạn đang sử dụng UITableViewController, bạn phải thêm refreshControl vào self.view.superview sau viewDidAppear

- (<span class="pl-k">void</span>)viewDidAppear:(<span class="pl-k">BOOL</span>)animated {
    [<span class="pl-v">super</span> <span class="pl-c1">viewDidAppear:</span>animated];

    <span class="pl-k">if</span> (!refreshControl.<span class="pl-smi">superview</span>) {
        [<span class="pl-v">self</span>.view.superview <span class="pl-c1">addSubview:</span>refreshControl];
    }
}

- (void)viewDidAppear:(BOOL)animated {

[super viewDidAppear:animated];

if (!refreshControl.superview) {

[self.view.superview addSubview:refreshControl];

}

CarbonTabSwipeNavigation

Code mẫu

#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>CarbonKit.h<span class="pl-pds">"</span></span>

<span class="pl-k">@interface</span> <span class="pl-en">ViewController</span> () &lt;CarbonTabSwipeNavigationDelegate&gt;
<span class="pl-k">@end</span>

<span class="pl-k">@implementation</span> <span class="pl-en">ViewController</span>

- (<span class="pl-k">void</span>)<span class="pl-en">viewDidLoad</span> {
    [<span class="pl-v">super</span> <span class="pl-c1">viewDidLoad</span>];

    <span class="pl-c1">NSArray</span> *items = @[[UIImage <span class="pl-c1">imageNamed:</span><span class="pl-s"><span class="pl-pds">@"</span>home<span class="pl-pds">"</span></span>], [UIImage <span class="pl-c1">imageNamed:</span><span class="pl-s"><span class="pl-pds">@"</span>hourglass<span class="pl-pds">"</span></span>],
    [UIImage <span class="pl-c1">imageNamed:</span><span class="pl-s"><span class="pl-pds">@"</span>premium_badge<span class="pl-pds">"</span></span>], <span class="pl-s"><span class="pl-pds">@"</span>Categories<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">@"</span>Top Free<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">@"</span>Top New Free<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">@"</span>Top Paid<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">@"</span>Top New Paid<span class="pl-pds">"</span></span>];

    CarbonTabSwipeNavigation *carbonTabSwipeNavigation =
    [[CarbonTabSwipeNavigation <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithItems:</span>items <span class="pl-c1">delegate:</span><span class="pl-v">self</span>];
    [carbonTabSwipeNavigation <span class="pl-c1">insertIntoRootViewController:</span><span class="pl-v">self</span>];
    <span class="pl-c">// or [carbonTabSwipeNavigation insertIntoRootViewController:self andTargetView:yourView];</span>
}

<span class="pl-c">// delegate</span>
- (UIViewController *)<span class="pl-en">carbonTabSwipeNavigation</span><span class="pl-en">:</span>(CarbonTabSwipeNavigation *)<span class="pl-smi">carbonTabSwipeNavigation</span>
             <span class="pl-en">viewControllerAtIndex</span><span class="pl-en">:</span>(<span class="pl-k">NSUInteger</span>)<span class="pl-smi">index</span> {
    <span class="pl-c">// return viewController at index</span>
}

<span class="pl-k">@end</span>

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

						#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>CarbonKit.h<span class="pl-pds">"</span></span>
 
<span class="pl-k">@interface</span> <span class="pl-en">ViewController</span> () &lt;CarbonTabSwipeNavigationDelegate&gt;
<span class="pl-k">@end</span>
 
<span class="pl-k">@implementation</span> <span class="pl-en">ViewController</span>
 
- (<span class="pl-k">void</span>)<span class="pl-en">viewDidLoad</span> {
    [<span class="pl-v">super</span> <span class="pl-c1">viewDidLoad</span>];
 
    <span class="pl-c1">NSArray</span> *items = @[[UIImage <span class="pl-c1">imageNamed:</span><span class="pl-s"><span class="pl-pds">@"</span>home<span class="pl-pds">"</span></span>], [UIImage <span class="pl-c1">imageNamed:</span><span class="pl-s"><span class="pl-pds">@"</span>hourglass<span class="pl-pds">"</span></span>],
    [UIImage <span class="pl-c1">imageNamed:</span><span class="pl-s"><span class="pl-pds">@"</span>premium_badge<span class="pl-pds">"</span></span>], <span class="pl-s"><span class="pl-pds">@"</span>Categories<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">@"</span>Top Free<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">@"</span>Top New Free<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">@"</span>Top Paid<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">@"</span>Top New Paid<span class="pl-pds">"</span></span>];
 
    CarbonTabSwipeNavigation *carbonTabSwipeNavigation =
    [[CarbonTabSwipeNavigation <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithItems:</span>items <span class="pl-c1">delegate:</span><span class="pl-v">self</span>];
    [carbonTabSwipeNavigation <span class="pl-c1">insertIntoRootViewController:</span><span class="pl-v">self</span>];
    <span class="pl-c">// or [carbonTabSwipeNavigation insertIntoRootViewController:self andTargetView:yourView];</span>
}
 
<span class="pl-c">// delegate</span>
- (UIViewController *)<span class="pl-en">carbonTabSwipeNavigation</span><span class="pl-en">:</span>(CarbonTabSwipeNavigation *)<span class="pl-smi">carbonTabSwipeNavigation</span>
             <span class="pl-en">viewControllerAtIndex</span><span class="pl-en">:</span>(<span class="pl-k">NSUInteger</span>)<span class="pl-smi">index</span> {
    <span class="pl-c">// return viewController at index</span>
}
 
<span class="pl-k">@end</span>

					

			

Swift mẫu

<span class="pl-k">import</span> <span class="pl-c1">CarbonKit</span>

<span class="pl-k">class</span> ViewController: UIViewController, CarbonTabSwipeNavigationDelegate {

    <span class="pl-c">// MARK: Override methods</span>
    <span class="pl-k">override</span> <span class="pl-k">func</span> <span class="pl-en">viewDidLoad</span>() {
        <span class="pl-k">super</span><span class="pl-k">.</span>viewDidLoad()
        <span class="pl-k">let</span> items <span class="pl-k">=</span> [<span class="pl-s"><span class="pl-pds">"</span>Features<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>Products<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>About<span class="pl-pds">"</span></span>]
        <span class="pl-k">let</span> carbonTabSwipeNavigation <span class="pl-k">=</span> CarbonTabSwipeNavigation(items: items, delegate: <span class="pl-k">self</span>)
        carbonTabSwipeNavigation<span class="pl-k">.</span>insertIntoRootViewController(<span class="pl-k">self</span>)
        <span class="pl-c">// or carbonTabSwipeNavigation.insertIntoRootViewController(self, andTargetView: yourView)</span>
    }

    <span class="pl-k">func</span> <span class="pl-en">carbonTabSwipeNavigation</span>(carbonTabSwipeNavigation: CarbonTabSwipeNavigation, <span class="pl-en">viewControllerAtIndex</span> <span class="pl-smi">index</span>: <span class="pl-c1">UInt</span>) <span class="pl-k">-&gt;</span> UIViewController {
        <span class="pl-c">// return viewController at index</span>
    }
}

import CarbonKit

class ViewController: UIViewController, CarbonTabSwipeNavigationDelegate {

// MARK: Override methods

override func viewDidLoad() {

super.viewDidLoad()

let items = ["Features", "Products", "About"]

let carbonTabSwipeNavigation = CarbonTabSwipeNavigation(items: items, delegate: self)

carbonTabSwipeNavigation.insertIntoRootViewController(self)

// or carbonTabSwipeNavigation.insertIntoRootViewController(self, andTargetView: yourView)

}

func carbonTabSwipeNavigation(carbonTabSwipeNavigation: CarbonTabSwipeNavigation, viewControllerAtIndex index: UInt) -> UIViewController {

// return viewController at index

}

Chi tiết: https://github.com/ermalkaleci/CarbonKit

4. PNChart

PNChart là thư viện biểu đồ đơn giản, tuyệt đẹp với animation sử dụng trong Piner và CoinsMan cho iOS

Yêu cầu:
PNChart phù hợp với iOS 7+ và tương thích với các dự án ARC. Nếu bạn cần hỗ trợ cho iOS 6, sử dụng PNChart <= 0.8.1. Lưu ý rằng PNChart 0.8.2 chỉ hỗ trơ iOS 8+, trong khi đó phiên bản 0.8.3 và phiên bản mới hơn hỗ trợ iOS 7+

Tùy thuộc vào các framework của Apple bên dưới, thường được kết hợp trong phần lớn templates Xcode:

Foundation.framework
UIKit.framework
CoreGraphics.framework
QuartzCore.framework

Bạn cần LLVM 3.0 hoặc mới hơn để lập trình PNChart.

Cách dùng:

Cocoapods:

Khuyến khích sử dụng Cocoapods để thêm PNChart vào dự án

Thêm 1 pod entry cho PNChart vào Podfile của bạn ‘PNChart’
Cài đặt podInstall the pod(s) by running pod install.
Thêm PNChart vào vị trí mà bạn muốn với ‪#‎import‬ “PNChart.h”

b. Copy thư mục PNChart folder vào dự án

Line chart

#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>

<span class="pl-c">//For Line Chart</span>
PNLineChart * lineChart = [[PNLineChart <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithFrame:</span><span class="pl-c1">CGRectMake</span>(<span class="pl-c1">0</span>, <span class="pl-c1">135.0</span>, SCREEN_WIDTH, <span class="pl-c1">200.0</span>)];
[lineChart <span class="pl-c1">setXLabels:</span>@[<span class="pl-s"><span class="pl-pds">@"</span>SEP 1<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 2<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 3<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 4<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 5<span class="pl-pds">"</span></span>]];

<span class="pl-c">// Line Chart No.1</span>
<span class="pl-c1">NSArray</span> * data01Array = @[@<span class="pl-c1">60.1</span>, @<span class="pl-c1">160.1</span>, @<span class="pl-c1">126.4</span>, @<span class="pl-c1">262.2</span>, @<span class="pl-c1">186.2</span>];
PNLineChartData *data01 = [PNLineChartData <span class="pl-c1">new</span>];
data01.color = PNFreshGreen;
data01.itemCount = lineChart.xLabels.count;
data01.getData = ^(<span class="pl-k">NSUInteger</span> index) {
    <span class="pl-c1">CGFloat</span> yValue = [data01Array[<span class="pl-c1">index</span>] <span class="pl-c1">floatValue</span>];
    <span class="pl-k">return</span> [PNLineChartDataItem <span class="pl-c1">dataItemWithY:</span>yValue];
};
<span class="pl-c">// Line Chart No.2</span>
<span class="pl-c1">NSArray</span> * data02Array = @[@<span class="pl-c1">20.1</span>, @<span class="pl-c1">180.1</span>, @<span class="pl-c1">26.4</span>, @<span class="pl-c1">202.2</span>, @<span class="pl-c1">126.2</span>];
PNLineChartData *data02 = [PNLineChartData <span class="pl-c1">new</span>];
data02.color = PNTwitterColor;
data02.itemCount = lineChart.xLabels.count;
data02.getData = ^(<span class="pl-k">NSUInteger</span> index) {
    <span class="pl-c1">CGFloat</span> yValue = [data02Array[<span class="pl-c1">index</span>] <span class="pl-c1">floatValue</span>];
    <span class="pl-k">return</span> [PNLineChartDataItem <span class="pl-c1">dataItemWithY:</span>yValue];
};

lineChart.chartData = @[data01, data02];
[lineChart <span class="pl-c1">strokeChart</span>];

#import "PNChart.h"

//For Line Chart

PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];

[lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];

// Line Chart No.1

NSArray * data01Array = @[@60.1, @160.1, @126.4, @262.2, @186.2];

PNLineChartData *data01 = [PNLineChartData new];

data01.color = PNFreshGreen;

data01.itemCount = lineChart.xLabels.count;

data01.getData = ^(NSUInteger index) {

CGFloat yValue = [data01Array[index] floatValue];

return [PNLineChartDataItem dataItemWithY:yValue];

};

// Line Chart No.2

NSArray * data02Array = @[@20.1, @180.1, @26.4, @202.2, @126.2];

PNLineChartData *data02 = [PNLineChartData new];

data02.color = PNTwitterColor;

data02.itemCount = lineChart.xLabels.count;

data02.getData = ^(NSUInteger index) {

CGFloat yValue = [data02Array[index] floatValue];

return [PNLineChartDataItem dataItemWithY:yValue];

};

lineChart.chartData = @[data01, data02];

[lineChart strokeChart];

#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>

<span class="pl-c">//For BarC hart</span>
PNBarChart * barChart = [[PNBarChart <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithFrame:</span><span class="pl-c1">CGRectMake</span>(<span class="pl-c1">0</span>, <span class="pl-c1">135.0</span>, SCREEN_WIDTH, <span class="pl-c1">200.0</span>)];
[barChart <span class="pl-c1">setXLabels:</span>@[<span class="pl-s"><span class="pl-pds">@"</span>SEP 1<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 2<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 3<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 4<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>SEP 5<span class="pl-pds">"</span></span>]];
[barChart <span class="pl-c1">setYValues:</span>@[@<span class="pl-c1">1</span>,  @<span class="pl-c1">10</span>, @<span class="pl-c1">2</span>, @<span class="pl-c1">6</span>, @<span class="pl-c1">3</span>]];
[barChart <span class="pl-c1">strokeChart</span>];

#import "PNChart.h"

//For BarC hart

PNBarChart * barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];

[barChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];

[barChart setYValues:@[@1, @10, @2, @6, @3]];

[barChart strokeChart];

#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>

<span class="pl-c">//For Circle Chart</span>

PNCircleChart * circleChart = [[PNCircleChart <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithFrame:</span><span class="pl-c1">CGRectMake</span>(<span class="pl-c1">0</span>, <span class="pl-c1">80.0</span>, SCREEN_WIDTH, <span class="pl-c1">100.0</span>) <span class="pl-c1">total:</span>[<span class="pl-c1">NSNumber</span> <span class="pl-c1">numberWithInt:</span><span class="pl-c1">100</span>] <span class="pl-c1">current:</span>[<span class="pl-c1">NSNumber</span> <span class="pl-c1">numberWithInt:</span><span class="pl-c1">60</span>] <span class="pl-c1">clockwise:</span><span class="pl-c1">NO</span> <span class="pl-c1">shadow:</span><span class="pl-c1">NO</span>];
circleChart.backgroundColor = [UIColor <span class="pl-c1">clearColor</span>];
[circleChart <span class="pl-c1">setStrokeColor:</span>PNGreen];
[circleChart <span class="pl-c1">strokeChart</span>];

#import "PNChart.h"

//For Circle Chart

PNCircleChart * circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0) total:[NSNumber numberWithInt:100] current:[NSNumber numberWithInt:60] clockwise:NO shadow:NO];

circleChart.backgroundColor = [UIColor clearColor];

[circleChart setStrokeColor:PNGreen];

[circleChart strokeChart];

# <span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>
<span class="pl-c">//For Pie Chart</span>
<span class="pl-c1">NSArray</span> *items = @[[PNPieChartDataItem <span class="pl-c1">dataItemWithValue:</span><span class="pl-c1">10</span> <span class="pl-c1">color:</span>PNRed],
                           [PNPieChartDataItem <span class="pl-c1">dataItemWithValue:</span><span class="pl-c1">20</span> <span class="pl-c1">color:</span>PNBlue <span class="pl-c1">description:</span><span class="pl-s"><span class="pl-pds">@"</span>WWDC<span class="pl-pds">"</span></span>],
                           [PNPieChartDataItem <span class="pl-c1">dataItemWithValue:</span><span class="pl-c1">40</span> <span class="pl-c1">color:</span>PNGreen <span class="pl-c1">description:</span><span class="pl-s"><span class="pl-pds">@"</span>GOOL I/O<span class="pl-pds">"</span></span>],
                           ];



PNPieChart *pieChart = [[PNPieChart <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithFrame:</span><span class="pl-c1">CGRectMake</span>(<span class="pl-c1">40.0</span>, <span class="pl-c1">155.0</span>, <span class="pl-c1">240.0</span>, <span class="pl-c1">240.0</span>) <span class="pl-c1">items:</span>items];
pieChart.descriptionTextColor = [UIColor <span class="pl-c1">whiteColor</span>];
pieChart.descriptionTextFont  = [UIFont <span class="pl-c1">fontWithName:</span><span class="pl-s"><span class="pl-pds">@"</span>Avenir-Medium<span class="pl-pds">"</span></span> <span class="pl-c1">size:</span><span class="pl-c1">14.0</span>];
[pieChart <span class="pl-c1">strokeChart</span>];

# import "PNChart.h"

//For Pie Chart

NSArray *items = @[[PNPieChartDataItem dataItemWithValue:10 color:PNRed],

[PNPieChartDataItem dataItemWithValue:20 color:PNBlue description:@"WWDC"],

[PNPieChartDataItem dataItemWithValue:40 color:PNGreen description:@"GOOL I/O"],

];

PNPieChart *pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(40.0, 155.0, 240.0, 240.0) items:items];

pieChart.descriptionTextColor = [UIColor whiteColor];

pieChart.descriptionTextFont = [UIFont fontWithName:@"Avenir-Medium" size:14.0];

[pieChart strokeChart];

# <span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>
<span class="pl-c">//For Scatter Chart</span>

PNScatterChart *scatterChart = [[PNScatterChart <span class="pl-c1">alloc</span>] <span class="pl-c1">initWithFrame:</span><span class="pl-c1">CGRectMake</span>(SCREEN_WIDTH /<span class="pl-c1">6.0</span> - <span class="pl-c1">30</span>, <span class="pl-c1">135</span>, <span class="pl-c1">280</span>, <span class="pl-c1">200</span>)];
[scatterChart <span class="pl-c1">setAxisXWithMinimumValue:</span><span class="pl-c1">20</span> <span class="pl-c1">andMaxValue:</span><span class="pl-c1">100</span> <span class="pl-c1">toTicks:</span><span class="pl-c1">6</span>];
[scatterChart <span class="pl-c1">setAxisYWithMinimumValue:</span><span class="pl-c1">30</span> <span class="pl-c1">andMaxValue:</span><span class="pl-c1">50</span> <span class="pl-c1">toTicks:</span><span class="pl-c1">5</span>];

<span class="pl-c1">NSArray</span> * data01Array = [<span class="pl-v">self</span> <span class="pl-c1">randomSetOfObjects</span>];
PNScatterChartData *data01 = [PNScatterChartData <span class="pl-c1">new</span>];
data01.strokeColor = PNGreen;
data01.fillColor = PNFreshGreen;
data01.size = <span class="pl-c1">2</span>;
data01.itemCount = [[data01Array <span class="pl-c1">objectAtIndex:</span><span class="pl-c1">0</span>] <span class="pl-c1">count</span>];
data01.inflexionPointStyle = PNScatterChartPointStyleCircle;
__block <span class="pl-c1">NSMutableArray</span> *XAr1 = [<span class="pl-c1">NSMutableArray</span> <span class="pl-c1">arrayWithArray:</span>[data01Array <span class="pl-c1">objectAtIndex:</span><span class="pl-c1">0</span>]];
__block <span class="pl-c1">NSMutableArray</span> *YAr1 = [<span class="pl-c1">NSMutableArray</span> <span class="pl-c1">arrayWithArray:</span>[data01Array <span class="pl-c1">objectAtIndex:</span><span class="pl-c1">1</span>]];
data01.getData = ^(<span class="pl-k">NSUInteger</span> index) {
    <span class="pl-c1">CGFloat</span> xValue = [[XAr1 <span class="pl-c1">objectAtIndex:</span><span class="pl-c1">index</span>] <span class="pl-c1">floatValue</span>];
    <span class="pl-c1">CGFloat</span> yValue = [[YAr1 <span class="pl-c1">objectAtIndex:</span><span class="pl-c1">index</span>] <span class="pl-c1">floatValue</span>];
    <span class="pl-k">return</span> [PNScatterChartDataItem <span class="pl-c1">dataItemWithX:</span>xValue <span class="pl-c1">AndWithY:</span>yValue];
};

[scatterChart <span class="pl-c1">setup</span>];
self.scatterChart.chartData = @[data01];
<span class="pl-c">/***</span>
<span class="pl-c">this is for drawing line to compare</span>
<span class="pl-c">CGPoint start = CGPointMake(20, 35);</span>
<span class="pl-c">CGPoint end = CGPointMake(80, 45);</span>
<span class="pl-c">[scatterChart drawLineFromPoint:start ToPoint:end WithLineWith:2 AndWithColor:PNBlack];</span>
<span class="pl-c">***/</span>
scatterChart.delegate = self;

# import "PNChart.h"

//For Scatter Chart

PNScatterChart *scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /6.0 - 30, 135, 280, 200)];

[scatterChart setAxisXWithMinimumValue:20 andMaxValue:100 toTicks:6];

[scatterChart setAxisYWithMinimumValue:30 andMaxValue:50 toTicks:5];

NSArray * data01Array = [self randomSetOfObjects];

PNScatterChartData *data01 = [PNScatterChartData new];

data01.strokeColor = PNGreen;

data01.fillColor = PNFreshGreen;

data01.size = 2;

data01.itemCount = [[data01Array objectAtIndex:0] count];

data01.inflexionPointStyle = PNScatterChartPointStyleCircle;

__block NSMutableArray *XAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:0]];

__block NSMutableArray *YAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:1]];

data01.getData = ^(NSUInteger index) {

CGFloat xValue = [[XAr1 objectAtIndex:index] floatValue];

CGFloat yValue = [[YAr1 objectAtIndex:index] floatValue];

return [PNScatterChartDataItem dataItemWithX:xValue AndWithY:yValue];

};

[scatterChart setup];

self.scatterChart.chartData = @[data01];

/***

this is for drawing line to compare

CGPoint start = CGPointMake(20, 35);

CGPoint end = CGPointMake(80, 45);

[scatterChart drawLineFromPoint:start ToPoint:end WithLineWith:2 AndWithColor:PNBlack];

***/

scatterChart.delegate = self;

c. Legend:

Legend được theo vào PNChart dành cho Line và Pie Charts. Vị trí của các mục Legend có thể xếp chồng lên hoặc theo dãy

Cập nhật giá trị (theo thời gian thực)

<span class="pl-k">if</span> ([<span class="pl-v">self</span>.title <span class="pl-c1">isEqualToString:</span><span class="pl-s"><span class="pl-pds">@"</span>Line Chart<span class="pl-pds">"</span></span>]) {

    <span class="pl-c">// Line Chart #1</span>
    <span class="pl-c1">NSArray</span> * data01Array = @[@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>)];
    PNLineChartData *data01 = [PNLineChartData <span class="pl-c1">new</span>];
    data01.<span class="pl-smi">color</span> = PNFreshGreen;
    data01.<span class="pl-smi">itemCount</span> = data01Array.<span class="pl-smi">count</span>;
    data01.<span class="pl-smi">inflexionPointStyle</span> = PNLineChartPointStyleTriangle;
    data01.<span class="pl-smi">getData</span> = ^(<span class="pl-k">NSUInteger</span> <span class="pl-c1">index</span>) {
        <span class="pl-c1">CGFloat</span> yValue = [data01Array[<span class="pl-c1">index</span>] <span class="pl-c1">floatValue</span>];
        <span class="pl-k">return</span> [PNLineChartDataItem <span class="pl-c1">dataItemWithY:</span>yValue];
    };

    <span class="pl-c">// Line Chart #2</span>
    <span class="pl-c1">NSArray</span> * data02Array = @[@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>), @(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">300</span>)];
    PNLineChartData *data02 = [PNLineChartData <span class="pl-c1">new</span>];
    data02.<span class="pl-smi">color</span> = PNTwitterColor;
    data02.<span class="pl-smi">itemCount</span> = data02Array.<span class="pl-smi">count</span>;
    data02.<span class="pl-smi">inflexionPointStyle</span> = PNLineChartPointStyleSquare;
    data02.<span class="pl-smi">getData</span> = ^(<span class="pl-k">NSUInteger</span> <span class="pl-c1">index</span>) {
        <span class="pl-c1">CGFloat</span> yValue = [data02Array[<span class="pl-c1">index</span>] <span class="pl-c1">floatValue</span>];
        <span class="pl-k">return</span> [PNLineChartDataItem <span class="pl-c1">dataItemWithY:</span>yValue];
    };

    [<span class="pl-v">self</span>.lineChart <span class="pl-c1">setXLabels:</span>@[<span class="pl-s"><span class="pl-pds">@"</span>DEC 1<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>DEC 2<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>DEC 3<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>DEC 4<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>DEC 5<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>DEC 6<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>DEC 7<span class="pl-pds">"</span></span>]];
    [<span class="pl-v">self</span>.lineChart <span class="pl-c1">updateChartData:</span>@[data01, data02]];

}
<span class="pl-k">else</span> <span class="pl-k">if</span> ([<span class="pl-v">self</span>.title <span class="pl-c1">isEqualToString:</span><span class="pl-s"><span class="pl-pds">@"</span>Bar Chart<span class="pl-pds">"</span></span>])
{
    [<span class="pl-v">self</span>.barChart <span class="pl-c1">setXLabels:</span>@[<span class="pl-s"><span class="pl-pds">@"</span>Jan 1<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>Jan 2<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>Jan 3<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>Jan 4<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>Jan 5<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>Jan 6<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">@"</span>Jan 7<span class="pl-pds">"</span></span>]];
    [<span class="pl-v">self</span>.barChart <span class="pl-c1">updateChartData:</span>@[@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">30</span>),@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">30</span>),@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">30</span>),@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">30</span>),@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">30</span>),@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">30</span>),@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">30</span>)]];
}
<span class="pl-k">else</span> <span class="pl-k">if</span> ([<span class="pl-v">self</span>.title <span class="pl-c1">isEqualToString:</span><span class="pl-s"><span class="pl-pds">@"</span>Circle Chart<span class="pl-pds">"</span></span>])
{
    [<span class="pl-v">self</span>.circleChart <span class="pl-c1">updateChartByCurrent:</span>@(<span class="pl-c1">arc4random</span>() % <span class="pl-c1">100</span>)];
}

if ([self.title isEqualToString:@"Line Chart"]) {

// Line Chart #1

NSArray * data01Array = @[@(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300)];

PNLineChartData *data01 = [PNLineChartData new];

data01.color = PNFreshGreen;

data01.itemCount = data01Array.count;

data01.inflexionPointStyle = PNLineChartPointStyleTriangle;

data01.getData = ^(NSUInteger index) {

CGFloat yValue = [data01Array[index] floatValue];

return [PNLineChartDataItem dataItemWithY:yValue];

};

// Line Chart #2

NSArray * data02Array = @[@(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300)];

PNLineChartData *data02 = [PNLineChartData new];

data02.color = PNTwitterColor;

data02.itemCount = data02Array.count;

data02.inflexionPointStyle = PNLineChartPointStyleSquare;

data02.getData = ^(NSUInteger index) {

CGFloat yValue = [data02Array[index] floatValue];

return [PNLineChartDataItem dataItemWithY:yValue];

};

[self.lineChart setXLabels:@[@"DEC 1",@"DEC 2",@"DEC 3",@"DEC 4",@"DEC 5",@"DEC 6",@"DEC 7"]];

[self.lineChart updateChartData:@[data01, data02]];

}

else if ([self.title isEqualToString:@"Bar Chart"])

{

[self.barChart setXLabels:@[@"Jan 1",@"Jan 2",@"Jan 3",@"Jan 4",@"Jan 5",@"Jan 6",@"Jan 7"]];

[self.barChart updateChartData:@[@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30)]];

}

{

[self.circleChart updateChartByCurrent:@(arc4random() % 100)];

}

Callback

#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>

<span class="pl-c">//For LineChart</span>

lineChart.delegate = self;

#import "PNChart.h"

//For LineChart

lineChart.delegate = self;

Animation

Animation được kích hoạt bằng theo định dạng chuẩn khi vẽ các biểu đồ và có thể được vô hiệu bằng cách thiết lập displayAnimation = NO

#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>

<span class="pl-c">//For LineChart</span>

lineChart.displayAnimation = <span class="pl-c1">NO</span>;

				1
2
3
4
5

						#<span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">"</span>PNChart.h<span class="pl-pds">"</span></span>
 
<span class="pl-c">//For LineChart</span>
 
lineChart.displayAnimation = <span class="pl-c1">NO</span>;

<span class="pl-c">//For DelegateMethod</span>


-(<span class="pl-k">void</span>)userClickedOnLineKeyPoint:(<span class="pl-c1">CGPoint</span>)point lineIndex:(<span class="pl-k">NSInteger</span>)lineIndex pointIndex:(<span class="pl-k">NSInteger</span>)pointIndex{
    <span class="pl-c1">NSLog</span>(<span class="pl-s"><span class="pl-pds">@"</span>Click Key on line <span class="pl-c1">%f</span>, <span class="pl-c1">%f</span> line index is <span class="pl-c1">%d</span> and point index is <span class="pl-c1">%d</span><span class="pl-pds">"</span></span>,point.<span class="pl-smi">x</span>, point.<span class="pl-smi">y</span>,(<span class="pl-k">int</span>)lineIndex, (<span class="pl-k">int</span>)pointIndex);
}

-(<span class="pl-k">void</span>)userClickedOnLinePoint:(<span class="pl-c1">CGPoint</span>)point lineIndex:(<span class="pl-k">NSInteger</span>)lineIndex{
    <span class="pl-c1">NSLog</span>(<span class="pl-s"><span class="pl-pds">@"</span>Click on line <span class="pl-c1">%f</span>, <span class="pl-c1">%f</span>, line index is <span class="pl-c1">%d</span><span class="pl-pds">"</span></span>,point.<span class="pl-smi">x</span>, point.<span class="pl-smi">y</span>, (<span class="pl-k">int</span>)lineIndex);
}

				
					
				1
2
3
4
5
6
7
8
9
10

						<span class="pl-c">//For DelegateMethod</span>
 
 
-(<span class="pl-k">void</span>)userClickedOnLineKeyPoint:(<span class="pl-c1">CGPoint</span>)point lineIndex:(<span class="pl-k">NSInteger</span>)lineIndex pointIndex:(<span class="pl-k">NSInteger</span>)pointIndex{
    <span class="pl-c1">NSLog</span>(<span class="pl-s"><span class="pl-pds">@"</span>Click Key on line <span class="pl-c1">%f</span>, <span class="pl-c1">%f</span> line index is <span class="pl-c1">%d</span> and point index is <span class="pl-c1">%d</span><span class="pl-pds">"</span></span>,point.<span class="pl-smi">x</span>, point.<span class="pl-smi">y</span>,(<span class="pl-k">int</span>)lineIndex, (<span class="pl-k">int</span>)pointIndex);
}
 
-(<span class="pl-k">void</span>)userClickedOnLinePoint:(<span class="pl-c1">CGPoint</span>)point lineIndex:(<span class="pl-k">NSInteger</span>)lineIndex{
    <span class="pl-c1">NSLog</span>(<span class="pl-s"><span class="pl-pds">@"</span>Click on line <span class="pl-c1">%f</span>, <span class="pl-c1">%f</span>, line index is <span class="pl-c1">%d</span><span class="pl-pds">"</span></span>,point.<span class="pl-smi">x</span>, point.<span class="pl-smi">y</span>, (<span class="pl-k">int</span>)lineIndex);
}

					

			

Chi tiết: https://github.com/kevinzhow/PNChart

5. iOS Product Tour:

Thư viện popup kiểm soát là một GarageBand (iOS), tương tự như hệ thống hỗ trợ người dùng, hiển thị cửa sổ bên cạnh các buttons của bạn, khu vực UIView (ext …) để giúp người sử dụng trong ứng dụng của bạn.

Tích hợp

productTourView = [[CRProductTour alloc] initWithFrame:self.view.frame] ;

//Setup your bubbles
CRBubble *bubbleButton1 = [[CRBubble alloc] initWithAttachedView:_button1 title:@"My Title" description:@"A smal description" arrowPosition:CRArrowPositionBottom andColor:[UIColor redColor]];

NSMutableArray *bubbleArray = [[NSMutableArray alloc] initWithObjects:bubbleButton1, nil];

[productTourView setBubbles:bubbleArray];

[self.view addSubview:productTourView];

productTourView = [[CRProductTour alloc] initWithFrame:self.view.frame] ;

//Setup your bubbles

CRBubble *bubbleButton1 = [[CRBubble alloc] initWithAttachedView:_button1 title:@"My Title" description:@"A smal description" arrowPosition:CRArrowPositionBottom andColor:[UIColor redColor]];

NSMutableArray *bubbleArray = [[NSMutableArray alloc] initWithObjects:bubbleButton1, nil];

[productTourView setBubbles:bubbleArray];

[self.view addSubview:productTourView];

Nếu bạn muốn 1 kết quả tương tự, đừng quên sử dụng font BebasNeue

Các tính năng

Dễ dàng tích hợp
Tùy chỉnh màu sắc, kích thước font
Các chiều mũi tên khác nhau
Các dòng đa và dòng đơn mô tả Multi-line or mono-line for description
Hai animations khác nhau để loại bỏ/ hiển thị cửa sổ (BOOL activeAnimation=YES; //YES dành cho toàn bộ animation, NO dành cho animation mờ)
Ví dụ tích hợp

Chi tiết: https://github.com/Cclleemm/ProductTour

ITZone via IDE

Chia sẻ bài viết ngay