Android尺子布局和自定义TextView

Android尺子布局和自定义TextView

下面是具体实现：

新建项目：在UI中

<LinearLayout 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"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#ff0000"
        android:text="0cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#ff9900"
        android:text="1cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#cccc00"
        android:text="2cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#00ff00"
        android:text="3cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#00cccc"
        android:text="4cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />
    
    <TextView
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#00ccff"
        android:text="5cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />
    
    <TextView
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#ff9900"
        android:text="6cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

</LinearLayout>

下面是 效果图

如果我们想要把这个尺子加上刻度，就要自定义TextView

2新建一个CM.java

package com.example.myruler;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.TextView;

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

	public CM(Context context) {
		super(context);
		init();
	}

	private void init(){
		setGravity(Gravity.BOTTOM);
		
	}
	@Override
	public void draw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.draw(canvas);
		float mmWidth=((float)getWidth())/10;
		Paint  paint=new Paint();
		paint.setColor(Color.WHITE);
		float top=2;
		for(int i=0;i<10;i++){
			if(i%2==0){
				canvas.drawRect(i*mmWidth, top,i*mmWidth+mmWidth,
						top+mmWidth, paint);
			}
		}
	}
}

  新建一个画笔，然后颜色是白色， drawRect方法有五个参数，下面是前四个的参数，最后一个参数是画笔 

 

     left：矩形的左边位置。

top：矩形的上边位置。

right：矩形的右边位置。

bottom：矩形的下边位置。

    canvas.drawRect(i*mmWidth, top,i*mmWidth+mmWidth,top+mmWidth, paint);

3.引用自定义的TextView

<LinearLayout 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"
    tools:context=".MainActivity" >

    <com.example.myruler.CM
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#ff0000"
        android:text="0cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <com.example.myruler.CM
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#ff9900"
        android:text="1cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <com.example.myruler.CM
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#cccc00"
        android:text="2cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <com.example.myruler.CM
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#00ff00"
        android:text="3cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

    <com.example.myruler.CM
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#00cccc"
        android:text="4cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />
    
    <com.example.myruler.CM
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#00ccff"
        android:text="5cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />
    
    <com.example.myruler.CM
        android:id="@+id/tv1"
        android:layout_width="10mm"
        android:layout_height="10mm"
        android:layout_gravity="center_vertical"
        android:background="#ff9900"
        android:text="6cm"
        android:textColor="#ffffffff"
        android:textSize="10pt" />

</LinearLayout>

这样就会达到上面的效果图了