标签:public 响应 and contex 视图 apk guolin xtend sha
学习了LayoutInflater的原理分析、视图的绘制流程、视图的状态及重绘等知识,按类型来划分的话,自定义View的实现方式大概可以分为三种,自绘控件、组合控件、以及继承控件。那么下面我们就来依次学习一下,每种方式分别是如何自定义View的。
(一)自绘控件
自绘控件的意思就是,这个View上所展现的内容全部都是我们自己绘制出来的。绘制的代码是写在onDraw()方法中的。参考相关博客 http://blog.csdn.net/guolin_blog/article/details/17357967
下面我们准备来自定义一个计数器View,这个View可以响应用户的点击事件,并自动记录一共点击了多少次。新建一个CounterView继承自View,代码如下所示:
1 /** 2 * Created by nubia on 2017/8/31. 3 */ 4 5 public class CounterView extends View implements View.OnClickListener { 6 7 private Paint mPaint; 8 private Rect mBounds; 9 private int mCount; 10 11 public CounterView(Context context, @Nullable AttributeSet attrs) { 12 super(context, attrs); 13 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 14 mBounds = new Rect(); 15 setOnClickListener(this); 16 } 17 18 @Override 19 protected void onDraw(Canvas canvas) { 20 super.onDraw(canvas); 21 /** 22 * 蓝色画笔,画出来个矩形 23 */ 24 mPaint.setColor(Color.BLUE); 25 canvas.drawRect(0,0,getWidth(),getHeight(),mPaint); 26 27 /** 28 * 画笔变成黄色,绘制文字 29 */ 30 mPaint.setColor(Color.YELLOW); 31 mPaint.setTextSize(30); 32 String text = String.valueOf(mCount); 33 mPaint.getTextBounds(text,0,text.length(),mBounds); 34 float textWidth = mBounds.width(); 35 float textHeight = mBounds.height(); 36 canvas.drawText(text,getWidth()/2-textWidth/2,getHeight()/2+textHeight/2,mPaint);; 37 } 38 39 /** 40 * 调用invalidate()方法会导致视图进行重绘,因此onDraw()方法在稍后就将会得到调用 41 * @param view 42 */ 43 @Override 44 public void onClick(View view) { 45 mCount++; 46 invalidate(); 47 } 48 }
可以看到,首先我们在CounterView的构造函数中初始化了一些数据,并给这个View的本身注册了点击事件,这样当CounterView被点击的时候,onClick()方法就会得到调用。而onClick()方法中的逻辑就更加简单了,只是对mCount这个计数器加1,然后调用invalidate()方法。通过 Android视图状态及重绘流程分析,带你一步步深入了解View(三) 这篇文章的学习我们都已经知道,调用invalidate()方法会导致视图进行重绘,因此onDraw()方法在稍后就将会得到调用。
既然CounterView是一个自绘视图,那么最主要的逻辑当然就是写在onDraw()方法里的了,下面我们就来仔细看一下。这里首先是将Paint画笔设置为蓝色,然后调用Canvas的drawRect()方法绘制了一个矩形,这个矩形也就可以当作是CounterView的背景图吧。接着将画笔设置为黄色,准备在背景上面绘制当前的计数,注意这里先是调用了getTextBounds()方法来获取到文字的宽度和高度,然后调用了drawText()方法去进行绘制就可以了。
这样,一个自定义的View就已经完成了,并且目前这个CounterView是具备自动计数功能的。那么剩下的问题就是如何让这个View在界面上显示出来了,其实这也非常简单,我们只需要像使用普通的控件一样来使用CounterView就可以了。比如在布局文件中加入如下代码:
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="match_parent" 3 android:layout_height="match_parent" > 4 5 <com.example.myview.CounterView 6 android:layout_width="100dp" 7 android:layout_height="100dp" 8 android:layout_centerInParent="true" /> 9 10 </RelativeLayout>
可以看到,这里我们将CounterView放入了一个RelativeLayout中,然后可以像使用普通控件来给CounterView指定各种属性,比如通过layout_width和layout_height来指定CounterView的宽高,通过android:layout_centerInParent来指定它在布局里居中显示。只不过需要注意,自定义的View在使用的时候一定要写出完整的包名,不然系统将无法找到这个View。
(二)组合控件
组合控件的意思就是,我们并不需要自己去绘制视图上显示的内容,而只是用系统原生的控件就好了,但我们可以将几个系统原生的控件组合到一起,这样创建出的控件就被称为组合控件。
举个例子来说,标题栏就是个很常见的组合控件,很多界面的头部都会放置一个标题栏,标题栏上会有个返回按钮和标题,点击按钮后就可以返回到上一个界面。那么下面我们就来尝试去实现这样一个标题栏控件。
建一个title.xml布局文件,代码如下所示:
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="50dp" 5 android:background="#9999cc"> 6 7 <Button 8 android:id="@+id/button_left" 9 android:layout_width="80dp" 10 android:layout_height="60dp" 11 android:layout_centerVertical="true" 12 android:layout_marginLeft="2dp" 13 android:background="@mipmap/aaa" /> 14 15 <TextView 16 android:id="@+id/title_text" 17 android:layout_width="wrap_content" 18 android:layout_height="wrap_content" 19 android:layout_centerInParent="true" 20 android:text="this is Title" 21 android:textColor="#fff" 22 android:textSize="30sp" 23 android:textStyle="bold" /> 24 25 26 </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的部分,其实方法基本都是相同的,在布局文件中添加如下代码:
1 <com.example.myview.TitleView 2 android:id="@+id/title_view" 3 android:layout_width="match_parent" 4 android:layout_height="wrap_content" />
(三)继承控件
还没看明白 http://blog.csdn.net/guolin_blog/article/details/17357967
标签:public 响应 and contex 视图 apk guolin xtend sha
原文地址:http://www.cnblogs.com/buder-cp/p/7458257.html