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>
这样就会达到上面的效果图了