Android-自定义UI

  一、画一个五角星

效果图：（界面有点丑(以后会改的，但是我们注重的功能)）

             设置画布大小后

这是默认的状态。红色区域代表画布，在没有进行设置之前是整个屏幕的。

首先我们要自定义一个控件

Java代码

package com.example.myapplication;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by Administrator on 2017/7/8 0008.
 */

public class MyButton  extends View{ 

     //继承View类，所有控件的父类，然后重写里面4个方法
    private Bitmap bitmp;

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

    public MyButton(Context context, @Nullable AttributeSet attrs) {


        super(context, attrs);
        bitmp =Bitmap.createBitmap(300,300, Bitmap.Config.ARGB_8888);
    }

    public MyButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public MyButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawColor(Color.RED);

        //实例化路径
        Path path=new Path();
        path.moveTo(100,100);
        path.lineTo(300,100);
        path.lineTo(150,300);
        path.lineTo(200,50);
        path.lineTo(250,300);
        path.lineTo(100,100);
        //实例化一个画笔
        Paint paint=new Paint();
        paint.setColor(Color.YELLOW);
        //设置空心（默认为实心）
        paint.setStyle(Paint.Style.STROKE);
        //设置画笔的粗细
        paint.setStrokeWidth(10);

        //画路径
        canvas.drawPath(path,paint);

        //设置画笔的粗细
        paint.setStrokeWidth(3);
        paint.setColor(Color.GREEN);
        //设置字的大小
        paint.setTextSize(38);
        //画文字
        canvas.drawText("五角星",150,180,paint);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = this.getMeasuredSize(widthMeasureSpec,true);
        int height = this.getMeasuredSize(heightMeasureSpec,false);
        setMeasuredDimension(width,height);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.i("test","自定义的按钮的触摸事件----回调");
        return false;
    }

       //自己写一个方法
    private int getMeasuredSize(int widthMeasureSpec, boolean b) {
        //模式
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        //尺寸
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        //计算所得的实际尺寸，要被返回
        int retSize = 0;
        //得到两侧的留边
        int padding =(b?getPaddingLeft()+getPaddingRight():getPaddingTop()+getPaddingBottom());
        //对不同模式进行判断
        if(specMode == MeasureSpec.EXACTLY){//显示指定控件大小
            retSize = specSize;
            Log.i("abababa   ","if");
        }else{

            retSize = (b?bitmp.getWidth()+padding:bitmp.getHeight()+padding);
            Log.i("abababa   ","retSize  后 ：  "+retSize);
            if(specMode==MeasureSpec.UNSPECIFIED){
                retSize = Math.min(retSize,specSize);
            }
        }
        return retSize;
    }


}

然后在XML文件中使用即可

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.myapplication.MainActivity">
  <com.example.myapplication.MyButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
      android:id="@+id/main_mybutton"
      />


</LinearLayout>