SPPageMenu的github地址:https://github.com/SPStore/SPPageMenu
一、cocopods導(dǎo)入
platform:ios,'8.0'
target 'MyApp' do
pod 'SPPageMenu', '~> 3.5.0'
end
二、 效果演示圖
(演示圖中僅展示了部分功能,更多功能請(qǐng)進(jìn)入github下載源代碼,如果您的網(wǎng)絡(luò)較慢,gif圖可能會(huì)延遲加載,您可以先把寶貴的時(shí)間瀏覽其它信息)

Untitled.gif
三、 重難點(diǎn)方法和屬性詳解
// 這個(gè)方法用于傳遞數(shù)據(jù),items里面可以是NSString、UIImage 或SPPageMenuButtonItem類型,每個(gè)item會(huì)根據(jù)傳的元素類型自動(dòng)展示你要的內(nèi)容;selectedItemIndex是選中的item下標(biāo),selectedItemIndex不可超過(guò) items的范圍
- (void)setItems:(nullable NSArray *)items selectedItemIndex:(NSUInteger)selectedItemIndex;

A46F678B-C330-4971-993B-C2AA048C98A6.jpeg
// 這個(gè)屬性命名為“橋梁scrollView”,當(dāng)外界的scrollView在左右切換的時(shí)候,需要讓跟蹤器時(shí)刻跟隨該scrollView滾動(dòng),bridgeScrollView就是外界左右切換的scrollView。只要bridgeScrollView有值了,SPPageMenu會(huì)監(jiān)聽(tīng)bridgeScrollView的滾動(dòng)狀態(tài),從而讓跟蹤器有跟隨效果。如果你忘了設(shè)置這個(gè)屬性或者覺(jué)得不好,你還可以在scrollViewDidScroll的代理方法中,調(diào)用SPPageMenu的接口“- (void)moveTrackerFollowScrollView:(UIScrollView *)scrollView”。
@property (nonatomic, strong) UIScrollView *bridgeScrollView;

// 排列方式:支持3種排列方式;1、可滑動(dòng),按鈕寬度根據(jù)內(nèi)容自適應(yīng);2、不可滑動(dòng),按鈕等寬;3、不可滑動(dòng),按鈕寬度根據(jù)內(nèi)容自適應(yīng)。3種排列方式都有非常高的使用頻率。第1種排列方式:SPPageMene的容量會(huì)根據(jù)按鈕個(gè)數(shù)而定;第2種和第3種排列方式:SPPageMenu的容量固定為SPPageMenu的寬度
@property (nonatomic, assign) SPPageMenuPermutationWay permutationWay;
-
排列方式一:SPPageMenuPermutationWayScrollAdaptContent
5ADC4C3A2C55E428CB93E627108AD19B.jpg -
排列方式二:SPPageMenuPermutationWayNotScrollEqualWidths
795A7E94AB1D002B026A7EB346599CE5.jpg -
排列方式三:SPPageMenuPermutationWayNotScrollAdaptContent
C3EEA99CD066F43DD5CCAEBCBD0D8C76.jpg
// 跟蹤器跟蹤模式;這個(gè)屬性從3.4版本開(kāi)始閃亮登場(chǎng)。該屬性是個(gè)枚舉,共3個(gè):1、SPPageMenuTrackerFollowingModeAlways,這個(gè)枚舉值的意思是讓跟蹤器時(shí)刻跟隨外界scrollView(即bridgeScrollView)橫向移動(dòng); 2、SPPageMenuTrackerFollowingModeEnd,這個(gè)枚舉的意思是當(dāng)外界scrollView滑動(dòng)結(jié)束時(shí),跟蹤器才開(kāi)始移動(dòng);相當(dāng)于3.4版本之前的closeTrackerFollowingMode屬性 3、SPPageMenuTrackerFollowingModeHalf,這個(gè)枚舉的意思是當(dāng)外界scrollView拖動(dòng)距離超過(guò)屏幕一半時(shí),跟蹤器開(kāi)始移動(dòng)。
@property (nonatomic, assign) SPPageMenuTrackerFollowingMode trackerFollowingMode;
請(qǐng)大家仔細(xì)觀察跟蹤器(按鈕下面的下劃線)開(kāi)始移動(dòng)的時(shí)刻
-
跟蹤模式一:SPPageMenuTrackerFollowingModeAlways
always.gif -
跟蹤模式二:SPPageMenuTrackerFollowingModeEnd
end.gif -
跟蹤模式三:SPPageMenuTrackerFollowingModeHalf
half.gif
// 這個(gè)屬性是設(shè)置內(nèi)容的四周邊距,例如如果你想讓跟蹤器距離底部分割線有一段距離,你就可以設(shè)置contentInset的底部間距,這里指的內(nèi)容是不包括底部分割線的。
@property (nonatomic, assign) UIEdgeInsets contentInset;
下面截圖是設(shè)置pageMenu.contentInset = UIEdgeInsetsMake(0, 50, 0, 50)的結(jié)果,綠色為SPPageMenu的背景色,黃色部分是內(nèi)容

1391991C798B9E6DA6345401EE03A227.jpg
// // 設(shè)置指定item的四周內(nèi)邊距,這和上面那個(gè)屬性不一樣,上面的屬性contentInset作用對(duì)象是SPPageMenu整個(gè)控件,而這個(gè)方式作用對(duì)象是SPPageMenu里的一個(gè)按鈕
- (void)setContentEdgeInsets:(UIEdgeInsets)contentEdgeInsets forItemAtIndex:(NSUInteger)itemIndex;
// 這個(gè)方法在描述bridgeScrollView的時(shí)候有提到過(guò),在外界的scrollViewDidScroll代理方法中調(diào)用,可以讓跟蹤器時(shí)刻跟隨scrollView滑動(dòng),如果bridgeScrollView已經(jīng)賦過(guò)值,那這個(gè)方法就沒(méi)必要去調(diào)用了。
- (void)moveTrackerFollowScrollView:(UIScrollView *)scrollView;
以上介紹的屬性和方法只是部分的,其余屬性和方法相對(duì)簡(jiǎn)單,框架中也有非常詳細(xì)的注釋,這里就不再多做介紹
四、 適用場(chǎng)景
網(wǎng)易新聞

A7FD723F-E458-437A-AD3F-D990C8F49C26.jpeg
愛(ài)奇藝

09145AB7-9FA8-4442-8E66-28A5D02EB4A6.jpeg
微博

8D4F4543-97C8-43AB-A6ED-152ACC35429D.jpeg
淘寶

8663770C-5DB5-4100-B53D-870B3E007CE8.jpeg





