Android自定义View的实现方法，带你一步步深入了解View

最新推荐文章于 2023-12-04 19:25:58 发布
最新推荐文章于 2023-12-04 19:25:58 发布
阅读量305 收藏
点赞数
分类专栏： 安卓开发 文章标签： android

转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/17357967
如果说要按类型来划分的话，自定义View的实现方式大概可以分为三种，自绘控件、组合控件、以及继承控件。那么下面我们就来依次学习一下，每种方式分别是如何自定义View的。

一、自绘控件

自绘控件的意思就是，这个View上所展现的内容全部都是我们自己绘制出来的。绘制的代码是写在onDraw()方法中的，而这部分内容我们已经在 Android视图绘制流程完全解析，带你一步步深入了解View(二) 中学习过了。

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

public class CounterView extends View implements OnClickListener {  

    private Paint mPaint;  

    private Rect mBounds;  

    private int mCount;  

    public CounterView(Context context, 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);  
    }  

    @Override  
    public void onClick(View v) {  
        mCount++;  
        invalidate();  
    }  

}

可以看到，首先我们在CounterView的构造函数中初始化了一些数据，并给这个View的本身注册了点击事件，这样当CounterView被点击的时候，onClick()方法就会得到调用。而onClick()方法中的逻辑就更加简单了，只是对mCount这个计数器加1，然后调用invalidate()方法，调用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.customview.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。

好了，就是这么简单，接下来我们可以运行一下程序，并不停地点击CounterView，效果如下图所示。
这里写图片描述
怎么样？是不是感觉自定义View也并不是什么高级的技术，简单几行代码就可以实现了。当然了，这个CounterView功能非常简陋，只有一个计数功能，因此只需几行代码就足够了，当你需要绘制比较复杂的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="#ffcb05" >  

    <Button  
        android:id="@+id/button_left"  
        android:layout_width="60dp"  
        android:layout_height="40dp"  
        android:layout_centerVertical="true"  
        android:layout_marginLeft="5dp"  
        android:background="@drawable/back_button"  
        android:text="Back"  
        android:textColor="#fff" />  

    <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="20sp" />  

</RelativeLayout>

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

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

public class TitleView extends FrameLayout {  

    private Button leftButton;  

    private TextView titleText;  

    public TitleView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        LayoutInflater.from(context).inflate(R.layout.title, this);  
        titleText = (TextView) findViewById(R.id.title_text);  
        leftButton = (Button) findViewById(R.id.button_left);  
        leftButton.setOnClickListener(new OnClickListener() {  
            @Override  
            public void onClick(View v) {  
                ((Activity) getContext()).finish();  
            }  
        });  
    }  

    public void setTitleText(String text) {  
        titleText.setText(text);  
    }  

    public void setLeftButtonText(String text) {  
        leftButton.setText(text);  
    }  

    public void setLeftButtonListener(OnClickListener l) {  
        leftButton.setOnClickListener(l);  
    }  

}

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

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

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

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  

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

</RelativeLayout>

这样就成功将一个标题栏控件引入到布局文件中了，运行一下程序，效果如下图所示：
这里写图片描述
现在点击一下Back按钮，就可以关闭当前的Activity了。如果你想要修改标题栏上显示的内容，或者返回按钮的默认事件，只需要在Activity中通过findViewById()方法得到TitleView的实例，然后调用setTitleText()、setLeftButtonText()、setLeftButtonListener()等方法进行设置就OK了。

三、继承控件

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

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

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

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

</Button>

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

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

public class MyListView extends ListView implements OnTouchListener,  
        OnGestureListener {  

    private GestureDetector gestureDetector;  

    private OnDeleteListener listener;  

    private View deleteButton;  

    private ViewGroup itemLayout;  

    private int selectedItem;  

    private boolean isDeleteShown;  

    public MyListView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        gestureDetector = new GestureDetector(getContext(), this);  
        setOnTouchListener(this);  
    }  

    public void setOnDeleteListener(OnDeleteListener l) {  
        listener = l;  
    }  

    @Override  
    public boolean onTouch(View v, MotionEvent event) {  
        if (isDeleteShown) {  
            itemLayout.removeView(deleteButton);  
            deleteButton = null;  
            isDeleteShown = false;  
            return false;  
        } else {  
            return gestureDetector.onTouchEvent(event);  
        }  
    }  

    @Override  
    public boolean onDown(MotionEvent e) {  
        if (!isDeleteShown) {  
            selectedItem = pointToPosition((int) e.getX(), (int) e.getY());  
        }  
        return false;  
    }  

    @Override  
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
            float velocityY) {  
        if (!isDeleteShown && Math.abs(velocityX) > Math.abs(velocityY)) {  
            deleteButton = LayoutInflater.from(getContext()).inflate(  
                    R.layout.delete_button, null);  
            deleteButton.setOnClickListener(new OnClickListener() {  
                @Override  
                public void onClick(View v) {  
                    itemLayout.removeView(deleteButton);  
                    deleteButton = null;  
                    isDeleteShown = false;  
                    listener.onDelete(selectedItem);  
                }  
            });  
            itemLayout = (ViewGroup) getChildAt(selectedItem  
                    - getFirstVisiblePosition());  
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(  
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
            params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);  
            params.addRule(RelativeLayout.CENTER_VERTICAL);  
            itemLayout.addView(deleteButton, params);  
            isDeleteShown = true;  
        }  
        return false;  
    }  

    @Override  
    public boolean onSingleTapUp(MotionEvent e) {  
        return false;  
    }  

    @Override  
    public void onShowPress(MotionEvent e) {  

    }  

    @Override  
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
            float distanceY) {  
        return false;  
    }  

    @Override  
    public void onLongPress(MotionEvent e) {  
    }  

    public interface OnDeleteListener {  

        void onDelete(int index);  

    }  

}

由于代码逻辑比较简单，我就没有加注释。这里在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，代码如下所示：

<?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="match_parent"  
    android:descendantFocusability="blocksDescendants"  
    android:orientation="vertical" >  

    <TextView  
        android:id="@+id/text_view"  
        android:layout_width="wrap_content"  
        android:layout_height="50dp"  
        android:layout_centerVertical="true"  
        android:gravity="left|center_vertical"  
        android:textColor="#000" />  

</RelativeLayout>

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

public class MyAdapter extends ArrayAdapter<String> {  

    public MyAdapter(Context context, int textViewResourceId, List<String> objects) {  
        super(context, textViewResourceId, objects);  
    }  

    @Override  
    public View getView(int position, View convertView, ViewGroup parent) {  
        View view;  
        if (convertView == null) {  
            view = LayoutInflater.from(getContext()).inflate(R.layout.my_list_view_item, null);  
        } else {  
            view = convertView;  
        }  
        TextView textView = (TextView) view.findViewById(R.id.text_view);  
        textView.setText(getItem(position));  
        return view;  
    }  

}

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  

    <com.example.customview.MyListView  
        android:id="@+id/my_list_view"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content" >  
    </com.example.customview.MyListView>  

</RelativeLayout>

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

private MyListView myListView;  

private MyAdapter adapter;  

private List<String> contentList = new ArrayList<String>();  

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    requestWindowFeature(Window.FEATURE_NO_TITLE);  
    setContentView(R.layout.activity_main);  
    initList();  
    myListView = (MyListView) findViewById(R.id.my_list_view);  
    myListView.setOnDeleteListener(new OnDeleteListener() {  
        @Override  
        public void onDelete(int index) {  
            contentList.remove(index);  
            adapter.notifyDataSetChanged();  
        }  
    });  
    adapter = new MyAdapter(this, 0, contentList);  
    myListView.setAdapter(adapter);  
}  

private void initList() {  
    contentList.add("Content Item 1");  
    contentList.add("Content Item 2");  
    contentList.add("Content Item 3");  
    contentList.add("Content Item 4");  
    contentList.add("Content Item 5");  
    contentList.add("Content Item 6");  
    contentList.add("Content Item 7");  
    contentList.add("Content Item 8");  
    contentList.add("Content Item 9");  
    contentList.add("Content Item 10");  
    contentList.add("Content Item 11");  
    contentList.add("Content Item 12");  
    contentList.add("Content Item 13");  
    contentList.add("Content Item 14");  
    contentList.add("Content Item 15");  
    contentList.add("Content Item 16");  
    contentList.add("Content Item 17");  
    contentList.add("Content Item 18");  
    contentList.add("Content Item 19");  
    contentList.add("Content Item 20");  
}

}

“`
这样就把整个例子的代码都完成了，现在运行一下程序，会看到MyListView可以像ListView一样，正常显示所有的数据，但是当你用手指在MyListView的某一行上快速滑动时，就会有一个删除按钮显示出来，如下图所示：
这里写图片描述
点击一下删除按钮就可以将第6行的数据删除了。此时的MyListView不仅保留了ListView原生的所有功能，还增加了一个滑动进行删除的功能，确实是一个不折不扣的继承控件。

到了这里，我们就把自定义View的几种实现方法全部讲完了，虽然每个例子都很简单，但是万变不离其宗，复杂的View也是由这些简单的原理堆积出来的。经过了四篇文章的学习，相信每个人对View的理解都已经较为深入了，那么带你一步步深入了解View系列的文章就到此结束，感谢大家有耐心看到最后。

worrydog
关注
专栏目录
Android自定义View——实现联系人列表字母索引
上辈子作恶多端，这辈子写前端。
11-18 2万+
相信大家对这个列表字母索引已经不陌生了，在很多app中也随处可见，像没团的城市地址选择，微信联系人列表，手机通讯录…等等。既然是个这么nb这么实用的功能我们怎么能不Get到来呢，下面就让我们一起造一个出来吧一：我们可以大致将他分成3小块，右边的字母列表、中央的当前字母提示、ListView列表。ok分析好了那我们就一步步来编码实现吧二：首先来实现右边的字母列表1. 在画这个字母列表之前，先画张图来大
安卓自定义View
04-05
博客介绍https://blog.csdn.net/jinmie0193/article/details/79824497
Android自定义View的实现方法，带你一步步深入了解View(四)
热门推荐
郭霖的专栏
01-23 18万+
不知不觉中，带你一步步深入了解View系列的文章已经写到第四篇了，回顾一下，我们一共学习了LayoutInflater的原理分析、视图的绘制流程、视图的状态及重绘等知识，算是把View中很多重要的知识点都涉及到了。如果你还没有看过我前面的几篇文章，建议先去阅读一下，多了解一些原理方面的东西。 之前我有承诺过，会在View这个话题上多写几篇博客，讲一讲View的工作原理，以及自定义View的方法。现在前半部分的承诺已经如约兑现了，那么今天我就要来兑现后面部分的承诺，讲一讲自定义View的实现方法，同时这也是带
Android 自定义View (一)
weixin_30521161的博客
04-21 2370
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24252901 很多的Android入门程序猿来说对于Android自定义View，可能都是比较恐惧的，但是这又是高手进阶的必经之路，所有准备在自定义View上面花一些功夫，多写一些文章。先总结下自定义View的步骤： 1、自定义View的属性 2、在View的构造方...
Android自定义view详解
My'is android 历程
07-11 8250
对于我这样一个Android初级开发者来说，自定义View一直是一个遥不可及的东西，每次看到别人做的特别漂亮的控件，自己心里那个痒痒啊，可是又生性懒惰，自己不肯努力去看书，只能望而兴叹，每次做需求用到自定义控件，就直接去Github上找，找到合适的就用，找不到合适的，凑合也用，反正从来没想过要自己来做这样的东西，可是毕业以后到了新公司，为了自己的荣誉，这次不得不硬着头皮自己来了，一个月的紧张开发过
Android自定义view之画圆环(手把手教你如何一步步画圆环)的示例
06-19
总结来说，这个“Android自定义view之画圆环”的示例涵盖了许多Android开发中的核心概念，包括自定义View的创建、图形绘制、动画应用以及性能优化。通过学习和实践这个示例，开发者可以更好地理解和掌握Android图形...
一步步实现自定义View之播放暂停控件
08-27
在Android开发中，自定义View是一项重要的技能，它允许开发者创建独特且富有表现力的UI元素。本篇文章将深入探讨如何...学习自定义View不仅可以提升UI设计的灵活性，还能让你更深入地理解Android图形系统的工作原理。
手把手带你画一个漂亮蜂窝view Android自定义view
旋转 跳跃 然后 团灭
01-21 7240
上一篇做了一个水波纹view  不知道大家有没有动手试试呢点击打开链接 这个效果做起来好像没什么意义，如果不加监听回调 图片就能直接替代。写这篇博客的目的是锻炼一下思维能力，以更好的面多各种自定义view需求。 转载请注明出处：http://blog.csdn.net/wingichoy/article/details/50554058 本文是和代码同步写的。也就是说
Android自定义View之圆形进度条
NextWram
03-15 4398
项目中有一个圆形进度条的效果，写下实现过程做记录 效果图 首先创建一个CircleProgressView.java public class CircleProgressView extends View { public CircleProgressView(Context context) { super(context); } public CircleProgressView(Context context, @Nullable Attribut.
Android自定义View
wjconn的博客
01-28 877
自定义View
android 自定义View
最新发布
2301_77184740的博客
12-04 1012
一、view的测量 1.测量的模式： EXACTLY ：精确值模式，当把空间的layout_width属性或者layout_height的属性设置为具体的数值时，或者指定为match_parent时候,系统就是使用的EXACTLY 模式； AT_MOST: 最大值模式，当空间的layout_width属性或者layout_height属性指定为wrap_content时候，控件大小跟着控件的内容变化而变化，此时控件的尺寸只要不超过父控件允许的最大尺寸即可。 UNSPECIFIED: 这个属性比较奇怪
Android 自定义View
zengruiyue的博客
09-09 377
做Android布局是件很享受的事，这得益于他良好的xml方式。使用xml可以快速有效的为软件定义界面。可是有时候我们总感觉官方定义的一些基本组件不够用，自定义组件就不可避免了。那么如何才能做到像官方提供的那些组件一样用xml来定义他的属性呢？现在我们就来讨论一下他的用法。 ...
android自定义View
xdy1120的博客
02-14 246
1、自定义属性的声明与获取 2、测量onMeasure: 测量自身，决定自身大小。 什么时候调用onMeasure方法？ 当控件的父元素正要放置该控件时调用.父元素会问子控件一个问题，“你想要用多大地方啊？”，然后传入两个参数——widthMeasureSpec和heightMeasureSpec.(带约束的空间大小) 这两个参数指明控件可获得的空间以及关于这个空间描述的元数据. ...
一步步教你实现Android手势密码view
"这篇学习笔记主要介绍了如何在Android中实现手势密码view的开发，适合初学者和想要深入了解自定义视图的开发者。" 在Android应用开发中，手势密码view是一种常见的用户验证方式，通常用于提高应用的安全性。这篇...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值