Android UI 之居中绘制文本内容的正确方法——实现自定义一个TextView

最新推荐文章于 2021-05-30 11:36:45 发布

sfshine

最新推荐文章于 2021-05-30 11:36:45 发布

阅读量1.2k

点赞数

分类专栏： Android

Android 专栏收录该内容

471 篇文章 0 订阅

订阅专栏

原文地址 http://blog.csdn.net/carrey1989/article/details/10399727

我们在自定义一个控件的时候，有时候会需要自己来绘制一些文本内容，这样就自然而然遇到确定文本的方位的问题，比如文本需要水平居中，垂直居中，居左，居右，左上。。。等等很多情况。其中最常见的就是文本位于控件的正中央了。

既然是文本居中，那就要让文本水平居中，并且同时垂直居中，我们分开来做。

水平居中的思路很简单，一种是得到控件的宽度A，使得文本的中心位置x坐标=A/2就可以了。还有一种思路是我们得到控件的宽度A，然后测量出要绘制的文本的宽度B，然后使得文本的左端x坐标=(A-B)/2。

相对复杂一点的实现文本垂直居中，我们需要用到FontMetrics，这里涉及到几个概念，分别是文本的top，bottom，ascent，descent，baseline。看下面的图：

我们在画布中绘制文本的时候，会调用Canvas.drawText(String text, float x, float y, Paint paint)这个方法，其中y的坐标就是上图中baseline的y坐标，所以，如果我们只是简单地把drawText方法中的y设置为控件高度的1/2是不准确的，如果这样做的话会发现文本整体是位于画布的上半部分的，因为baseline下面的文本部分是很小的。

正确的做法是通过一些合理的换算使得文本的y坐标（baseline的y坐标）位于控件的下半部分区域。下面是我自己通过计算和测试得到的准确换算关系：

[java]view plaincopy 
   
 float textCenterVerticalBaselineY = viewHeight / 2 - fm.descent + (fm.bottom - fm.top) / 2;  

textCenterVerticalBaselineY就是绘制文本时候的y坐标，viewHeight是控件的高度。其实这个换算关系也不难理解，viewHeight/2-fm.descent的意思是将整个文字区域抬高到控件的1/2，然后我们再加上(fm.bottom - fm.top) / 2的意思就是将文本下沉文本top到bottom长度的一半，从而实现文本垂直居中的目的。

有的人或许会问，为什么最后加上的是bottom到top距离的一半而不是descent到ascent的一半呢？其实这个是我测试的结果，我发现如果用bottom到top距离的一半来设置文本垂直居中，和系统控件TextView的文本居中效果是一样的，我们来看下面的效果：

首先是我们使用(fm.bottom - fm.top) / 2:

然后是使用(fm.descent - fm.ascent) / 2:

左边绿色的是系统的TextView文字居中效果，右边是我们自定义控件的文字居中效果，可以看出使用(fm.bottom - fm.top) / 2与TextView的效果是一样的，当然，我们不必一定要与TextView的效果相同，所以使用(fm.descent - fm.ascent) / 2也是可以的。

然后我们扩展一下，自定义一个可以控制内部文本绘制方位的TextView。

先来看一下效果图：

项目代码：

MyTextView.java

[java]view plaincopy 
   
 package com.example.textalignment.mytextview;  
   
 import com.example.textalignment.util.DisplayParams;  
 import com.example.textalignment.util.DisplayUtil;  
   
 import android.content.Context;  
 import android.graphics.Bitmap;  
 import android.graphics.Canvas;  
 import android.graphics.Color;  
 import android.graphics.Matrix;  
 import android.graphics.Paint;  
 import android.graphics.RectF;  
 import android.graphics.Paint.Align;  
 import android.graphics.Paint.FontMetrics;  
 import android.graphics.drawable.Drawable;  
 import android.util.AttributeSet;  
 import android.util.DisplayMetrics;  
 import android.view.View;  
 /** 
  * 自定义文本显示控件 
  * 该自定义控件中的文本可以在9个方位进行控制 
  * 左上——中上——右上 
  * 左中——中中——右中 
  * 左下——中下——右下 
  * @author carrey 
  * 
  */  
 public class MyTextView extends View {  
       
     /** 要显示的文字 */  
     private String text;  
     /** 文字的颜色 */  
     private int textColor;  
     /** 文字的大小 */  
     private int textSize;  
     /** 文字的方位 */  
     private int textAlign;  
       
 //  public static final int TEXT_ALIGN_CENTER            = 0x00000000;  
     public static final int TEXT_ALIGN_LEFT              = 0x00000001;  
     public static final int TEXT_ALIGN_RIGHT             = 0x00000010;  
     public static final int TEXT_ALIGN_CENTER_VERTICAL   = 0x00000100;  
     public static final int TEXT_ALIGN_CENTER_HORIZONTAL = 0x00001000;  
     public static final int TEXT_ALIGN_TOP               = 0x00010000;  
     public static final int TEXT_ALIGN_BOTTOM            = 0x00100000;  
       
     /** 文本中轴线X坐标 */  
     private float textCenterX;  
     /** 文本baseline线Y坐标 */  
     private float textBaselineY;  
       
     /** 控件的宽度 */  
     private int viewWidth;  
     /** 控件的高度 */  
     private int viewHeight;  
     /** 控件画笔 */  
     private Paint paint;  
       
     private FontMetrics fm;  
     /** 场景 */  
     private Context context;  
       
     public MyTextView(Context context) {  
         super(context);  
         this.context = context;  
         init();  
     }  
   
     public MyTextView(Context context, AttributeSet attrs) {  
         super(context, attrs);  
         this.context = context;  
         init();  
     }  
   
     /** 
      * 变量初始化 
      */  
     private void init() {  
         paint = new Paint();  
         paint.setAntiAlias(true);  
         paint.setTextAlign(Align.CENTER);  
         //默认情况下文字居中显示  
         textAlign = TEXT_ALIGN_CENTER_HORIZONTAL | TEXT_ALIGN_CENTER_VERTICAL;  
         //默认的文本颜色是黑色  
         this.textColor = Color.BLACK;  
     }  
       
     @Override  
     protected void onLayout(boolean changed, int left, int top, int right,  
             int bottom) {  
         viewWidth = getWidth();  
         viewHeight = getHeight();  
         super.onLayout(changed, left, top, right, bottom);  
     }  
       
     @Override  
     protected void onDraw(Canvas canvas) {  
         //绘制控件内容  
         setTextLocation();  
         canvas.drawText(text, textCenterX, textBaselineY, paint);  
         super.onDraw(canvas);  
     }  
       
     /** 
      * 定位文本绘制的位置 
      */  
     private void setTextLocation() {  
         paint.setTextSize(textSize);  
         paint.setColor(textColor);  
         fm = paint.getFontMetrics();  
         //文本的宽度  
         float textWidth = paint.measureText(text);  
         float textCenterVerticalBaselineY = viewHeight / 2 - fm.descent + (fm.descent - fm.ascent) / 2;  
         switch (textAlign) {  
         case TEXT_ALIGN_CENTER_HORIZONTAL | TEXT_ALIGN_CENTER_VERTICAL:  
             textCenterX = (float)viewWidth / 2;  
             textBaselineY = textCenterVerticalBaselineY;  
             break;  
         case TEXT_ALIGN_LEFT | TEXT_ALIGN_CENTER_VERTICAL:  
             textCenterX = textWidth / 2;  
             textBaselineY = textCenterVerticalBaselineY;  
             break;  
         case TEXT_ALIGN_RIGHT | TEXT_ALIGN_CENTER_VERTICAL:  
             textCenterX = viewWidth - textWidth / 2;  
             textBaselineY = textCenterVerticalBaselineY;  
             break;  
         case TEXT_ALIGN_BOTTOM | TEXT_ALIGN_CENTER_HORIZONTAL:  
             textCenterX = viewWidth / 2;  
             textBaselineY = viewHeight - fm.bottom;   
             break;  
         case TEXT_ALIGN_TOP | TEXT_ALIGN_CENTER_HORIZONTAL:  
             textCenterX = viewWidth / 2;  
             textBaselineY = -fm.ascent;  
             break;  
         case TEXT_ALIGN_TOP | TEXT_ALIGN_LEFT:  
             textCenterX = textWidth / 2;  
             textBaselineY = -fm.ascent;  
             break;  
         case TEXT_ALIGN_BOTTOM | TEXT_ALIGN_LEFT:  
             textCenterX = textWidth / 2;  
             textBaselineY = viewHeight - fm.bottom;   
             break;  
         case TEXT_ALIGN_TOP | TEXT_ALIGN_RIGHT:  
             textCenterX = viewWidth - textWidth / 2;  
             textBaselineY = -fm.ascent;  
             break;  
         case TEXT_ALIGN_BOTTOM | TEXT_ALIGN_RIGHT:  
             textCenterX = viewWidth - textWidth / 2;  
             textBaselineY = viewHeight - fm.bottom;   
             break;  
         }  
     }  
       
     /** 
      * 设置文本内容 
      * @param text 
      */  
     public void setText(String text) {  
         this.text = text;  
         invalidate();  
     }  
     /** 
      * 设置文本大小 
      * @param textSizeSp 文本大小，单位是sp 
      */  
     public void setTextSize(int textSizeSp) {  
         DisplayParams displayParams = DisplayParams.getInstance(context);  
         this.textSize = DisplayUtil.sp2px(textSizeSp, displayParams.fontScale);  
         invalidate();  
     }  
     /** 
      * 设置文本的方位 
      */  
     public void setTextAlign(int textAlign) {  
         this.textAlign = textAlign;  
         invalidate();  
     }  
     /** 
      * 设置文本的颜色 
      * @param textColor 
      */  
     public void setTextColor(int textColor) {  
         this.textColor = textColor;  
         invalidate();  
     }  
 }  

MainActivity.java

[java]view plaincopy 
   
 package com.example.textalignment;  
   
 import com.example.textalignment.mytextview.MyTextView;  
 import com.example.textalignment.util.DisplayParams;  
 import com.example.textalignment.util.DisplayUtil;  
   
 import android.os.Bundle;  
 import android.app.Activity;  
 import android.graphics.Bitmap;  
 import android.graphics.BitmapFactory;  
 import android.graphics.Color;  
 import android.view.Menu;  
 import android.widget.LinearLayout;  
 import android.widget.ScrollView;  
   
 public class MainActivity extends Activity {  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
           
         DisplayParams displayParams = DisplayParams.getInstance(this);  
           
         LinearLayout container = (LinearLayout) findViewById(R.id.container);  
           
         MyTextView myTextView1 = new MyTextView(this);  
         myTextView1.setText("居中的文本");  
         myTextView1.setTextSize(30);  
         myTextView1.setTextAlign(MyTextView.TEXT_ALIGN_CENTER_HORIZONTAL | MyTextView.TEXT_ALIGN_CENTER_VERTICAL);  
         myTextView1.setTextColor(Color.BLUE);  
         myTextView1.setBackgroundColor(Color.RED);  
         container.addView(myTextView1, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView2 = new MyTextView(this);  
         myTextView2.setText("居左的文本");  
         myTextView2.setTextSize(25);  
         myTextView2.setTextAlign(MyTextView.TEXT_ALIGN_CENTER_VERTICAL | MyTextView.TEXT_ALIGN_LEFT);  
         myTextView2.setTextColor(Color.GREEN);  
         myTextView2.setBackgroundColor(Color.YELLOW);  
         container.addView(myTextView2, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView3 = new MyTextView(this);  
         myTextView3.setText("右下的文本");  
         myTextView3.setTextSize(15);  
         myTextView3.setTextAlign(MyTextView.TEXT_ALIGN_BOTTOM | MyTextView.TEXT_ALIGN_RIGHT);  
         myTextView3.setTextColor(Color.RED);  
         myTextView3.setBackgroundColor(Color.BLUE);  
         container.addView(myTextView3, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView4 = new MyTextView(this);  
         myTextView4.setText("左下的文本");  
         myTextView4.setTextSize(15);  
         myTextView4.setTextAlign(MyTextView.TEXT_ALIGN_BOTTOM | MyTextView.TEXT_ALIGN_LEFT);  
         myTextView4.setTextColor(Color.YELLOW);  
         myTextView4.setBackgroundColor(Color.GREEN);  
         container.addView(myTextView4, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView5 = new MyTextView(this);  
         myTextView5.setText("中下的文本");  
         myTextView5.setTextSize(35);  
         myTextView5.setTextAlign(MyTextView.TEXT_ALIGN_BOTTOM | MyTextView.TEXT_ALIGN_CENTER_HORIZONTAL);  
         myTextView5.setTextColor(Color.GRAY);  
         myTextView5.setBackgroundColor(Color.RED);  
         container.addView(myTextView5, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView6 = new MyTextView(this);  
         myTextView6.setText("居右的文本");  
         myTextView6.setTextSize(25);  
         myTextView6.setTextAlign(MyTextView.TEXT_ALIGN_RIGHT | MyTextView.TEXT_ALIGN_CENTER_VERTICAL);  
         myTextView6.setTextColor(Color.BLUE);  
         myTextView6.setBackgroundColor(Color.YELLOW);  
         container.addView(myTextView6, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView7 = new MyTextView(this);  
         myTextView7.setText("左上的文本");  
         myTextView7.setTextSize(25);  
         myTextView7.setTextAlign(MyTextView.TEXT_ALIGN_TOP | MyTextView.TEXT_ALIGN_LEFT);  
         myTextView7.setTextColor(Color.GREEN);  
         myTextView7.setBackgroundColor(Color.CYAN);  
         container.addView(myTextView7, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView8 = new MyTextView(this);  
         myTextView8.setText("中上的文本");  
         myTextView8.setTextSize(25);  
         myTextView8.setTextAlign(MyTextView.TEXT_ALIGN_TOP | MyTextView.TEXT_ALIGN_CENTER_HORIZONTAL);  
         myTextView8.setTextColor(Color.RED);  
         myTextView8.setBackgroundColor(Color.GREEN);  
         container.addView(myTextView8, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
         MyTextView myTextView9 = new MyTextView(this);  
         myTextView9.setText("右上的文本");  
         myTextView9.setTextSize(25);  
         myTextView9.setTextAlign(MyTextView.TEXT_ALIGN_TOP | MyTextView.TEXT_ALIGN_RIGHT);  
         myTextView9.setTextColor(Color.YELLOW);  
         myTextView9.setBackgroundColor(Color.BLUE);  
         container.addView(myTextView9, LinearLayout.LayoutParams.MATCH_PARENT, DisplayUtil.dip2px(150, displayParams.scale));  
           
     }  
 }  

activity_main.xml

[html]view plaincopy 
   
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
     xmlns:tools="http://schemas.android.com/tools"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:paddingBottom="@dimen/activity_vertical_margin"  
     android:paddingLeft="@dimen/activity_horizontal_margin"  
     android:paddingRight="@dimen/activity_horizontal_margin"  
     android:paddingTop="@dimen/activity_vertical_margin"  
     tools:context=".MainActivity" >  
   
     <LinearLayout   
         android:id="@+id/container"  
         android:layout_width="match_parent"  
         android:layout_height="wrap_content"  
         android:orientation="vertical"/>  
   
 </ScrollView>  

另外，还用到了两个工具类，代码可以参考这篇文章http://blog.csdn.net/carrey1989/article/details/10360613

在进行垂直偏上和垂直偏下的设置时，关键是设置baseline的y坐标分别等于-fm.ascent和viewHeight - fm.bottom，意思就是可以让文字刚好不超过控件的边缘。

整体思路就是这样，如需转载，请注明转载地址http://blog.csdn.net/carrey1989/article/details/10399727

sfshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android UI 之居中绘制文本内容的正确方法——实现自定义一个TextView

原文地址http://blog.csdn.net/carrey1989/article/details/10399727 我们在自定义一个控件的时候，有时候会需要自己来绘制一些文本内容，这样就自然而然遇到确定文本的方位的问题，比如文本需要水平居中，垂直居中，居左，居右，左上。。。等等很多情况。其中最常见的就是文本位于控件的正中央了。既然是文本居中，那
复制链接

扫一扫

专栏目录