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>