去除TextView中多余的空间

在做项目时遇到一个问题，看如下代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="123"
    android:textSize="60sp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="456"
    android:textSize="60sp" />
</LinearLayout>
           

代码很简单，但是我这里想要的效果是123和456 能上下紧挨在一起，而不是间隔那么大的空隙，可以看到代码中没有设置任何的padding和margin，给这两个加一个背景颜色观察。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_green_light"
    android:text="123"
    android:textSize="60sp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="456"
    android:background="@android:color/holo_blue_light"
    android:textSize="60sp" />
</LinearLayout>
           

可以看到TextView中默认好像是有一个padding，textsize较小时，不是很明显，但是设置为较大时，就比较明显了，参考http://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A，可以看到字体底部有一个decent height，顶部有一个ascent height。

一个简单粗暴的解决方式就是设置layout_marginTop或者layout_marginBottom为负值，比如设置为-20dp

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="123"
    android:textSize="60sp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="456"
    android:layout_marginTop="-20dp"
    android:textSize="60sp" />
</LinearLayout>
           

可以看到这个上下间距少了很多，但是都要自己根据不同的字体大小设定对应的marginTop值，还有一种方式参考http://stackoverflow.com/questions/1747196/how-to-align-the-text-to-top-of-textview，继承TextView重写其中的ondraw()方法：

public class CustomeTextview extends TextView {
        public CustomeTextview(Context context, AttributeSet attrs) {
            super(context, attrs);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            int yOffset = getHeight() - getBaseline();
            canvas.translate(, yOffset);
            super.onDraw(canvas);
        }

    }
           

主要是利用ondraw()方法中的 canvas.translate(0, yOffset)方法，将原来的绘制的开始的原点x,y变为x+0，y+yOffset，相当于文字内容整体下下移了yOffset的距离，也就是baseline和descent之间的距离，效果如下

可以看到123下面的padding没有了，但是要注意这里只是针对数字，如果文本内容换为中文或者英文时，会出现一些问题：

会发现字母g和中文我们显示不全，这个是因为这些字符baseline下面是有内容的，而我们上面的做法相当于将baseline下面的内容移除掉，这种情况只能用第一种方法，设置marginTop或者marginButtom为负值。