LayoutInflater(四)

如果说要按类型来划分的话，自定义View的实现方式大概可以分为三种，自绘控件、组合控件、以及继承控件。那么下面我们就来依次学习一下，每种方式分别是如何自定义View的。

一、自绘控件

自绘控件的意思就是，这个View上所展现的内容全部都是我们自己绘制出来的。绘制的代码是写在onDraw()方法中的

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

[java] view plain copy

  1. public class CounterView extends View implements OnClickListener {
  2. private Paint mPaint;
  3. private Rect mBounds;
  4. private int mCount;
  5. public CounterView(Context context, AttributeSet attrs) {
  6. super(context, attrs);
  7. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  8. mBounds = new Rect();
  9. setOnClickListener(this);
  10. }
  11. @Override
  12. protected void onDraw(Canvas canvas) {
  13. super.onDraw(canvas);
  14. mPaint.setColor(Color.BLUE);
  15. canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
  16. mPaint.setColor(Color.YELLOW);
  17. mPaint.setTextSize(30);
  18. String text = String.valueOf(mCount);
  19. mPaint.getTextBounds(text, 0, text.length(), mBounds);
  20. float textWidth = mBounds.width();
  21. float textHeight = mBounds.height();
  22. canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2
  23. + textHeight / 2, mPaint);
  24. }
  25. @Override
  26. public void onClick(View v) {
  27. mCount++;
  28. invalidate();
  29. }
  30. }

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

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

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

[html] view plain copy

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent" >
  4. <com.example.customview.CounterView
  5. android:layout_width="100dp"
  6. android:layout_height="100dp"
  7. android:layout_centerInParent="true" />
  8. </RelativeLayout>

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

好了，就是这么简单，接下来我们可以运行一下程序，并不停地点击CounterView，效果如下图所示。

怎么样？是不是感觉自定义View也并不是什么高级的技术，简单几行代码就可以实现了。当然了，这个CounterView功能非常简陋，只有一个计数功能，因此只需几行代码就足够了，当你需要绘制比较复杂的View时，还是需要很多技巧的。

二、组合控件

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

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

新建一个title.xml布局文件，代码如下所示：

[html] view plain copy

  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="#ffcb05" >
  6. <Button
  7. android:id="@+id/button_left"
  8. android:layout_width="60dp"
  9. android:layout_height="40dp"
  10. android:layout_centerVertical="true"
  11. android:layout_marginLeft="5dp"
  12. android:background="@drawable/back_button"
  13. android:text="Back"
  14. android:textColor="#fff" />
  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="20sp" />
  23. </RelativeLayout>

在这个布局文件中，我们首先定义了一个RelativeLayout作为背景布局，然后在这个布局里定义了一个Button和一个TextView，Button就是标题栏中的返回按钮，TextView就是标题栏中的显示的文字。

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

[java] view plain copy

  1. public class TitleView extends FrameLayout {
  2. private Button leftButton;
  3. private TextView titleText;
  4. public TitleView(Context context, AttributeSet attrs) {
  5. super(context, attrs);
  6. LayoutInflater.from(context).inflate(R.layout.title, this);
  7. titleText = (TextView) findViewById(R.id.title_text);
  8. leftButton = (Button) findViewById(R.id.button_left);
  9. leftButton.setOnClickListener(new OnClickListener() {
  10. @Override
  11. public void onClick(View v) {
  12. ((Activity) getContext()).finish();
  13. }
  14. });
  15. }
  16. public void setTitleText(String text) {
  17. titleText.setText(text);
  18. }
  19. public void setLeftButtonText(String text) {
  20. leftButton.setText(text);
  21. }
  22. public void setLeftButtonListener(OnClickListener l) {
  23. leftButton.setOnClickListener(l);
  24. }
  25. }

TitleView中的代码非常简单，在TitleView的构建方法中，我们调用了LayoutInflater的inflate()方法来加载刚刚定义的title.xml布局，

接下来调用findViewById()方法获取到了返回按钮的实例，然后在它的onClick事件中调用finish()方法来关闭当前的Activity，也就相当于实现返回功能了。

另外，为了让TitleView有更强地扩展性，我们还提供了setTitleText()、setLeftButtonText()、setLeftButtonListener()等方法，分别用于设置标题栏上的文字、返回按钮上的文字、以及返回按钮的点击事件。

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

[html] view plain copy

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent" >
  5. <com.example.customview.TitleView
  6. android:id="@+id/title_view"
  7. android:layout_width="match_parent"
  8. android:layout_height="wrap_content" >
  9. </com.example.customview.TitleView>
  10. </RelativeLayout>

这样就成功将一个标题栏控件引入到布局文件中了，运行一下程序，效果如下图所示：

现在点击一下Back按钮，就可以关闭当前的Activity了。如果你想要修改标题栏上显示的内容，或者返回按钮的默认事件，只需要在Activity中通过findViewById()方法得到TitleView的实例，然后调用setTitleText()、setLeftButtonText()、setLeftButtonListener()等方法进行设置就OK了。

三、继承控件

继承控件的意思就是，我们并不需要自己重头去实现一个控件，只需要去继承一个现有的控件，然后在这个控件上增加一些新的功能，就可以形成一个自定义的控件了。这种自定义控件的特点就是不仅能够按照我们的需求加入相应的功能，还可以保留原生控件的所有功能，比如 Android PowerImageView实现，可以播放动画的强大ImageView 这篇文章中介绍的PowerImageView就是一个典型的继承控件。

为了能够加深大家对这种自定义View方式的理解，下面我们再来编写一个新的继承控件。ListView相信每一个Android程序员都一定使用过，这次我们准备对ListView进行扩展，加入在ListView上滑动就可以显示出一个删除按钮，点击按钮就会删除相应数据的功能。

首先需要准备一个删除按钮的布局，新建delete_button.xml文件，代码如下所示：

[html] view plain copy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Button xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/delete_button"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. android:background="@drawable/delete_button" >
  7. </Button>

这个布局文件很简单，只有一个按钮而已，并且我们给这个按钮指定了一张删除背景图。

接着创建MyListView继承自ListView，这就是我们自定义的View了，代码如下所示：

[java] view plain copy

  1. public class MyListView extends ListView implements OnTouchListener,
  2. OnGestureListener {
  3. private GestureDetector gestureDetector;
  4. private OnDeleteListener listener;
  5. private View deleteButton;
  6. private ViewGroup itemLayout;
  7. private int selectedItem;
  8. private boolean isDeleteShown;
  9. public MyListView(Context context, AttributeSet attrs) {
  10. super(context, attrs);
  11. gestureDetector = new GestureDetector(getContext(), this);
  12. setOnTouchListener(this);
  13. }
  14. public void setOnDeleteListener(OnDeleteListener l) {
  15. listener = l;
  16. }
  17. @Override
  18. public boolean onTouch(View v, MotionEvent event) {
  19. if (isDeleteShown) {
  20. itemLayout.removeView(deleteButton);
  21. deleteButton = null;
  22. isDeleteShown = false;
  23. return false;
  24. } else {
  25. return gestureDetector.onTouchEvent(event);
  26. }
  27. }
  28. @Override
  29. public boolean onDown(MotionEvent e) {
  30. if (!isDeleteShown) {
  31. selectedItem = pointToPosition((int) e.getX(), (int) e.getY());
  32. }
  33. return false;
  34. }
  35. @Override
  36. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
  37. float velocityY) {
  38. if (!isDeleteShown && Math.abs(velocityX) > Math.abs(velocityY)) {
  39. deleteButton = LayoutInflater.from(getContext()).inflate(
  40. R.layout.delete_button, null);
  41. deleteButton.setOnClickListener(new OnClickListener() {
  42. @Override
  43. public void onClick(View v) {
  44. itemLayout.removeView(deleteButton);
  45. deleteButton = null;
  46. isDeleteShown = false;
  47. listener.onDelete(selectedItem);
  48. }
  49. });
  50. itemLayout = (ViewGroup) getChildAt(selectedItem
  51. - getFirstVisiblePosition());
  52. RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
  53. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  54. params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
  55. params.addRule(RelativeLayout.CENTER_VERTICAL);
  56. itemLayout.addView(deleteButton, params);
  57. isDeleteShown = true;
  58. }
  59. return false;
  60. }
  61. @Override
  62. public boolean onSingleTapUp(MotionEvent e) {
  63. return false;
  64. }
  65. @Override
  66. public void onShowPress(MotionEvent e) {
  67. }
  68. @Override
  69. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
  70. float distanceY) {
  71. return false;
  72. }
  73. @Override
  74. public void onLongPress(MotionEvent e) {
  75. }
  76. public interface OnDeleteListener {
  77. void onDelete(int index);
  78. }
  79. }

由于代码逻辑比较简单，我就没有加注释。这里在MyListView的构造方法中创建了一个GestureDetector的实例用于监听手势，然后给MyListView注册了touch监听事件。然后在onTouch()方法中进行判断，如果删除按钮已经显示了，就将它移除掉，如果删除按钮没有显示，就使用GestureDetector来处理当前手势。

当手指按下时，会调用OnGestureListener的onDown()方法，在这里通过pointToPosition()方法来判断出当前选中的是ListView的哪一行。当手指快速滑动时，会调用onFling()方法，在这里会去加载delete_button.xml这个布局，然后将删除按钮添加到当前选中的那一行item上。注意，我们还给删除按钮添加了一个点击事件，当点击了删除按钮时就会回调onDeleteListener的onDelete()方法，在回调方法中应该去处理具体的删除操作。

好了，自定义View的功能到此就完成了，接下来我们需要看一下如何才能使用这个自定义View。首先需要创建一个ListView子项的布局文件，新建my_list_view_item.xml，代码如下所示：

[html] view plain copy

  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="match_parent"
  5. android:descendantFocusability="blocksDescendants"
  6. android:orientation="vertical" >
  7. <TextView
  8. android:id="@+id/text_view"
  9. android:layout_width="wrap_content"
  10. android:layout_height="50dp"
  11. android:layout_centerVertical="true"
  12. android:gravity="left|center_vertical"
  13. android:textColor="#000" />
  14. </RelativeLayout>

然后创建一个适配器MyAdapter，在这个适配器中去加载my_list_view_item布局，代码如下所示：

[java] view plain copy

  1. public class MyAdapter extends ArrayAdapter<String> {
  2. public MyAdapter(Context context, int textViewResourceId, List<String> objects) {
  3. super(context, textViewResourceId, objects);
  4. }
  5. @Override
  6. public View getView(int position, View convertView, ViewGroup parent) {
  7. View view;
  8. if (convertView == null) {
  9. view = LayoutInflater.from(getContext()).inflate(R.layout.my_list_view_item, null);
  10. } else {
  11. view = convertView;
  12. }
  13. TextView textView = (TextView) view.findViewById(R.id.text_view);
  14. textView.setText(getItem(position));
  15. return view;
  16. }
  17. }

到这里就基本已经完工了，下面在程序的主布局文件里面引入MyListView这个控件，如下所示：

[html] view plain copy

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent" >
  5. <com.example.customview.MyListView
  6. android:id="@+id/my_list_view"
  7. android:layout_width="match_parent"
  8. android:layout_height="wrap_content" >
  9. </com.example.customview.MyListView>
  10. </RelativeLayout>

最后在Activity中初始化MyListView中的数据，并处理了onDelete()方法的删除逻辑，代码如下所示：

[java] view plain copy

  1. public class MainActivity extends Activity {
  2. private MyListView myListView;
  3. private MyAdapter adapter;
  4. private List<String> contentList = new ArrayList<String>();
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. requestWindowFeature(Window.FEATURE_NO_TITLE);
  9. setContentView(R.layout.activity_main);
  10. initList();
  11. myListView = (MyListView) findViewById(R.id.my_list_view);
  12. myListView.setOnDeleteListener(new OnDeleteListener() {
  13. @Override
  14. public void onDelete(int index) {
  15. contentList.remove(index);
  16. adapter.notifyDataSetChanged();
  17. }
  18. });
  19. adapter = new MyAdapter(this, 0, contentList);
  20. myListView.setAdapter(adapter);
  21. }
  22. private void initList() {
  23. contentList.add("Content Item 1");
  24. contentList.add("Content Item 2");
  25. contentList.add("Content Item 3");
  26. contentList.add("Content Item 4");
  27. contentList.add("Content Item 5");
  28. contentList.add("Content Item 6");
  29. contentList.add("Content Item 7");
  30. contentList.add("Content Item 8");
  31. contentList.add("Content Item 9");
  32. contentList.add("Content Item 10");
  33. contentList.add("Content Item 11");
  34. contentList.add("Content Item 12");
  35. contentList.add("Content Item 13");
  36. contentList.add("Content Item 14");
  37. contentList.add("Content Item 15");
  38. contentList.add("Content Item 16");
  39. contentList.add("Content Item 17");
  40. contentList.add("Content Item 18");
  41. contentList.add("Content Item 19");
  42. contentList.add("Content Item 20");
  43. }
  44. }

这样就把整个例子的代码都完成了，现在运行一下程序，会看到MyListView可以像ListView一样，正常显示所有的数据，但是当你用手指在MyListView的某一行上快速滑动时，就会有一个删除按钮显示出来，如下图所示：

点击一下删除按钮就可以将第6行的数据删除了。此时的MyListView不仅保留了ListView原生的所有功能，还增加了一个滑动进行删除的功能，确实是一个不折不扣的继承控件。

到了这里，我们就把自定义View的几种实现方法全部讲完了，虽然每个例子都很简单，但是万变不离其宗，复杂的View也是由这些简单的原理堆积出来的。经过了四篇文章的学习，相信每个人对View的理解都已经较为深入了

时间： 2024-11-10 16:08:22

LayoutInflater(四)的相关文章

Android框架设计模式（五）——Singleton Method

一单例模式介绍 什么是单例模式 单例模式UML图 单例模式应用场景 二单例模式的简单示例 几种实现方式 懒汉1线程不安全 懒汉2线程安全 双重校检锁线程安全 饿汉静态成员变量 静态内部类 枚举线程安全且防反序列化 容器实现单例模式 如何防止反序列化重建对象 实现方式小结 三Android中单例模式范例 LayoutInflater 四总结 一.单例模式介绍 什么是单例模式 单例模式就是在整个全局中(无论是单线程还是多线程),该对象只存在一个实例,而且只应该存在一个实例,没有副本(副本的制作需要花

Android 源码系列之&lt;四&gt;从源码的角度深入理解LayoutInflater.Factory之主题切换(上)

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51252401 现在越来越多的APP都加入了主题切换功能或者是日间模式和夜间模式功能切换等,这些功能不仅增加了用户体验也增强了用户好感,众所周知QQ和网易新闻的APP做的用户体验都非常好,它们也都有日间模式和夜间模式的主题切换功能.体验过它们的主题切换后你会发现大部分效果是更换相关背景图片.背景颜色.字体颜色等来完成的,网上这篇文章对主题切换讲解的比较不错,今天我们从源码的角度来学习一下

Android自定义“图片+文字”控件四种实现方法之 二--------个人最推荐的一种

http://blog.csdn.net/yanzi1225627/article/details/8633872 第二种方法也要新建一个图片+文字的xml布局文件,然后写一个类继承自LinearLayout.在主程序里实例化并设置相应参数.这种方式也是我最推荐的一种. 第一部分:myimgbtn_layout.xml [html] view plaincopyprint? <?xml version="1.0" encoding="utf-8"?> &

详解listview的四种适配器模式

ListView是Android开发中比较常用的一个组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.比如说我们手机里的通讯录就使用到了ListView显示联系人信息.ListView同时也是所有Android UI控件中最为麻烦的控件,之所以麻烦就是因为它的各种的适配器特别麻烦. 创建ListView有两种方式: 1.直接创建ListView 2.让Activity继承ListActivity 列表的显示需要三个元素: 1．ListVeiw :用来展示列表的View. 2．适

Android数据填充器LayoutInflater

LayoutInflater类在应用程序中比较实用,可以叫布局填充器,也可以成为打气筒,意思就是将布局文件填充到自己想要的位置,LayoutInflater是用来找res/layout/下的xml布局文件,并且实例化这个XML文件成为一个View,有点类似于类似于findViewById(),但是findViewById()是找xml布局文件下的具体widget控件(Button.TextView).对于一个没有被载入或者想要动态载入的界面,都需要使用LayoutInflater.inflate

Android图表库MPAndroidChart(十四)——在ListView种使用相同的图表

Android图表库MPAndroidChart(十四)--在ListView种使用相同的图表 各位好久不见,最近挺忙的,所有博客更新的比较少,这里今天说个比较简单的图表,那就是在ListView中使用相同的图标,因为我们在下篇会讲解使用不同的图表,相同的图表还是比较简单的,我们来看下效果图 具体怎么去实现呢,这里我们先写点铺垫,比如我们需要一个基类的Activity ViewPagerBaseActivity package com.liuguilin.mpandroidchartsample

JAVA安卓植物大战僵尸主题四子棋游戏

@前言 这里使用安卓最基本的API实现双人四子棋游戏(无AI),开发语言为java,开发环境为Android Studio 2.1.2,目标SDK版本为24,最低为15: 界面采用植物大战僵尸主题,图片资源来源于网络,进行了PS加工,非原创: 游戏界面基本可以适配所有安卓手机分辨率,不过在分辨率太大或太小的手机上整体效果会有影响: Github源码: https://github.com/jiangxh1992/FourInRowGame 视频演示: https://vimeo.com/1875

Android 中LayoutInflater原理分析

概述 在Android开发中LayoutInflater的应用非常普遍,可以将res/layout/下的xml布局文件,实例化为一个View或者ViewGroup的控件.与findViewById的作用类似,但是findViewById在xml布局文件中查找具体的控件,两者并不完全相同. 应用场景: 1.在一个没有载入或者想要动态载入的界面中,需要使用layoutInflater.inflate()来载入布局文件: 2.对于一个已经载入的界面,就可以使用findViewById方法来获得其中的界

android LayoutInflater、setContentView、findviewbyid 区分解析

一.LayoutInflater.inflate(layoutId, root, boolen)中三个参数的意义及作用 (这点可以参考鸿洋前辈博客地址:http://blog.csdn.net/lmj623565791/article/details/38171465) 主要知识点其实很少,如下: 若temp为layoutId所代表的布局,inflate的三种方法区分如下: View view=LayoutInflater.Inflate(layoutId, null )只创建temp ,返回t