iOS開發(fā) UISlider設(shè)置滑塊形狀以及 view轉(zhuǎn)化成image

今天需求是做一個播放器界面郎楼,如下圖


播放器界面

播放進度條呢,一般有兩種方式

  • 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)容想起來多少疗绣,或者使用過程中遇到什么問題了再進行補充线召!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市多矮,隨后出現(xiàn)的幾起案子缓淹,更是在濱河造成了極大的恐慌,老刑警劉巖塔逃,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件讯壶,死亡現(xiàn)場離奇詭異,居然都是意外死亡湾盗,警方通過查閱死者的電腦和手機伏蚊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來格粪,“玉大人躏吊,你說我怎么就攤上這事≌饰” “怎么了比伏?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長疆导。 經(jīng)常有香客問我凳怨,道長,這世上最難降的妖魔是什么是鬼? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮紫新,結(jié)果婚禮上均蜜,老公的妹妹穿的比我還像新娘。我一直安慰自己芒率,他們只是感情好囤耳,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著偶芍,像睡著了一般充择。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上匪蟀,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天椎麦,我揣著相機與錄音,去河邊找鬼材彪。 笑死观挎,一個胖子當著我的面吹牛琴儿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嘁捷,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼造成,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了雄嚣?” 一聲冷哼從身側(cè)響起晒屎,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缓升,沒想到半個月后鼓鲁,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡仔沿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年坐桩,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片封锉。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡绵跷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出成福,到底是詐尸還是另有隱情碾局,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布奴艾,位于F島的核電站净当,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蕴潦。R本人自食惡果不足惜像啼,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望潭苞。 院中可真熱鬧忽冻,春花似錦、人聲如沸此疹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蝗碎。三九已至湖笨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蹦骑,已是汗流浹背慈省。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留眠菇,地道東北人辫呻。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓清钥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親放闺。 傳聞我的和親對象是個殘疾皇子祟昭,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容