网站开发 加二维扫码,一个网站绑定2个域名,建站公司走量渠道,教学成果申报网站 化工专业建设Android App开发过程中#xff0c;很多时候会遇到系统框架中提供的控件无法满足我们产品的设计需求#xff0c;那么这时候我们可以选择先Google下有没有比较成熟的开源项目可以让我们用#xff0c;当然现在Github上面的项目非常丰富#xff0c;能够满足我们绝不多数的开发需… Android App开发过程中很多时候会遇到系统框架中提供的控件无法满足我们产品的设计需求那么这时候我们可以选择先Google下有没有比较成熟的开源项目可以让我们用当然现在Github上面的项目非常丰富能够满足我们绝不多数的开发需求但是在使用这些炫酷的第三方控件时我们也要想一想我们是不是也可以发挥自己的想象力动手实现自己想要的控件尽可能掌控实现的细节 View Android所有的控件都是View或者View的子类它其实表示的就是屏幕上的一块矩形区域用一个Rect来表示lefttop表示View相对于它的parent View的起点widthheight表示View自己的宽高通过这4个字段就能确定View在屏幕上的位置确定位置后就可以开始绘制View的内容了。 View绘制过程 View的绘制可以分为下面三个过程 Measure View会先做一次测量算出自己需要占用多大的面积。View的Measure过程给我们暴露了一个接口onMeasure方法的定义是这样的 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {} View类已经提供了一个基本的onMeasure实现 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec), getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec)); } public static int getDefaultSize(int size, int measureSpec) { int result size; int specMode MeasureSpec.getMode(measureSpec); int specSize MeasureSpec.getSize(measureSpec); switch (specMode) { case MeasureSpec.UNSPECIFIED: result size; break; case MeasureSpec.AT_MOST: case MeasureSpec.EXACTLY: result specSize; break; } return result; } 其中invoke了setMeasuredDimension()方法设置了measure过程中View的宽高getSuggestedMinimumWidth()返回View的最小WidthHeight也有对应的方法。插几句MeasureSpec类是View类的一个内部静态类它定义了三个常量UNSPECIFIED、AT_MOST、EXACTLY其实我们可以这样理解它它们分别对应LayoutParams中match_parent、wrap_content、xxxdp。我们可以重写onMeasure来重新定义View的宽高。 Layout Layout过程对于View类非常简单同样View给我们暴露了onLayout方法 protected void onLayout(boolean changed, int left, int top, int right, int bottom) { } 因为我们现在讨论的是View没有子View需要排列所以这一步其实我们不需要做额外的工作。插一句对ViewGroup类onLayout方法中我们需要将所有子View的大小宽高设置好这个我们下一篇会详细说。 Draw Draw过程就是在canvas上画出我们需要的View样式。同样View给我们暴露了onDraw方法 protected void onDraw(Canvas canvas) { } 默认View类的onDraw没有一行代码但是提供给我们了一张空白的画布举个例子就像一张画卷一样我们就是画家能画出什么样的效果完全取决我们。 View中还有三个比较重要的方法 requestLayout View重新调用一次layout过程。 invalidate View重新调用一次draw过程 forceLayout 标识View在下一次重绘需要重新调用layout过程。 自定义属性 整个View的绘制流程我们已经介绍完了还有一个很重要的知识自定义控件属性我们都知道View已经有一些基本的属性比如layout_widthlayout_heightbackground等我们往往需要定义自己的属性那么具体可以这么做。 1.在values文件夹下打开attrs.xml其实这个文件名称可以是任意的写在这里更规范一点表示里面放的全是view的属性。 2.因为我们下面的实例会用到2个长度一个颜色值的属性所以我们这里先创建3个属性。 declare-styleable namerainbowbarattr namerainbowbar_hspace formatdimension/attr attr namerainbowbar_vspace formatdimension/attr attr namerainbowbar_color formatcolor/attr /declare-styleable 那么到底怎么用呢我们会看一个实例。 实现一个比较简单的Google彩虹进度条。 为了简单起见这里我只用一种颜色多种颜色就留给大家了我们直接上代码。 蓝色的进度条 public class RainbowBar extends View {//progress bar colorint barColor Color.parseColor(#1E88E5); //every bar segment width int hSpace Utils.dpToPx(80, getResources()); //every bar segment height int vSpace Utils.dpToPx(4, getResources()); //space among bars int space Utils.dpToPx(10, getResources()); float startX 0; float delta 10f; Paint mPaint; public RainbowBar(Context context) { super(context); } public RainbowBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RainbowBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //read custom attrs TypedArray t context.obtainStyledAttributes(attrs, R.styleable.rainbowbar, 0, 0); hSpace t.getDimensionPixelSize(R.styleable.rainbowbar_rainbowbar_hspace, hSpace); vSpace t.getDimensionPixelOffset(R.styleable.rainbowbar_rainbowbar_vspace, vSpace); barColor t.getColor(R.styleable.rainbowbar_rainbowbar_color, barColor); t.recycle(); // we should always recycle after used mPaint new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(barColor); mPaint.setStrokeWidth(vSpace); } ....... } View有了三个构造方法需要我们重写这里介绍下三个方法会被调用的场景 第一个方法一般我们这样使用时会被调用View view new View(context);第二个方法当我们在xml布局文件中使用View时会在inflate布局时被调用 View layout_widthmatch_parent layout_heightmatch_parent/。第三个方法跟第二种类似但是增加style属性设置这时inflater布局时会调用第三个构造方法。 View stylestyles/MyCustomStyle layout_widthmatch_parent layout_heightmatch_parent/。上面大家可能会感觉到有点困惑的是我把初始化读取自定义属性hspacevspace和barcolor的代码写在第三个构造方法里面但是我RainbowBar在线性布局中没有加style属性那按照我们上面的解释inflate布局时应该会invoke第二个构造方法啊但是我们在第二个构造方法里面调用了第三个构造方法this(context, attrs, 0); 所以在第三个构造方法中读取自定义属性没有问题这是一点小细节避免代码冗余-- Draw 因为我们这里不用关注measrue和layout过程直接重写onDraw方法即可。 //draw be invoke numbers.
int index 0;
Override
protected void onDraw(Canvas canvas) { super.onDraw(canvas); //get screen width float sw this.getMeasuredWidth(); if (startX sw (hSpace space) - (sw % (hSpace space))) { startX 0; } else { startX delta; } float start startX; // draw latter parse while (start sw) { canvas.drawLine(start, 5, start hSpace, 5, mPaint); start (hSpace space); } start startX - space - hSpace; // draw front parse while (start -hSpace) { canvas.drawLine(start, 5, start hSpace, 5, mPaint); start - (hSpace space); } if (index 700000) { index 0; } invalidate(); } //布局文件 ?xml version1.0 encodingutf-8? LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:layout_widthmatch_parent android:layout_heightmatch_parent android:gravitycenter android:layout_marginTop40dp android:orientationvertical com.sw.demo.widget.RainbowBar android:layout_widthmatch_parent android:layout_heightwrap_content app:rainbowbar_colorandroid:color/holo_blue_bright app:rainbowbar_hspace80dp app:rainbowbar_vspace10dp /com.sw.demo.widget.RainbowBar /LinearLayout 其实就是调用canvas的drawLine方法然后每次将draw的起点向前推进在方法的结尾我们调用了invalidate方法上面我们已经说明了这个方法会让View重新调用onDraw方法所以就达到我们的进度条一直在向前绘制的效果。下面是最后的显示效果制作成gif时好像有色差但是真实效果是蓝色的。我们只写了短短的几十行代码自定义View并不是我们想象中那么难下一篇我们会继续ViewGroup的绘制流程学习。 rainbow_bar_demo.gif 文ALIOUS简书作者 原文链接http://www.jianshu.com/p/84cee705b0d3 著作权归作者所有转载请联系作者获得授权并标注“简书作者”。 转载于:https://www.cnblogs.com/Free-Thinker/p/5573232.html
