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>

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