目錄 我是程式碼
- 字型放大
- 顏色RGBA
- 滑塊
- 內容型別
- 實現效果方法
- Layout, 旋轉
- CRUD
- cocoaPods
- 使用
- 問答
個人測試有限, 如果有什麼問題請評論或issue我 GitHub
1. 字型放大
一開始選擇的是UIButton, 改變UIFont, 效果如上, 如以上下抖動的方式增減, UILable也同樣, 找不到其他方式. 最後用的是縮放, 問題是連UIButton整個控制元件都會縮放, 理想中效果想要只縮放裡面的UILable.
出現的問題 : 不影響視覺效果, 影響可能多的自定義
UIButton 自定義的時候背景色只能設定它的容器->UIScroll
滾動的時候要取原來的x座標,width等
2. 顏色RGBA
一開始仿的是網易新聞的APP, 黑>紅, 想半天沒明白, 後來對照了RGB,
黑 (R:0 G:0 B:0)
紅 (R:0 G:255 B:0) 好了, 問題解決了. 之後就擴充套件了RGBA, 不過本人色弱, 不同值之間轉換時顏色效果我是忽略了
|
1 2 3 4 5 6 7 8 9 10 |
自定義: YFTagItemConfigration block = ^UIButton *(UIButton *itemBtn, NSUInteger index){ if (index == 0) { // 選中狀態 注意全是 UIControlStateNormal [itemBtn setTitleColor:[UIColor colorWithRed:0.4 green:0.0 blue:1.0 alpha:0.3] forState:UIControlStateNormal]; }else { // 預設狀態 [itemBtn setTitleColor:[UIColor colorWithRed:1.0 green:0.0 blue:1.0 alpha:1.0] forState:UIControlStateNormal]; } itemBtn.titleLabel.font = [UIFont systemFontOfSize:15]; // 大小按縮放比例 return itemBtn; }; |
3. 滑塊
扇貝APP, 有變寬度的效果. 還好開始時就想到給滑塊加個容器, 好處就很明顯了, 移動的時候控制容器, 滑塊的寬度重寫容器的setter就可以, 寬度可以自定義, 也可以根據標籤串長度+自定義數值
|
1 2 3 4 5 6 7 |
typedef NS_ENUM(NSUInteger, YFSliderType) { YFSliderTypeNone, // 沒有 YFSliderTypeTop, // 上面, 放在標籤ScrollView YFSliderTypeMid, // 中間 YFSliderTypeBottom, // 下面 YFSliderTypeBottomAlone // 下面獨立, 寬度和標籤ScrollView一樣的UIScrollView }; |
4. 內容型別
可以的UIViewController 或 UIView , 且兩者巢狀
切換時需要立即重新整理, 我用的是 繼承或Category
如果需要重用UIViewController, 請看 Demo
|
1 2 3 4 5 6 7 8 9 10 |
// 獲取當前螢幕顯示的viewcontroller - (UIViewController *)viewController:(UIView *)view { UIResponder *responder = view; while ((responder = [responder nextResponder])) if ([responder isKindOfClass: [UIViewController class]]) return (UIViewController *)responder; // If the view controller isn't found, return nil. return nil; } |
巢狀時效果
滾動內層時直接調的是外層的UIScroll(鬥魚APP) :內層.ctScroll.scrollEnabled = NO;
預設調的是內層自己的, 只要是兩個都寫delegate = self;
5. 實現效果方法
- 區分左右滑, 上一個, 下一個 UIButton
- 移動點: 滾動內容裡轉化百分比到標籤的UIScrollView.contentOffset ,
總距離: 兩個UIButton.x 的間距
每個點變化: RGBA, 滑塊寬度, / 總距離 得到的比例 * 縮放
6. Layout, 旋轉
適配Xib: - (void)layoutSubviews 獲得的frame正確
如果Xib控制元件之前有一個程式碼寫的控制元件 - (void)awakeFromNib 中獲取的frame有效, 如果全是Xib, 獲取的frame就有問題, 哪怕你呼叫
|
1 2 |
[self setNeedsLayout]; [self layoutIfNeeded]; |
獲取的frame也會出錯, 最後只能重寫程式碼
得到的經驗
初始化只配置資料,- (void)layoutSubviews配置frame
7. CRUD
黃易的效果, 包括改變完之後直接對比之前的資料
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// 呼叫之前, 主控制器先改變對應資料的CRUD, 以下方法會呼叫代理, 免得越界 /** * 增加在最後一個 * @param title 標籤字串 * @param item 內容, UIView 或 UIViewController */ - (void)addTagTitle:(NSString *)title contentItem:(id)item; // 增加在index, 會移動到新插入的位置 - (void)addTagTitle:(NSString *)title contentItem:(id)item atIndex:(NSInteger)index; // 刪除 - (void)removeContentAtIndex:(NSInteger)index; // 多刪(不想列舉判斷了(浪費),傳字串,負數自己負責,如果可以直接報錯的限制方法,請issue我) - (void)removeContentAtIndexs:(NSArray<NSNumber *> *)indexs; // 交換元素 - (void)exchangeAtIndex:(NSInteger)index1 withIndex:(NSInteger)index2; // 切換好之後的陣列對比, 注意原來資料的指標 - (void)updateTagArr:(NSMutableArray *)tagArr contentArr:(NSMutableArray *)contentArr; |
Gif 軟體有點坑, 看不清請看demo
8. cocoaPods
作為初級程式猿, 秉承能學習就嘗試的原則安裝了下
提供兩個學習連結:
簡書Trunk
Master
更新本地pod庫 :
pod repo update
快速依賴但是不更新本地 :pod install --verbose --no-repo-update
9. 使用
GitHub程式碼
或 pod 'YFLinkageScroll', '~> 1.0.0'
Usage :
#import "YFLinkageScrollView.h"
Xib載入 或程式碼 alloc.init 後
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * 初始化配置 * 縮放1.2 * slider按tagArr的title字元寬度 */ - (void)configWithScrolltagArray:(NSArray *)tagArr visibleCount:(float)visibleCount sliderType:(YFSliderType)type contentScrollItem:(NSArray *)contentArr; /** * 自定義初始化配置, 註釋太多, 這裡就不多加了 */ - (void)configWithScrolltagArray:(NSArray *)tagArr tagScrollEdgeInset:(UIEdgeInsets)tagEdge tagScale:(CGFloat)tagScale configTagItemBlock:(YFTagItemConfigration)block visibleCount:(float)visibleCount sliderType:(YFSliderType)type customSlider:(UIView *)customSlider contentScrollItem:(NSArray *)contentArr; |
事件
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@property (nonatomic, weak) id<YFLinkageScrollViewDelegate> delegate; @protocol YFLinkageScrollViewDelegate <NSObject> @optional /** 當前index */ - (void)yfScrollViewChangeCurrentIndex:(NSInteger)currentIndex item:(id)item; /** 左出界, 超出的值,正數 */ - (void)yfScrollViewOutOfLeft:(CGFloat)value; /** 右出界, 超出的值,正數 */ - (void)yfScrollViewOutOfRight:(CGFloat)value; |
|
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 |
/** 顯示會剛好顯示全(scrollRectToVisible:), 預設不設定標籤居中 */ @property (nonatomic, assign) BOOL isMoveToVisible; /** slider寬度, 預設取title字元寬度, 這個值為基本上增加 1.0+sliderWidthScale */ @property (nonatomic, assign) CGFloat sliderWidthScale; /** 全域性tagItem點選和setCurrentIndex:,動畫時間 default:0.5 */ @property (nonatomic, assign) CGFloat animDuration; /** YFSliderTypeBottomAlone 時 containScroll 的背景色, 預設clearColor */ @property (nonatomic, strong) UIColor *sliderColor; /** 橫屏時的顯示個數 */ @property (nonatomic, assign) CGFloat rotateVisibleCount; /** * 直接跳轉頁面 * * @param currentIndex 跳轉的頁面 * @param animated ctScroll的動畫 * @param tagAnimated TagScroll的動畫 */ - (void)setCurrentIndex:(NSInteger)currentIndex animated:(BOOL)animated TagAnimated:(BOOL)tagAnimated; |
10. 問答
如果簡書上傳之後能編輯更新, 知道答案後更新
問 : 求diao大的解答下
- ARC 下重寫 weak 的 setter, 有沒有問題 ?
|
1 2 3 4 |
_delegate = delegate; if ([self.delegate respondsToSelector:@selector(yfScrollViewChangeCurrentIndex:item:)]) { [self.delegate yfScrollViewChangeCurrentIndex:0 item:_ctItemArr[0]]; } |
- NSTimer
- (void)invalidate;之後, 之前加的記憶體沒有減下去, 請看demo裡的 Example 事件跳轉頁面
POP 回來記憶體什麼時候釋放, 請看 demo裡的 Jump 事件跳轉頁面
還是我自己寫的方法有問題, 但是用 Leaks 都檢測過了. - 求個視訊轉GIF的好軟體
- 不縮放UIButton， 不抖動，實現字型大小的方法
答 :
- licecap: 直接錄製成GIF, 清晰度高
ClieGIF: 視訊轉GIF, 效果要設定, 視訊不能太大
PicGIF: 視訊轉GIF, 收費的沒試, Lite清晰度一般