学习了LayoutInflater的原理分析、视图的绘制流程、视图的状态及重绘等知识,按类型来划分的话,自定义View的实现方式大概可以分为三种,自绘控件、组合控件、以及继承控件。那么下面我们就来依次学习一下,每种方式分别是如何自定义View的。

(一)自绘控件

自绘控件的意思就是,这个View上所展现的内容全部都是我们自己绘制出来的。绘制的代码是写在onDraw()方法中的。参考相关博客 http://blog.csdn.net/guolin_blog/article/details/17357967

下面我们准备来自定义一个计数器View,这个View可以响应用户的点击事件,并自动记录一共点击了多少次。新建一个CounterView继承自View,代码如下所示:

 /**
* Created by nubia on 2017/8/31.
*/ public class CounterView extends View implements View.OnClickListener { private Paint mPaint;
private Rect mBounds;
private int mCount; public CounterView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBounds = new Rect();
setOnClickListener(this);
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 蓝色画笔,画出来个矩形
*/
mPaint.setColor(Color.BLUE);
canvas.drawRect(0,0,getWidth(),getHeight(),mPaint); /**
* 画笔变成黄色,绘制文字
*/
mPaint.setColor(Color.YELLOW);
mPaint.setTextSize(30);
String text = String.valueOf(mCount);
mPaint.getTextBounds(text,0,text.length(),mBounds);
float textWidth = mBounds.width();
float textHeight = mBounds.height();
canvas.drawText(text,getWidth()/2-textWidth/2,getHeight()/2+textHeight/2,mPaint);;
} /**
* 调用invalidate()方法会导致视图进行重绘,因此onDraw()方法在稍后就将会得到调用
* @param view
*/
@Override
public void onClick(View view) {
mCount++;
invalidate();
}
}

可以看到,首先我们在CounterView的构造函数中初始化了一些数据,并给这个View的本身注册了点击事件,这样当CounterView被点击的时候,onClick()方法就会得到调用。而onClick()方法中的逻辑就更加简单了,只是对mCount这个计数器加1,然后调用invalidate()方法。通过 Android视图状态及重绘流程分析,带你一步步深入了解View(三) 这篇文章的学习我们都已经知道,调用invalidate()方法会导致视图进行重绘,因此onDraw()方法在稍后就将会得到调用。

既然CounterView是一个自绘视图,那么最主要的逻辑当然就是写在onDraw()方法里的了,下面我们就来仔细看一下。这里首先是将Paint画笔设置为蓝色,然后调用Canvas的drawRect()方法绘制了一个矩形,这个矩形也就可以当作是CounterView的背景图吧。接着将画笔设置为黄色,准备在背景上面绘制当前的计数,注意这里先是调用了getTextBounds()方法来获取到文字的宽度和高度,然后调用了drawText()方法去进行绘制就可以了。

这样,一个自定义的View就已经完成了,并且目前这个CounterView是具备自动计数功能的。那么剩下的问题就是如何让这个View在界面上显示出来了,其实这也非常简单,我们只需要像使用普通的控件一样来使用CounterView就可以了。比如在布局文件中加入如下代码:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <com.example.myview.CounterView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true" /> </RelativeLayout>

可以看到,这里我们将CounterView放入了一个RelativeLayout中,然后可以像使用普通控件来给CounterView指定各种属性,比如通过layout_width和layout_height来指定CounterView的宽高,通过android:layout_centerInParent来指定它在布局里居中显示。只不过需要注意,自定义的View在使用的时候一定要写出完整的包名,不然系统将无法找到这个View。

(二)组合控件

组合控件的意思就是,我们并不需要自己去绘制视图上显示的内容,而只是用系统原生的控件就好了,但我们可以将几个系统原生的控件组合到一起,这样创建出的控件就被称为组合控件。

举个例子来说,标题栏就是个很常见的组合控件,很多界面的头部都会放置一个标题栏,标题栏上会有个返回按钮和标题,点击按钮后就可以返回到上一个界面。那么下面我们就来尝试去实现这样一个标题栏控件。

建一个title.xml布局文件,代码如下所示:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#9999cc"> <Button
android:id="@+id/button_left"
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="2dp"
android:background="@mipmap/aaa" /> <TextView
android:id="@+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="this is Title"
android:textColor="#fff"
android:textSize="30sp"
android:textStyle="bold" /> </RelativeLayout>

接下来创建一个TitleView继承自FrameLayout,代码如下所示:

/**
* Created by nubia on 2017/8/31.
*/ public class TitleView extends FrameLayout { private Button leftButton;
private TextView titleText; public TitleView(final Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);
titleText = findViewById(R.id.title_text);
leftButton = findViewById(R.id.button_left);
leftButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//((Activity)getContext()).finish();
TextView t = findViewById(R.id.title_text);
t.setText("sha bi ");
}
});
}
}

TitleView中的代码非常简单,在TitleView的构建方法中,我们调用了LayoutInflater的inflate()方法来加载刚刚定义的title.xml布局,这部分内容我们已经在 Android LayoutInflater原理分析,带你一步步深入了解View(一) 这篇文章中学习过了。

到了这里,一个自定义的标题栏就完成了,那么下面又到了如何引用这个自定义View的部分,其实方法基本都是相同的,在布局文件中添加如下代码:

 <com.example.myview.TitleView
android:id="@+id/title_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

(三)继承控件

还没看明白 http://blog.csdn.net/guolin_blog/article/details/17357967

20170831工作日记--自定义View学习的更多相关文章

  1. Android之自定义View学习(一)

    Android之自定义View学习(一) Canvas常用方法: 图片来源 /** * Created by SiberiaDante on 2017/6/3. */ public class Bas ...

  2. 简单说说Android自定义view学习推荐的方式

    这几天比较受关注,挺开心的,嘿嘿. 这里给大家总结一下学习自定义view的一些技巧.  以后写自定义view可能不会写博客了,但是可以开源的我会把源码丢到github上我的地址:https://git ...

  3. Android自定义View学习(四)

    硬件加速 参考:HenCoder Android 自定义 View 1-8 硬件加速 硬件加速能够让绘制变快,主要有三个原因: 本来由 CPU 自己来做的事,分摊给了 GPU 一部分,自然可以提高效率 ...

  4. 【转载】自定义View学习笔记之详解onMeasure

    网上对自定义View总结的文章都很多,但是自己还是写一篇,好记性不如多敲字! 其实自定义View就是三大流程,onMeasure.onLayout.onDraw.看名字就知道,onMeasure是用来 ...

  5. Android自定义View学习(二)

    绘制顺序 参考:HenCoder Android 开发进阶:自定义 View 1-5 绘制顺序 绘制过程 包括 背景 主体(onDraw()) 子 View(dispatchDraw()) 滑动边缘渐 ...

  6. Android自定义View学习笔记(一)

    绘制基础 参考:HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 Paint详解 参考:HenCoder Android 开发进阶: 自定义 View 1-2 Pain ...

  7. angularJs工作日记-自定义指令Directive01

    新项目组使用完善的angularMVVM设计思路架构,很庆幸能够来到这个项目组,在这里的每一天都能够学习到新的知识,为了防止以后忘记,记录一下个人的理解 首先接触最多的是directive,direc ...

  8. Android自定义View学习(三)

    属性动画(上) 参考:HenCoder 自定义绘制的第 1-6 期:属性动画 Property Animation(上手篇) Interpolator 其实就是速度设置器,设置动画运行的速度. 属性动 ...

  9. Android查缺补漏(View篇)--自定义 View 的基本流程

    View是Android很重要的一部分,常用的View有Button.TextView.EditView.ListView.GridView.各种layout等等,开发者通过对这些View的各种组合以 ...

随机推荐

  1. centos7下swoole1.9的安装与HttpServer的使用

    一.下载swoole源码包 https://github.com/swoole/swoole-src/releases 如:swoole-src-1.9.6.tar.gz 二.编译安装 > yu ...

  2. python 基本数据类型 之 字符串

    字符串数据出现的意义 掌握字符串的定义和特性 能熟练掌握字符串常用操作,并了解其他工厂方法 字符串的定义和创建 字符串是一个有序的字符集合,用于存储和表示基本的文本信息,  用引号“          ...

  3. 简单DP入门四连发

    复习一下一直不太懂的dp. dp博大精深,路还长着呢 第一题;http://acm.hdu.edu.cn/showproblem.php?pid=2084 从下往上就是水题 #include<c ...

  4. (O)JS高阶函数应用——函数节流

    在一些函数需被频繁调用的场景,如:window.onresize.mousemove.scroll滚动事件.上传进度等等,操作频繁导致性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决 ...

  5. 调试程序时如何用syslog来打印信息

    转自:https://www.cnblogs.com/vigarbuaa/archive/2013/02/05/2892544.html Linux下C语言编程的-把程序输出信息加到系统日志里去关键词 ...

  6. CF487E Tourists - Tarjan缩点 + 树剖 + multiset

    Solution 先Tarjan求出点双联通分量 并缩点. 用$multiset$维护 点双内的最小点权. 容易发现, 点双内的最小点权必须包括与它相连的割边的点权. 所以我们必须想办法来维护. 所以 ...

  7. 深入研究 UCenter API For .NET

    康盛旗下产品的搭建 来自http://www.dozer.cc/2011/02/ucenter-api-in-depth-4th/ 1.UCenter 这个当然是最基本的东西,安装起来也很简单,官方就 ...

  8. walsh矩阵

    矩阵A(1) 1 矩阵A(2) 1 1 1 -1 矩阵A(2n) 由上一级矩阵组合,即用上一级矩阵的一行生成本级矩阵的一行. 生成规则是 A(2n)[k] = { A(n)[k],  A(n)[k] ...

  9. 要显示的联系人——>自定义-bug

    自定义中将“电话”下的“所有联系人”不勾选,但是Contacts列表还是显示PHONE联系人. SELECT _id, display_name, agg_presence.mode AS conta ...

  10. ubuntu配置ftp server

    ubuntu配置ftp server 1. 安装vsftpd   sudo apt-get install vsftpd 安装后会自动新建一个用户ftp,密码ftp,作为匿名用户登录的默认用户 sud ...