5 libs “vi diệu” nhất dành cho các lập trình viên iOS (phần 1)
- Tram Ho
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:
1 2 3 | $ 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:
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
1 | pod install |
- CarbonSwipeRefresh
Code mẫu
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
1 2 3 4 5 6 7 | - (<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]; } } |
- CarbonTabSwipeNavigation
Code mẫu
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> () <CarbonTabSwipeNavigationDelegate> <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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">-></span> UIViewController { <span class="pl-c">// return viewController at index</span> } } |
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
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>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>]; |
1 2 3 4 5 6 7 | #<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>]; |
1 2 3 4 5 6 7 8 | #<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>]; |
1 2 3 4 5 6 7 8 9 10 11 12 13 | # <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>]; |
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>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; |
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)
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 32 33 34 35 36 37 | <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>)]; } |
Callback
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.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
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>; |
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
1 2 3 4 5 6 7 8 9 10 | 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
Nguồn bài viết : IDE Vietnam