iOS開發 | 自定義不規則label

来源:https://www.cnblogs.com/xuzb/archive/2018/04/02/8690154.html
-Advertisement-
Play Games

其中有一個不太規則的label: image.png image.png 這個label頂部的兩個角是圓角,底部的兩個角是直角,底部還有一個小三角。 思路 CAShapeLayer聯合UIBezierPath畫一個不規則的layer作為label.layer的mask。 具體實現 1.自定義一個繼承 ...


其中有一個不太規則的label:

 

  image.png

 

這個label頂部的兩個角是圓角,底部的兩個角是直角,底部還有一個小三角。

思路

CAShapeLayer聯合UIBezierPath畫一個不規則的layer作為label.layer的mask。

具體實現

1.自定義一個繼承自UILabel的IrregularLabel

import "IrregularLabel.h"

@interface IrregularLabel ()

/** 遮罩 */

@property (nonatomic, strong) CAShapeLayer *maskLayer;

/** 路徑 */

@property (nonatomic, strong) UIBezierPath *borderPath;

@end

2.在初始化方法中進行相應初始化和設置

  • (instancetype)initWithFrame:(CGRect)frame {

    if (self = [super initWithFrame:frame]) {

    }

    return self;

}

3.在layoutSubviews方法中進行路徑的設置

  • (void)layoutSubviews {

    [super layoutSubviews];

    // 遮罩層frame

    self.maskLayer.frame = self.bounds;

    // 設置path起點

    [self.borderPath moveToPoint:CGPointMake(0, 10)];

    // 左上角的圓角

    [self.borderPath addQuadCurveToPoint:CGPointMake(10, 0) controlPoint:CGPointMake(0, 0)];

    // 直線,到右上角

    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width - 10, 0)];

    // 右上角的圓角

    [self.borderPath addQuadCurveToPoint:CGPointMake(self.bounds.size.width, 10) controlPoint:CGPointMake(self.bounds.size.width, 0)];

    // 直線,到右下角

    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)];

    // 底部的小三角形

    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2+5, self.bounds.size.height)];

    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2, self.bounds.size.height-5)];

    [self.borderPath addLineToPoint:CGPointMake(self.bounds.size.width/2 - 5, self.bounds.size.height)];

    // 直線,到左下角

    [self.borderPath addLineToPoint:CGPointMake(0, self.bounds.size.height)];

    // 直線,回到起點

    [self.borderPath addLineToPoint:CGPointMake(0, 10)];

    // 將這個path賦值給maskLayer的path

    self.maskLayer.path = self.borderPath.CGPath;

}

左上角的坐標是(0,0)

右下角的坐標是(maxX,maxY)

圓角是用的二次貝塞爾曲線,關於二次貝塞爾曲線,我在網上看到一張比較形象的圖:

  image

最終效果

  • (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    self.label = [[IrregularLabel alloc] initWithFrame:CGRectMake(90, 200, 200, 40)];

    [self.view addSubview:self.label];

    self.label.text = @"這是一個不規則label";

    self.label.textAlignment = NSTextAlignmentCenter;

    self.label.backgroundColor = [UIColor redColor];

    self.label.textColor = [UIColor whiteColor];

    self.label.font = [UIFont boldSystemFontOfSize:16];

}

效果圖:

  image

demo

https://github.com/CaiWanFeng/IrregularLabel


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 官網: https://redis.io/topics/sentinel Redis的主從只能實現數據熱備份的功能,主宕機後從無法自動接管服務,因此Redis推出了Sentinel的主從監控模式。 Sentinel實質上是類似於MHA的一個監控主從並自動切換的monitor,實現的功能類似Mongo ...
  • 今天遇到一個關於MySQL求助的問題,修改表結構時遇到“ERROR 1050 (42S01): table xxx already exits" mysql> ALTER TABLE DAY_BOOK_REPORT ADD UNIT_PRICE_PCS DOUBLE(12,2) DEFAULT NU... ...
  • 1、去官網下載MySQL,https://dev.mysql.com/downloads/mysql/5.6.html#downloads 選擇redhat6 64bit 下載rpm bundle 2、將文件拷貝到centos,解壓 tar -xvf MySQL-5.6.39-1.el6.x86_6 ...
  • 從Google首席執行官埃里克·施密特(Eric Schmidt)首次提出“ 雲計算 ”(cloud computing)的概念到現在,雲計算已經走過了炒作期和實踐期,已經處於成熟期。同時,行業集中度也越來越高並呈逐漸加強的趨勢,目前業內大公司已經占據了整個市場的半壁江山。 Synergy Rese ...
  • 蘋果在關於後臺模式的文檔中稱:“這個配置項應該儘可能少的使用,而且最好只給那些提供通知服務的應用使用。如果有在後臺運行的替代方法,就應該使用替代方法。比如,如果應用能使用顯著位置變化介面來接受位置變動事件的話,就不要將應用註冊為需要在後臺監控位置變化的應用。 這個配置項可選的值有:audio,loc ...
  • 經過進兩周的持續發酵,Facebook5000萬用戶數據泄露事件,已讓其處在輿論的風尖浪口。對於手機APP泄漏用戶個人隱私問題,再次受到人們的關註。對於這個問題,你會怎麼看? 隱私,即不願公開的個人信息,前幾日,百度CEO李彥巨集在某論壇上說了一段引發爭議的話:“假如他們願意用隱私交換便捷性或者效率的 ...
  • 要瞭解TextView對文本的繪製,那麼就需要瞭解Paint.FontMetircs。 官方對該類的解釋是:Class that describes the various metrics for a font at a given text size., 意思是說,這玩意兒是繪製文本內容時存儲該文 ...
  • RxJava2已經推出有一年半的時間,由於之前RxJava已經在現有項目中廣泛使用,而RxJava2在除了很多命名外並沒有太多革新,所以相信有很多人跟我一樣都還沒有升級. 隨著老版本漸漸的失去維護,更重要的是有一定時間允許我來做這個遷移,其實棄老從新一直都是程式員的喜好. ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...