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来实现了这些功能,我们需要提高的是分析问题和解决问题的能力,功能实现只是最后的结果。希望这篇文章能给大家带来一些帮助,有不足的地方也希望大神们能够提出指正。


                                                                                                                     做一只颠覆世界的蚂蚁

     





  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值