Android重写View实现全新的控件_Android

通常情况下,Android实现自定义控件无非三种方式。

  Ⅰ、继承现有控件,对其控件的功能进行拓展。

  Ⅱ、将现有控件进行组合,实现功能更加强大控件。

  Ⅲ、重写View实现全新的控件

  本文来讨论最难的一种自定义控件形式,重写View来实现全新的控件。

  首先,我们要明白在什么样的情况下,需要重写View来实现一种全新的控件,一般当我们遇到了原生控件无法满足我们现有的需求的时候,我们此时就可以考虑创建一个全新的View来实现我们所需要的功能。创建一个全新View实现自定义控件,无非分成这么几步:

  Ⅰ、在OnMeasure()方法中,测量自定义控件的大小,使自定义控件能够自适应布局各种各样的需求。

  Ⅱ、在OnDraw()方法中,利用哼哈二将(Canvas与Paint)来绘制要显示的内容。

  Ⅲ、在OnLayout()方法中来确定控件显示位置。

  Ⅳ、在OnTouchEvent()方法处理控件的触摸事件。

  相应的思维导图如下:

  多说无益,我们通过几个小案例,来讲解到底如何实现自定义控件。

一、一个带有比例进度的环形控件

   首先看一下这个控件的示意图: 

  通过这个简单的示意图,我们对于项目所完成的比例,就一目了然了。通过这个简单的示意图,我们可以很快速的把这个图形分成三个部分。Ⅰ、外层的环,Ⅱ、里面的园,三、相应文字。有了这个思路以后,我们只需要在onDraw()方法中一个个进行绘制罢了。我这里为了简单起见,把这个控件的宽度设置为屏幕的宽度。

  首先,还是老样子,为自定义控件设置一些自定义属性,便于调用者对其进行扩展,自定义属性的设置代码为:

 <declare-styleable name="circleView">
  <attr name="textSize" format="dimension" />
  <attr name="text" format="string" />
  <attr name="circleColor" format="color" />
  <attr name="arcColor" format="color" />
  <attr name="textColor" format="color" />
  <attr name="startAngle" format="integer" />
  <attr name="sweepAngle" format="integer" />
 </declare-styleable>

  Ⅰ、textSize——对应中间文本文字的大小

  Ⅱ、text——对应中间文本

  Ⅲ、circleColor——对应内圆的颜色

  Ⅳ、arcColor——对应外环的颜色

  Ⅴ、textColor——对应文本的颜色

  Ⅵ、startAngle——对应外环的起始角度

  Ⅶ、sweepAngle——对应外环扫描角度

  紧接着,就是在自定义控件的初始化方法中来获取这些自定义属性:

TypedArray ta = context.obtainStyledAttributes(attrs,
    R.styleable.circleView);
  if (ta != null) {
   circleColor = ta.getColor(R.styleable.circleView_circleColor, 0);
   arcColor = ta.getColor(R.styleable.circleView_arcColor, 0);
   textColor = ta.getColor(R.styleable.circleView_textColor, 0);
   textSize = ta.getDimension(R.styleable.circleView_textSize, 50);
   text = ta.getString(R.styleable.circleView_text);
   startAngle = ta.getInt(R.styleable.circleView_startAngle, 0);
   sweepAngle = ta.getInt(R.styleable.circleView_sweepAngle, 90);
   ta.recycle();
  }

  这里在多说一嘴子,为了释放更多的资源,一定要将TypedArray这个对象进行资源的释放。

  接下来,在OnMeasure()方法中,初始化要绘制画笔样式,获取屏幕的宽度,计算中间位置的坐标,以及指定外接矩形的宽高代码如下:

 private void init() {
  int length = Math.min(width, height);
  mCircleXY = length / 2;
  mRadius = length * 0.5f / 2;
  mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mCirclePaint.setColor(circleColor);
  mRectF = new RectF(length * 0.1f, length * 0.1f, length * 0.9f,
    length * 0.9f);

  mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mArcPaint.setColor(arcColor);
  mArcPaint.setStyle(Paint.Style.STROKE);
  mArcPaint.setStrokeWidth((width * 0.1f));

  mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mTextPaint.setTextSize(textSize);
  mTextPaint.setColor(textColor);
  mTextPaint.setTextAlign(Align.CENTER);

 }

  将我们设置的自定义属性,设置给不同笔刷。

  做了这么多准备以后,我们所需的就是在OnDraw方法中绘制内圆、外环与文字。代码如下:

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

 private void drawSth(Canvas canvas) {
  canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint);
  canvas.drawArc(mRectF, startAngle, sweepAngle, false, mArcPaint);
  canvas.drawText(text, 0, text.length(), mCircleXY, mCircleXY + textSize
    / 4, mTextPaint);
 }

  需要指出的是,画环形需要在一个指定矩形区域画取,并且要指定起始角度,扫描角度,这些变量都是自定义属性。 

  这个自定义控件的最终的运行效果为:

二、动态条形图

  条形图,应该在图表展示系统中再普通不过的一种图标了。静态示意图就像这样:

  通过这个简单的示意图,我们所需要做的是,绘制一个个的矩形,然后将每一个矩形x坐标平移一定的单位,我们还看到这么一个现象:每个条形图的起始点不一致,而终止点是一样的。起始坐标用个Random(随机函数)刚刚好,实现静态条形图就是这样的思路:

   首先,在OnMeasure()方法中计算出每个矩形宽与高,这里为了方便起见,每个矩形默认的高为屏幕的高,每个矩形的宽这里定义为屏幕的宽度乘以80%除以矩形的个数。然后根据宽与高来初始化笔刷(Paint)。为什么要根据宽与高来初始化笔刷了,这里我为了使自定义View更加的逼真,我这里使用LinearGradient(线性渲染器)进行了渲染,这个对象需要使用矩形宽与高。需要指出来的是这个自定义控件是动态的,我只需要onDraw方法不断发生重绘,这里为了防止控件刷新太快,我这里每隔300毫秒刷新视图。这个控件的完整源代码如下:

public class VolumneView extends View {

 private Paint mPaint;
 private int mCount;
 private int mWidth;
 private int mRectHeight;
 private int mRectWidth;
 private LinearGradient mLinearGradient;
 private double mRandom;
 private float mcurrentHeight;

 public static final int OFFSET = 5;

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

 }

 private void initView(Context context, AttributeSet attrs) {
  mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mPaint.setColor(Color.GREEN);
  mPaint.setStyle(Paint.Style.FILL);
  TypedArray ta = context.obtainStyledAttributes(attrs,
    R.styleable.volumneView);
  if (ta != null) {
   mCount = ta.getInt(R.styleable.volumneView_count, 6);
   ta.recycle();
  }
 }

 public VolumneView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public VolumneView(Context context) {
  this(context, null);
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mWidth = getMeasuredWidth();
  mRectHeight = getMeasuredHeight();
  mRectWidth = (int) (mWidth * 0.8 / mCount);
  mLinearGradient = new LinearGradient(0, 0, mRectWidth, mRectHeight,
    Color.GREEN, Color.YELLOW, TileMode.CLAMP);
  mPaint.setShader(mLinearGradient);

 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  for (int i = 0; i < mCount; i++) {
   mRandom = Math.random();
   mcurrentHeight = (float) (mRectHeight * mRandom);
   float width = (float) (mWidth * 0.4 / 2 + OFFSET);
   canvas.drawRect(width + i * mRectWidth, mcurrentHeight, width
     + (i + 1) * mRectWidth, mRectHeight, mPaint);
  }
  postInvalidateDelayed(300);
 }

最终,运行效果如下:

  后记,通过这两个简单控件,相信大家对于自定义控件基本步骤有说了解,当然,要真正做好自定义控件的话,我们还需要按这个步骤一步步的来,加油!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索android
, view
控件
c 重写控件、重写scrollview、android重写imageview、重写recyclerview、android 重写view,以便于您获取更多的相关知识。

时间: 2016-05-04
Tags: android, 控件, view

Android重写View实现全新的控件_Android的相关文章

Android重写View实现全新的控件

通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 本文来讨论最难的一种自定义控件形式,重写View来实现全新的控件. 首先,我们要明白在什么样的情况下,需要重写View来实现一种全新的控件,一般当我们遇到了原生控件无法满足我们现有的需求的时候,我们此时就可以考虑创建一个全新的View来实现我们所需要的功能.创建一个全新View实现自定义控件,无非分成这么几步: Ⅰ.在

Android使用RecyclerView实现水平滚动控件_Android

前言 相信大家都知道Android滚动控件的实现方式有很多, 使用RecyclerView也比较简单. 做了一个简单的年龄滚动控件, 让我们来看看RecyclerView的使用方式, 主要有以下几点:      (1) 对齐控件中心位置.      (2) 计算滚动距离.      (3) 高亮中心视图.      (4) 实时显示中心数据.      (5) 停止时自动对齐.      (6) 滚动时, 设置按钮状态开关. 效果 1. 框架 主要关注RecyclerView部分逻辑. /**

Android自定义View圆形进度条控件(三)

继续练习自定义View,这次带来的圆形进度条控件与之前的圆形百分比控件大同小异,这次涉及到了渐变渲染以及画布旋转等知识点,效果如下: 虽然步骤类似,但是我还是要写,毕竟基础的东西就是要多练 1.在res/values文件夹下新建attrs.xml文件,编写自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Circ

Android自定义View示例(三)—滑动控件

MainActivity如下: package cc.testview4; import cc.testview4.SlideView.SwitchChangedListener; import android.app.Activity; import android.os.Bundle; /** * Demo描述: * 自定义滑动控件 * * 参考资料: * http://blog.csdn.net/lfdfhl/article/details/8195441 * * 备注说明: * 在Cop

Android客户端实现图片轮播控件_Android

本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下 1. 轮播控件的组成部分     我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成:        首先我们要有用来显示图片的View对象,根据上图中底部中央的5个点,我们知道需要5个ImageView来显示需要轮播的图片,另外还需要5个ImageView来显示5个点.现在考虑以下轮播组件应该具有的行为,首先需要每隔一定时间间隔切换到下一张图片,并且图片间切换的效果应该是平滑的,就像"翻书&qu

Android实现果冻滑动效果的控件_Android

前言 在微信是的处理方法是让用户滑动,但最终还是回滚到最初的地方,这样的效果很生动(毕竟成功还是取决于细节).那么在安卓我们要怎么弄呢.下面为大家介绍一下JellyScrollView,是我继承ScrollView的一个有阻尼的效果的果冻滑动控件. 下面话不多说了,先来看看效果图 (在虚拟机或者真机跑起来是很流畅,可能是录制视频做成gif的时候有点卡顿.) 实现原理 其实只需要重写下它的拦截方法的逻辑就好了,ScrollView的拦截方法onInterceptTouchEvent一般情况下都默认

Android自定义EditText右侧带图片控件_Android

前言 最近项目做用户登录模块需要一个右边带图片的EditText,图片可以设置点击效果,所以就查资料做了一个自定义EditText出来,方便以后复用. 原理 下面是自定义EditText的代码,具体难点是要实现图片的点击监听,因为谷歌官方至今没有给出一个直接实现EditText里面图片的监听API.我的做法是整个控件绑定一个OnTouchListener,然后监测点击事件,检测点击位置的X坐标是否在图片的覆盖范围内(下面getCompoundDrawables()[2]里面的2是代表图片在Edi

Android使用GridLayout绘制自定义日历控件_Android

效果图 思路:就是先设置Gridlayout的行列数,然后往里面放置一定数目的自定义日历按钮控件,最后实现日历逻辑就可以了. 步骤: 第一步:自定义日历控件(初步) 第二步:实现自定义单个日期按钮控件 第三步:将第二步得到的控件动态添加到第一步的布局中,并实现日期逻辑 第四步:编写单个日期点击监听器接口 第一步:自定义日历控件(初步) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln

Android高仿IOS 滚轮选择控件_Android

最近根据项目需要,整理了一个相对比较全面的 WheelView 使用控件,借用之前看到的一句话来说,就是站在巨人肩膀上,进行了一些小调整. 这里先贴上效果图 一般常用的时间选择格式,,单项选择,以及城市联动,这里基本都可以满足了. 这里把 单项选择,和 日期时间选择 给提出到 Util 类中,代码如下: public class Util { /** * 时间选择回调 */ public interface TimerPickerCallBack { void onTimeSelect(Stri