Android自定义view的实战_android 自定义view实战

1 Android 自定义view

     在平时开发过程会我们的设计师会给我们想出很多美好的设计，然而我们Android的视图API中并没有提供相关控件，此时我们就需要用到自定义view了。

     在上一篇中我们一起了解了下自定义view的过程，这章我们自己来实现一些自己定义的视图。

    如下图我们需要一个如图的控件，很多朋友会说我用布局加背景色就能做出来，大家稍安勿躁，我们主要是学习自定义view的过程。和解决问题的思路。 

  

   

2 需求分析

     .当我们拿到这个需求的时候，首先想到我们平时的API是没有类似的view的（假设）。

         . 这时候我们就需要自己定义view来满足，需求。

         . 分析一下这一个个的矩形拼接而来。

         .  而我们Android提供有基本的图形类，其中就包含有矩形类。

         .第一个矩形的左边坐标就是0，右边的坐标就是父布局的宽度占用的百分比

         .  第二个矩形坐标的坐标是第一个坐标的右边，宽度也是父布局的宽度占用的百分比以此类推，大家有没有熟                 悉， 没错就是有点类似于递归

3 代码实现

     自定义的view

      

package com.example.chenzhu.myprojectblog;

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

import java.util.ArrayList;

/**
 * Created by cz on 2017/2/27.
 */

public class MyView extends View {

    public   ArrayList<Part> partList = new ArrayList<>();

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

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

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
   //Android中提供了最基础的图形 这里我们有用到矩形
    Rect  rect = new Rect();
    Paint paint = new Paint();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLACK);
        paint.setColor(Color.YELLOW);
        rect.left=0;//离左边多远
        rect.top=0;//离上边多远
        rect.bottom=getMeasuredHeight();//多高
        rect.right=0;//多宽
    //  rect.right=getMeasuredWidth();
        for (int a = 0 ;a<partList.size();a++){
            rect.left =rect.right;
            rect.right=(int)(rect.left+partList.get(a).percent*getMeasuredWidth());
            paint.setColor(partList.get(a).color);
            canvas.drawRect(rect,paint);
        }

    }
   //一个view刚开始被实例化的时候会被回调的函数
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        partList.add(new Part(Color.LTGRAY,0.10f));
        partList.add(new Part(Color.YELLOW,0.15f));
        partList.add(new Part(Color.RED,0.23f));
        partList.add(new Part(Color.BLUE,0.35f));
        Log.d("CZTAG",""+partList.size());
    }
  //数据类型的javabean
    class  Part{
        Part(int color ,float percent){
            this.color =color;
            this.percent =percent;
        }
        int color;
        float percent;

    }
}

 布局view

<?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:id="@+id/activity_my_view"
    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.example.chenzhu.myprojectblog.MyViewActivity">
    <com.example.chenzhu.myprojectblog.MyView
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="50dp" />

</RelativeLayout>

  主activity

package com.example.chenzhu.myprojectblog;

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

public class MyViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_view);
    }
}

4 总结

      通过这两章的自定义，我们了解了一个自定义控件的绘制流程和原理，我们也通过自己的Demo来实现了这些功能，我们需要提高的是分析问题和解决问题的能力，功能实现只是最后的结果。希望这篇文章能给大家带来一些帮助，有不足的地方也希望大神们能够提出指正。

                                                                                                                     做一只颠覆世界的蚂蚁