前言

~

項(xiàng)目截圖

最近同事在項(xiàng)目中遇到，TextView文字兩端對(duì)齊的問(wèn)題，就如同上圖的效果5個(gè)字和4個(gè)字的文字首尾對(duì)齊。當(dāng)然上圖的實(shí)現(xiàn)方式是承載的H5頁(yè)面，并不是原生的TextView。可是這個(gè)問(wèn)題一直困擾著我，想試試用原生的TextView能不能做出這個(gè)效果，于是就有了今天這篇文章。

1.初步實(shí)現(xiàn)效果

~

原生TextView實(shí)現(xiàn)對(duì)齊效果

效果還不錯(cuò)吧，使用起來(lái)也是非常的簡(jiǎn)單：

tv1.setText(AlignedTextUtils.formatText("手　機(jī)　號(hào)"));
tv2.setText(AlignedTextUtils.formatText("密　　　碼"));
tv3.setText("再次確認(rèn)密碼");
tv4.setText(AlignedTextUtils.formatText("個(gè)性簽名"));
tv5.setText(AlignedTextUtils.formatText("編不下去了"));

特別說(shuō)明：文字中的“空格”一定要是全角模式下的空格，因?yàn)槿悄Ｊ较聺h子，數(shù)字，符號(hào)等所占比例是一致的。

2.關(guān)鍵工具類

~ 目前這個(gè)工具類支持2-6個(gè)數(shù)字的對(duì)齊（如果你有其他需求可以參照這個(gè)思路自行編寫(xiě)）

/** 
  * 不同文字?jǐn)?shù)目2端對(duì)齊工具類 (支持2-6個(gè)數(shù)字) 
  * 
  * @author yuhao 
  * @time 2016年6月28日 */
public class AlignedTextUtils {   

 private static int n = 0;// 原Str擁有的字符個(gè)數(shù)     
 private static SpannableString spannableString;
 private static double multiple = 0;// 放大倍數(shù)    

/**     
  * 對(duì)顯示的字符串進(jìn)行格式化 比如輸入：出生年月 輸出結(jié)果：出正生正年正月     
  */    
public static String formatStr(String str) {       
      if (TextUtils.isEmpty(str)) {            
             return "";        
      }        
      n = str.length();        
      if (n >= 6) {            
            return str;        
      }       
      StringBuilder sb = new StringBuilder(str);       
      for (int i = n - 1; i > 0; i--) {            
            sb.insert(i, "正");        
       }        
       return sb.toString();    
      }    

     /**     
       * 對(duì)顯示字符串進(jìn)行格式化 比如輸入：安正卓正機(jī)正器正人 輸出結(jié)果：安 卓 機(jī) 器 人    
       *     
       * @param str     
       * @return     */    
 public static SpannableString formatText(String str){        
    if (TextUtils.isEmpty(str)) {            
    return null;        
    }        
    str = formatStr(str);        
    if (str.length()<=6){            
    return null;        
    }        
    spannableString = new SpannableString(str);           
    switch (n) {            
    case 2:                
         multiple = 4;                
      break;            
    case 3:                
         multiple = 1.5;                
       break;            
    case 4:                
        multiple =   0.66666666666666666666666666666666667;                   
      break;            
    case 5:                
        multiple = 0.25;                
      break;            
    default:                
       break;        
    }        
    for (int i = 1; i < str.length(); i = i + 2) 
   {            
    spannableString.setSpan(new RelativeSizeSpan((float) multiple), i, i + 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);            
    spannableString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), i, i + 1,  Spanned.SPAN_INCLUSIVE_EXCLUSIVE);        
   }       
   return spannableString;    
}
}

3.實(shí)現(xiàn)思路詳解

~ TextView自帶有行間距可是并沒(méi)有字間距，所以我想到了利用SpannableString的RelativeSizeSpan和ForegroundColorSpan以及StringBuilder來(lái)模擬字間距的效果，相信看了下面這張圖，你就基本明白實(shí)現(xiàn)的原理了

原理圖

步驟一:轉(zhuǎn)換字符串

~
利用formatStr(String str)方法來(lái)格式化字符串，每隔一個(gè)字符插入一個(gè)字符，上面的工具類我寫(xiě)的是“正”字，是為了顯示的更清楚。而這個(gè)“正”字的作用就是為了稱當(dāng)字間距的作用。

代碼：

tv1.setText(AlignedTextUtils.formatStr("安卓初學(xué)者"));

效果：

轉(zhuǎn)換字符串后的效果

步驟二：修改“字間距”大小

~
經(jīng)過(guò)上一步之后我們需要做的就是縮放“正”字，那么到底應(yīng)該縮放多少呢？

抽象派的圖片

如上圖，雖說(shuō)丑了點(diǎn)，但是可以明顯看出5個(gè)字的字符串是由6個(gè)字的字符串多出來(lái)的那個(gè)字符平分成4份，所以每一個(gè)字符的縮放比為1/4倍.
以此類推可以得出一個(gè)公式縮放倍數(shù)：

(6-n)/(n-1)

代碼：

spannableString.setSpan(new RelativeSizeSpan((float) multiple), i, i + 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);     

效果：

縮放比例后的效果

步驟三：修改“字間距”顏色

~
隱藏字間距，將顏色設(shè)置和背景一致即可。

代碼：

spannableString.setSpan(new ForegroundColorSpan(Color.TRANSPARENT), i, i + 1,        Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

效果：

最終效果

4.后記

• 這個(gè)工具類，僅僅是提供一個(gè)思路，也可能存在很多問(wèn)題，如果問(wèn)題歡迎聯(lián)系我，大家一起完善。
• 目前的問(wèn)題：2_{3個(gè)字的時(shí)候，由于縮放倍數(shù)大于1，造成了文本框變大問(wèn)題。解決方法是：用全角字符的“空格”將2}3個(gè)字的字符轉(zhuǎn)換成5個(gè)字的字符
• 如果不是很了解SpannableString可以參考碼農(nóng)小阿飛的《用SpannableString打造絢麗多彩的文本顯示效果》