之前寫了篇關于呼吸燈動畫的,有幾個朋友問我應用場景,剛好最近有用到,借此來實際應用下,先看看效果圖;
Paste_Image.png
看了上面圖片相信能想到一些實際的應用場景了吧
這里我已經將此控件簡單封裝了下,
你可以這么用
// 創(chuàng)建 并設置標題,顯示位置
self.markView = [XXMarkTwinkleView markViewWithTitle:@"韓式波波頭" showInRight: YES];
// 寬度不用傳,內部自適應了,如果對字體沒有太大要求,高度其實也可以在內部固定
self.markView.frame = CGRectMake(230, 320, 0, 30);
// 設置文字顏色
self.markView.textColor = [UIColor redColor];
[self.view addSubview:self.markView];
也可以這么用
// 快讀創(chuàng)建一個呼吸燈view
XXTwinkleView *twinkleView = [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2];
// 根據呼吸燈view創(chuàng)建 標簽
XXMarkTwinkleView *markView1 = [[XXMarkTwinkleView alloc]initWithTwinkleView:self.twinkleView showInRight:NO];
// 設置標題
markView1.title = @"波波頭";
// 寬度自適應不需要傳寬度
markView1.frame = CGRectMake(120, 360, 0, 30);
[self.view addSubview:markView1];
并沒有啥難點就做了個自適應寬度,只需要設置呼吸燈控件的位置,內部會根據標簽顯示在左邊還是右邊,后臺返回呼吸燈控件的位置,我們根據呼吸燈的位置來創(chuàng)建標簽,所以外面設置frame中的x,y應該是呼吸燈控件的中心點,所以這里需要注意的是,如何在內部修改控件的位置,具體方法如下
- (void)layoutSubviews {
[super layoutSubviews];
// 下移一半
CGRect tmpBounds = self.bounds;
tmpBounds.origin.y -= self.cf_height * 0.5;
self.bounds = tmpBounds;
// 根據標簽顯示的位置,布局子控件
if (self.isShowInRight) {
self.twinkleView.frame = CGRectMake(-kTwinkleWidth * 0.5, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth);
self.tagLable.frame = CGRectMake(self.twinkleView.cf_maxX + kContentMargin, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height);
// 設置寬度
self.cf_width = self.tagLable.cf_maxX;
}else {
self.tagLable.frame = CGRectMake(0, -self.cf_height * 0.5 , self.tagLable.cf_width + kLabelAdditionalWidth, self.cf_height);
self.twinkleView.frame = CGRectMake(self.tagLable.cf_maxX + kContentMargin, -kTwinkleWidth * 0.5 , kTwinkleWidth, kTwinkleWidth);
// 計算寬度
CGFloat width = self.twinkleView.cf_minX + kTwinkleWidth * 0.5;
// 修改x值
self.cf_x = self.cf_x - width;
// 設置寬度
self.cf_width = width ;
}
// 設置圓角半徑
self.tagLable.layer.cornerRadius = self.cf_height * 0.5;
}
最新優(yōu)化 使用更簡單,效果如下
app.gif
// 兩個的x y 相同因為標簽類型不同,顯示的方式不同,圖片錄制的效果不好,源碼很清晰,
self.twinkleView = [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2];
[self.twinkleView setTitle:@"波波頭" titleType:kTitleRight];
self.twinkleView.frame = CGRectMake(120, 360, 0, 30);
[self.view addSubview:self.twinkleView];
XXTwinkleView *tmp = [[XXTwinkleView alloc]initWithColor:[UIColor redColor] edgeColor:[UIColor whiteColor] circleWidth:8 edgeWidth:2];
[tmp setTitle:@"梨花燙" titleType:kTitleLeft];
tmp.frame = CGRectMake(120, 360, 0, 30);
[self.view addSubview:tmp];
具體效果請看Demo鏈接
如有不對的地方歡迎指出
