自定义View(圆形标题内容)

先看下实际的效果

view 模块的代码

package com.zzu.xingchen.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by xingchen on 2016/3/21.
 */
public class timeSchedule extends View{

       private Integer xunlie;
    //序列号


    public void setXunlie(Integer xunlie) {
        this.xunlie = xunlie;
    }

    private String shijian="00-00-00"; //批改时间

    public void setShijian(String shijian) {
        this.shijian = shijian;
    }

    private String shuoming="未知";  //模块说明

    public void setShuoming(String shuoming) {
        this.shuoming = shuoming;
    }

    private int back_ground; //颜色背景

    public void setBack_ground(int back_ground) {
        this.back_ground = back_ground;
    }

    private    Paint paint;  //画笔


    public timeSchedule(Context context) {
        super(context);
    }

    public timeSchedule(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    public timeSchedule(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);


            int i=0;


//
//        int  xunlieId=attrs.getAttributeResourceValue(R.styleable.timeSchedule_NumberX, 0);
//        xunlie=context.getResources().getInteger(xunlieId);
//       int  shijianId=attrs.getAttributeResourceValue(R.styleable.timeSchedule_TimeL,0);
//        shijian=context.getResources().getText(shijianId).toString();
//
//       int  shuomingID=attrs.getAttributeResourceValue(R.styleable.timeSchedule_StateL,0);
//            shuoming=context.getResources().getText(shuomingID).toString();
//       int  back_groundid=attrs.getAttributeResourceValue(R.styleable.timeSchedule_BackgroundL ,Color.DKGRAY);
//            back_ground=context.getResources().getColor(back_groundid);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
            paint=new Paint();
        paint.setColor(Color.argb(188,178,169,182));

        canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.2), paint);

        paint.setColor(back_ground);


        canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.4), paint);
        paint.setTextSize(getWidth()/10);
        paint.setColor(Color.BLACK);
        canvas.drawText(String.valueOf(xunlie),getWidth()/2-getWidth()/20,getHeight()/4,paint);
        canvas.drawText(shuoming, getWidth() / 2-getWidth()/5, getHeight() / 2, paint);
        canvas.drawText(shijian,getWidth()/2-getWidth()/4,getHeight()-getHeight()/5,paint);

    }
}

可以看出，首先在画板上绘制两个圆，然后在绘制三条文字，  因为考虑到view的大小是可以改变的，所有绘制的形状的大小不能是固定的，“    

  canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.2), paint);

”

这句的意思是绘制一个圆，圆心的位置在在画布的长宽的二分之一出，半径是二分之一宽，；  因为绘制的图形都是根据画布来定，所有可以随意的设定大小。

xml 文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.zzu.xingchen.myapplication.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.zzu.xingchen.myapplication.timeSchedule
           android:id="@+id/circle1"
            android:layout_width="40dp"
            android:layout_height="40dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp" />

        <com.zzu.xingchen.myapplication.timeSchedule
            android:id="@+id/circle2"
            android:layout_width="100dp"
            android:layout_height="100dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <com.zzu.xingchen.myapplication.timeSchedule
            android:id="@+id/circle3"
            android:layout_width="140dp"
            android:layout_height="140dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <com.zzu.xingchen.myapplication.timeSchedule
            android:id="@+id/circle4"
            android:layout_width="100dp"
            android:layout_height="100dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp" />
        <com.zzu.xingchen.myapplication.timeSchedule
            android:id="@+id/circle5"
            android:layout_width="40dp"
            android:layout_height="40dp" />



    </LinearLayout>


</RelativeLayout>

圆圈的一个VIEW;

 <com.zzu.xingchen.myapplication.timeSchedule
            android:id="@+id/circle4"
            android:layout_width="100dp"
            android:layout_height="100dp" />

可以看出view的大小是可以更改的，但内容的所在位置并没有更改

mainActivity 文件

package com.zzu.xingchen.myapplication;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    timeSchedule timeSchedule1,timeSchedule2,timeSchedule3,timeSchedule4,timeSchedule5;

    int colorA= Color.argb(188,114,232,81);
    int colorB=Color.argb(188,228,240,242);
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        timeSchedule1= (timeSchedule) findViewById(R.id.circle1);
        timeSchedule2= (timeSchedule) findViewById(R.id.circle2);
        timeSchedule3= (timeSchedule) findViewById(R.id.circle3);
        timeSchedule4= (timeSchedule) findViewById(R.id.circle4);
        timeSchedule5= (timeSchedule) findViewById(R.id.circle5);


        timeSchedule1.setXunlie(1);
        timeSchedule1.setShijian("2016-2-21");
        timeSchedule1.setShuoming("第一阶段");
        timeSchedule1.setBack_ground(colorA);

        timeSchedule2.setXunlie(2);
        timeSchedule2.setShijian("2016-3-21");
        timeSchedule2.setShuoming("第二阶段");
        timeSchedule2.setBack_ground(colorB);

        timeSchedule3.setXunlie(3);
        timeSchedule3.setShijian("2016-4-21");
        timeSchedule3.setShuoming("第三阶段");
        timeSchedule3.setBack_ground(colorA);

        timeSchedule4.setXunlie(4);
        timeSchedule4.setShijian("2016-5-21");
        timeSchedule4.setShuoming("第四阶段");
        timeSchedule4.setBack_ground(colorB);

        timeSchedule5.setXunlie(5);
        timeSchedule5.setShijian("2016-6-21");
        timeSchedule5.setShuoming("第五阶段");
        timeSchedule5.setBack_ground(colorA);
    }
}

对view进行绑定，然后对内容进行初始化；  view的背景颜色也是可以随意设定的，我在代码中设置了两种颜色 A和B 背景。