今天需求是做一個播放器界面郎楼,如下圖
播放器界面
播放進度條呢,一般有兩種方式
- ProgressView
- UISlider
最開始需求是進度條不讓拖動窒悔,本著后期需求的一個更改性呜袁,最終選擇了使用UISlider來實現(xiàn)播放進度條。
好久沒用到過UISlider了简珠,需要注意的地方有設(shè)置UISlider的高度可不只是看到的那一丟丟高度阶界,就因為高度設(shè)置的不對,會走很多彎路聋庵。
UISlider的高度不小于你定義滑塊樣式的高度荐操,如下代碼
self.slider = [[UISlider alloc]init];
self.slider.minimumTrackTintColor = [UIColor whiteColor];
self.slider.maximumTrackTintColor = kColorRGBA(0xFFFFFF, 0.1);
[self.view addSubview:self.slider];
[self.slider makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(scaleFactorForWidth(10));
make.width.equalTo(kScreen_width - scaleFactorForWidth(78));
make.centerX.equalTo(self.contentImageView);
make.top.equalTo(self.typeLabel.mas_bottom).offset(scaleFactorForWidth(35));
}];
self.slider.layer.cornerRadius = 2;
self.slider.layer.masksToBounds = YES;
UIView * SliderImageView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 2, 10)];
SliderImageView.layer.cornerRadius = 1;
SliderImageView.layer.masksToBounds = YES;
SliderImageView.backgroundColor = [UIColor whiteColor];
[self.slider setThumbImage: [UIImage convertViewToImage:SliderImageView] forState:UIControlStateNormal];
[self.slider setThumbImage: [UIImage convertViewToImage:SliderImageView] forState:UIControlStateHighlighted];
UI設(shè)計稿中UISlider軌道高度是4個像素,然后誤以為整個UISlider高度就是4珍策,這個時候就會出現(xiàn)因為高度不夠?qū)е禄瑝K的樣式是個錯誤的托启。
其中minimumTrackTintColor
為左邊軌道的顏色可以理解為已播放部分的顏色,maximumTrackTintColor
為右邊軌道的顏色可以理解為未播放部分的顏色 攘宙。SliderImageView
是一個view屯耸,一個滑塊的view拐迁,convertViewToImage
是一個image的類拓展,將view轉(zhuǎn)化成image
+ (UIImage *)convertViewToImage:(UIView *)view {
UIImage *image = [[UIImage alloc]init];
//UIGraphicsBeginImageContextWithOptions(區(qū)域大小, 是否是非透明的, 屏幕密度);
UIGraphicsBeginImageContextWithOptions(view.frame.size, YES, [UIScreen mainScreen].scale);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
后面內(nèi)容想起來多少疗绣,或者使用過程中遇到什么問題了再進行補充线召!