1. 程式人生 > >iOS 富文字風格NSMutableParagraphStyle、定製UITextView插入圖片和定製複製

iOS 富文字風格NSMutableParagraphStyle、定製UITextView插入圖片和定製複製

問題一
開發過程中,經常會遇到動態計算行高的問題, 

- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullableNSStringDrawingContext *)contextNS_AVAILABLE(10_11, 7_0);

是蘋果推薦的計算方法,顯然會遇到段落格式問題,例如行間距、縮排等格式設定需求,attributes傳進來的字典中,包含我們設定的字型及格式,其中NSParagraphStyleAttributeName是設定段落風格,NSFontAttributeName是設定字型。

ok,具體來看一下NSParagraphStyleAttributeName的功能。

[objc] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. //   NSParagraphStyleAttributeName 段落的風格(設定首行,行間距,對齊方式什麼的)看自己需要什麼屬性,寫什麼  
  2.     NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];    
  3.     paragraphStyle.lineSpacing = 10;// 字型的行間距  
  4.     paragraphStyle.firstLineHeadIndent = 20.0f;//首行縮排  
  5.     paragraphStyle.alignment = NSTextAlignmentJustified;//(兩端對齊的)文字對齊方式:(左,中,右,兩端對齊,自然)  
  6.     paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;//結尾部分的內容以……方式省略 ( "...wxyz" ,"abcd..." ,"ab...yz")  
  7.     paragraphStyle.headIndent = 20;//整體縮排(首行除外)  
  8.     paragraphStyle.tailIndent = 20;//  
  9.     paragraphStyle.minimumLineHeight = 10;//最低行高  
  10.     paragraphStyle.maximumLineHeight = 20;//最大行高  
  11.     paragraphStyle.paragraphSpacing = 15;//段與段之間的間距  
  12.     paragraphStyle.paragraphSpacingBefore = 22.0f;//段首行空白空間/* Distance between the bottom of the previous paragraph (or the end of its paragraphSpacing, if any) and the top of this paragraph. */  
  13.     paragraphStyle.baseWritingDirection = NSWritingDirectionLeftToRight;//從左到右的書寫方向(一共➡️三種)  
  14.     paragraphStyle.lineHeightMultiple = 15;/* Natural line height is multiplied by this factor (if positive) before being constrained by minimum and maximum line height. */
  15.     paragraphStyle.hyphenationFactor = 1;//連字屬性 在iOS,唯一支援的值分別為0和1  

好了,現在就可以很輕鬆的計算某一段落高度,例如: [objc] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. _descAtt = [[NSMutableAttributedString alloc] initWithString:_model.desc];  
  2.        UIFont *descFont = [UIFont PingFangSC_Regular_WithSize:12];  
  3.        NSMutableParagraphStyle *descStyle = [[NSMutableParagraphStyle alloc]init];  
  4.        [descStyle setLineSpacing:1];//行間距
  5.        CGSize descSize = [_model.desc boundingRectWithSize:CGSizeMake(w, MAXFLOAT)  
  6.                                                    options:NSStringDrawingUsesLineFragmentOrigin  
  7.                                                 attributes:@{NSFontAttributeName:descFont,  
  8.                                                              NSParagraphStyleAttributeName :descStyle}  
  9.                                                    context:nil].size;  

另外,再介紹幾個富文字處理的屬性: [objc] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. // NSFontAttributeName                設定字型屬性,預設值:字型:Helvetica(Neue) 字號:12
  2. // NSForegroundColorAttributeNam      設定字型顏色,取值為 UIColor物件,預設值為黑色
  3. // NSBackgroundColorAttributeName     設定字型所在區域背景顏色,取值為 UIColor物件,預設值為nil, 透明色
  4. // NSLigatureAttributeName            設定連體屬性,取值為NSNumber 物件(整數),0 表示沒有連體字元,1 表示使用預設的連體字元
  5. // NSKernAttributeName                設定字元間距,取值為 NSNumber 物件(整數),正值間距加寬,負值間距變窄
  6. // NSStrikethroughStyleAttributeName  設定刪除線,取值為 NSNumber 物件(整數)
  7. // NSStrikethroughColorAttributeName  設定刪除線顏色,取值為 UIColor 物件,預設值為黑色
  8. // NSUnderlineStyleAttributeName      設定下劃線,取值為 NSNumber 物件(整數),列舉常量 NSUnderlineStyle中的值,與刪除線類似
  9. // NSUnderlineColorAttributeName      設定下劃線顏色,取值為 UIColor 物件,預設值為黑色
  10. // NSStrokeWidthAttributeName         設定筆畫寬度,取值為 NSNumber 物件(整數),負值填充效果,正值中空效果
  11. // NSStrokeColorAttributeName         填充部分顏色,不是字型顏色,取值為 UIColor 物件
  12. // NSShadowAttributeName              設定陰影屬性,取值為 NSShadow 物件
  13. // NSTextEffectAttributeName          設定文字特殊效果,取值為 NSString 物件,目前只有圖版印刷效果可用:
  14. // NSBaselineOffsetAttributeName      設定基線偏移值,取值為 NSNumber (float),正值上偏,負值下偏
  15. // NSObliquenessAttributeName         設定字形傾斜度,取值為 NSNumber (float),正值右傾,負值左傾
  16. // NSExpansionAttributeName           設定文字橫向拉伸屬性,取值為 NSNumber (float),正值橫向拉伸文字,負值橫向壓縮文字
  17. // NSWritingDirectionAttributeName    設定文字書寫方向,從左向右書寫或者從右向左書寫
  18. // NSVerticalGlyphFormAttributeName   設定文字排版方向,取值為 NSNumber 物件(整數),0 表示橫排文字,1 表示豎排文字
  19. // NSLinkAttributeName                設定連結屬性,點選後呼叫瀏覽器開啟指定URL地址
  20. // NSAttachmentAttributeName          設定文字附件,取值為NSTextAttachment物件,常用於文字圖片混排
  21. // NSParagraphStyleAttributeName      設定文字段落排版格式,取值為 NSParagraphStyle 物件

——————————————————————————————————————————————————————————————————

問題二

一、設定textView的行間距
1.如果只是靜態顯示textView的內容為設定的行間距,執行如下程式碼:



//    textview 改變字型的行間距 
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; 
    paragraphStyle.lineSpacing = 10;// 字型的行間距 
     
    NSDictionary *attributes = @{ 
                                 NSFontAttributeName:[UIFont systemFontOfSize:15], 
                                 NSParagraphStyleAttributeName:paragraphStyle 
                                 }; 
    textView.attributedText = [[NSAttributedString alloc] initWithString:@"輸入你的內容" attributes:attributes];

 

2.如果是想在輸入內容的時候就按照設定的行間距進行動態改變,那就需要將上面程式碼放到textView的delegate方法裡

-(void)textViewDidChange:(UITextView *)textView

{

    //    textview 改變字型的行間距

    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];

    paragraphStyle.lineSpacing = 20;// 字型的行間距

    

    NSDictionary *attributes = @{

                                 NSFontAttributeName:[UIFont systemFontOfSize:15],

                                 NSParagraphStyleAttributeName:paragraphStyle

                                 };

    textView.attributedText = [[NSAttributedString alloc] initWithString:textView.text attributes:attributes];

 

}

 

一、設定textView的placeholder
    UITextView上如何加上類似於UITextField的placeholder呢,其實在UITextView上加上一個UILabel或者UITextView,如果用UILable的話,會出現一個問題就是當placeholder的文字過長導致換行的時候就會出現問題,而用UITextView則可以有效避免此問題。

- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text

{    if (![text isEqualToString:@""])

        {

            _placeholderLabel.hidden = YES;

        }

     if ([text isEqualToString:@""] && range.location == 0 && range.length == 1)

        {

            _placeholderLabel.hidden = NO;

        }

    return YES;

}

 

說明如下:

  (1) _placeholderLabel 是加在UITextView後面的UITextView,_placeholderLabel要保證和真正的輸入框的設定一樣,字型設定成淺灰色,然後[_placeholderLabel setEditable:NO];真正的輸入框要設定背景色透明,保證能看到底部的_placeholderLabel。

    (2) [text isEqualToString:@""] 表示輸入的是退格鍵

    (3) range.location == 0 && range.length == 1 表示輸入的是第一個字元

————————————————————————————————————————————————————————————————————

問題三

直接看程式碼  

_textView  是定義的成員變數

  1. _textView = [[UITextView alloc]init];  
  2.    _textView.font = [UIFont systemFontOfSize:13];  
  3.    _textView.backgroundColor = [UIColor lightGrayColor];  
  4.    _textView.text = [NSString stringWithFormat:@"settttttttttt :%@",self.countStr];  
  5.    _textView.frame = CGRectMake(20100200130);  
  6.    _textView.delegate = self;  
  7.    [self.view addSubview:_textView];  

通過代理方法  得到選中文字的起始位置和長度  通過定義成員變數的方式儲存起來  程式碼如下
  1. - (void)textViewDidChangeSelection:(UITextView *)textView {  
  2.     /** 
  3.      * 可以通過得到複製的長度進行判斷是否有進行復制操作  再通過位置、長度進行字型變化 
  4.      */
  5.     _loc = (int

    相關推薦

    iOS 文字風格NSMutableParagraphStyle定製UITextView插入圖片定製複製

    問題一開發過程中,經常會遇到動態計算行高的問題,  - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSD

    ios UITextView 插入圖片文字自適應高度

    1,首先自定義一個textView繼承UITextview 2.重寫textview 的contentsize方法 - (void)setContentSize:(CGSize)contentSize { CGSize oriSize = self.contentS

    超好用的文字編輯器froalaEditor(方便傳圖片視訊等)

           最近專案有個文章管理功能,我對比了很多富文字編輯器,有的是上傳圖片不方便,有的是複製貼上不方便,有的是但編輯器裡面不能改變圖片大小,最後,我找到了froalaEditor,可以說是集各種功能為一身,不但介面清爽,功能也十分全面,插入圖片和視訊都很方便,自己可以到

    iOS 文字圖文混排

    #import "testView.h" #import <CoreText/CoreText.h> @implementation testView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWit

    ios 文字的高度

    + (CGFloat)getStrHeightWithAttributeStr:(NSAttributedString *)string viewWidth:(CGFloat)viewWidth{ if (string.

    iOS文字(NSAttributedString)---盡力弄全了

    專案上要載入html格式的文字,學習一下富文字相關內容。 1.載入HTML標籤文字 因為解析的資料裡面有html標籤,就使用下面的程式碼把字串轉換成data,初始化時再用HTML型別,轉換為富文字。 NSMutableAttributedString * at

    iOS文字手動重新整理非同步替換網路圖片

    CSDN註冊好幾年一直沒用過於是乎今天心血來潮寫一篇技術交流貼,以供有需要的道友。 移動端iOS開發中,少不了遇到NSAttributedString(富文字字典集合)富文字形式進行圖文混排。如果想替換富文字內部某個位置的圖片,有一種方式是找到range,然後重新生成此

    1使用文字編輯器實現檔案的上傳下載

    1、環境配置                                                                                             需要用到的檔案包:          ckeditor_3.6.2   

    iOS文字編輯(在label裡顯示文字圖片)

    在開始寫之前先看一下效果圖 在此效果圖中有富文字中指定的位置新增圖片,還有最後位置新增的圖片資訊 程式碼如下 呼叫方法------- 給label賦值 NSString * Str = @"中國人民解放軍萬歲,中華人民共和國萬歲,萬歲!"; sel

    蘋果開發 筆記(89)第三方 iOS 文字元件

    今天看到個不錯的開源庫,據說是一名人人網的ios 作者維護的庫,看了一下相當厲害。第三方庫對處理富文字相當給力了。 尷尬的是,自己還沒能看懂這些底層實用的原理。 只能先記錄一下

    iOS 文字label字型大小顏色

    實現:最初實現的時候想到了用兩個Label,來實現,第一個顯示¥4000,設定一個字型,第二個顯示/月,設定另一個字型.這樣就能實現這個效果了,但是最後想一想還是用富文字比較好,順便可以學習一下. //先建立一個label: -(UILabel *)pri

    iOS 文字如何新增圖片

    //聯絡人:石虎 QQ:1224614774 暱稱:嗡嘛呢叭咪哄                        QQ群:807236138  群稱:iOS 技術交流學習群 一、概念     1.新增圖片效果圖     2.富文字新增圖片程式碼     3.富文字總結

    iOS文字設定樣式,插入圖片,設定指定文字的點選事件

    富文字:NSMutableAttributedString 它與普通文字之間最大的區別是可以設定不同欄位範圍的字型,顏色, 大小,樣式等. 字型大小 NSMutableAttributedString *attributed = [[NSMutableAttribut

    iOS 文字 文字分別設定 文字屬性 Attributes 文字樣式 程式開發 效果圖

    iOS 富文字 文字分別設定 文字屬性 Attributes 文字樣式 想要做自己的效果,那就把下邊的字典組合,字典組合要是不會,我幫不了你了 // 建一個小文字用來測試 UILab

    iOS- 文字

    在iOS開發中經常會遇到一些圖文混排的情況,特別是在微博類應用的開發過程中經常會遇到各種表情,各種連結的解析。筆者在實踐開發中經歷了幾次這種型別的開發,由最開始的利用WebView進行佈局到最後利用富文字進行佈局,對該部分的開發積累了一定的經驗,現對富文字與正則表示式混用

    Android實現載入文字以及SpannableStringSpannableStringBuilder實現部分文字可以點選,更換顏色

      最近專案中要實現部分文字變顏色,並且是可點選的。網上找了一下,實現的方式是android端載入富文字,如果你會js的話,那就方便了,表示本人不怎麼會,而且專案框架和介面已經確定了,不可能再改,所以只能試一試其他的方式。 SpannableString、Sp

    iOS文字符判斷 正則NSRegularExpression 謂詞NSPredicate NSRange

    直接 matching ring mat arch 查找 alua str ogr 廢話不說,直接上代碼 #pragma mark - 中文字符判斷 - (BOOL)validateContainsChinese:(NSString *)content { NS

    sed基本用法 sed文字塊處理 sed高階應用 總結答疑

    Top NSD SHELL DAY05 案例1:sed基本用法 案例2:使用sed修改系統配置 案例3:sed多行文字處理 案例4:sed綜合指令碼應用 1 案例1:sed基本用法 1.1 問題 本案例要求熟悉sed命令的p、d、s等常見操作,並

    ueditor文字編輯器跨域上傳圖片解決辦法

    在使用百度富文字編輯器的過程中,如果是有一臺單獨的圖片伺服器就需要將上傳的圖片內容放到圖片伺服器,也就是比如在a.com的編輯器上傳圖片,圖片要儲存到img.com的跨域上傳圖片功能,而在ueditor官方文件中說不支援單圖上傳的跨域, 網上查了一下各種花裡胡哨,一頓操作猛如虎,比如加document.dom

    在Vue專案使用quill-editor帶樣式編輯器(更改插入圖片視訊) 運用vue-quilt-editor編寫文字編輯器 自定義圖片路徑 獲取後臺返回路徑

    一、首先在main.js  引入 vue-quilt-editorimport VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.s