【Android开发进阶系列】自定义视图专题

1 自定义视图方法汇总

1.1 (一)组合控件

(一)组合控件

  组合控件,顾名思义就是将一些小的控件组合起来形成一个新的控件,这些小的控件多是系统自带的控件。比如很多应用中普遍使用的标题栏控件,其实用的就是组合控件,那么下面将通过实现一个简单的标题栏自定义控件来说说组合控件的用法。

1、新建一个Android项目,创建自定义标题栏的布局文件title_bar.xml:

  可见这个标题栏控件还是比较简单的,其中在左边有一个返回按钮,背景是一张事先准备好的图片back1_64.png,标题栏中间是标题文字。

    2、创建一个类TitleView,继承自RelativeLayout:

public class TitleView extends RelativeLayout{

     // 返回按钮控件

     private Button mLeftBtn;

     // 标题Tv

     private TextView mTitleTv;


     public TitleView(Context context, AttributeSet attrs) {

         super(context, attrs);


         // 加载布局,真正的反射在这里

        LayoutInflater.from(context).inflate(R.layout.title_bar,this);

        // 获取控件

        mLeftBtn = (Button)findViewById(R.id.left_btn);

        mTitleTv = (TextView)findViewById(R.id.title_tv);

    }


    // 为左侧返回按钮添加自定义点击事件

    public void setLeftButtonListener(OnClickListener listener) {

        mLeftBtn.setOnClickListener(listener);

    }


    // 设置标题的方法

    public void setTitleText(String title) {

        mTitleTv.setText(title);

    }

}

  在TitleView中主要是为自定义的标题栏加载了布局,为返回按钮添加事件监听方法,并提供了设置标题文本的方法。

    3、在activity_main.xml中引入自定义的标题栏:

    4、在MainActivity中获取自定义的标题栏,并且为返回按钮添加自定义点击事件:

private TitleView mTitleBar;

mTitleBar = (TitleView) findViewById(R.id.title_bar);

mTitleBar.setLeftButtonListener(newOnClickListener() {

    @Override

    public voidonClick(View v) {

        Toast.makeText(MainActivity.this, "点击了返回按钮", Toast.LENGTH_SHORT).show();

        finish();

    }

});


    5、运行效果如下:

  这样就用组合的方式实现了自定义标题栏,其实经过更多的组合还可以创建出功能更为复杂的自定义控件,比如自定义搜索栏等。

1.2 (二)自绘控件

  自绘控件的内容都是自己绘制出来的,在View的onDraw方法中完成绘制。下面就实现一个简单的计数器,每点击它一次,计数值就加1并显示出来。

    1、创建CounterView类,继承自View,实现OnClickListener接口:

public class CounterView extends View implements OnClickListener{

     // 定义画笔

     private Paint mPaint;

     // 用于获取文字的宽和高

     private Rect mBounds;

     // 计数值,每点击一次本控件,其值增加1

     private int mCount;


     public CounterView(Context context, AttributeSet attrs) {

         super(context, attrs);


         // 初始化画笔、Rect

         mPaint =newPaint(Paint.ANTI_ALIAS_FLAG);

         mBounds =newRect();

         // 本控件的点击事件

         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(50);

        String text =String.valueOf(mCount);

        // 获取文字的宽和高

        mPaint.getTextBounds(text, 0, text.length(), mBounds);

        floattextWidth = mBounds.width();

        floattextHeight = mBounds.height();


        // 绘制字符串

        canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 2,mPaint);

    }


    @Override

    public void onClick(View v) {

        mCount ++;

        // 重绘

        invalidate();

    }

}


    2、在activity_main.xml中引入该自定义布局:

    3、运行效果如下:

1.3 (三)继承控件

  就是继承已有的控件,创建新控件,保留继承的父控件的特性,并且还可以引入新特性。下面就以支持横向滑动删除列表项的自定义ListView的实现来介绍。

    1、创建删除按钮布局delete_btn.xml,这个布局是在横向滑动列表项后显示的:

2、创建CustomListView类,继承自ListView,并实现了OnTouchListener和OnGestureListener接口:

public class CustomListView extends ListView implements OnTouchListener, OnGestureListener {

     // 手势动作探测器

     private GestureDetector mGestureDetector;


     // 删除事件监听器

     public interface OnDeleteListener {

         void onDelete(int index);

     }


     private OnDeleteListener mOnDeleteListener;


     // 删除按钮

     private View mDeleteBtn;


     // 列表项布局

     private ViewGroup mItemLayout;


     // 选择的列表项

     private int mSelectedItem;


     // 当前删除按钮是否显示出来了

     private boolean isDeleteShown;


     public CustomListView(Context context, AttributeSet attrs) {

         super(context, attrs);


         // 创建手势监听器对象

         mGestureDetector =new GestureDetector(getContext(), this);


         // 监听onTouch事件

         setOnTouchListener(this);

     }


     // 设置删除监听事件

     public void setOnDeleteListener(OnDeleteListener listener) {

         mOnDeleteListener = listener;

     }


     // 触摸监听事件

     @Override

     public boolean onTouch(View v, MotionEvent event) {

         if(isDeleteShown) {

             hideDelete();

             return false;

         }else{

             return mGestureDetector.onTouchEvent(event);

         }

     }


     @Override

     public boolean onDown(MotionEvent e) {

         if(!isDeleteShown) {

             mSelectedItem = pointToPosition((int) e.getX(), (int)e.getY());

         }

         return false;

     }


     @Override

     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

         // 如果当前删除按钮没有显示出来,并且x方向滑动的速度大于y方向的滑动速度

         if(!isDeleteShown && Math.abs(velocityX) > Math.abs(velocityY)){

             mDeleteBtn = LayoutInflater.from(getContext()).inflate(R.layout.delete_btn, null);


            mDeleteBtn.setOnClickListener(newOnClickListener() {

                 @Override

                 public void onClick(View v) {

                    mItemLayout.removeView(mDeleteBtn);

                     mDeleteBtn = null;

                     isDeleteShown = false;

                    mOnDeleteListener.onDelete(mSelectedItem);

                 }

             });


             mItemLayout = (ViewGroup)getChildAt(mSelectedItem - getFirstVisiblePosition());


            RelativeLayout.LayoutParams params = newRelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,  LayoutParams.WRAP_CONTENT);

            params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);

             params.addRule(RelativeLayout.CENTER_VERTICAL);


            mItemLayout.addView(mDeleteBtn, params);

             isDeleteShown = true;

         }


         return false;

     }


     // 隐藏删除按钮

     public void hideDelete() {

         mItemLayout.removeView(mDeleteBtn);

         mDeleteBtn = null;

         isDeleteShown = false;

     }


     public boolean isDeleteShown() {

         return isDeleteShown;

     }


     /**

      *后面几个方法本例中没有用到

      */

     @Override

     public void onShowPress(MotionEvent e) {


     }


     @Override

     public boolean onSingleTapUp(MotionEvent e) {

         return false;

     }


     @Override

     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {

         return false;

     }


     @Override

     public void onLongPress(MotionEvent e) {


     }

}


3、定义列表项布局custom_listview_item.xml,它的结构很简单,只包含了一个TextView:

4、定义适配器类CustomListViewAdapter,继承自ArrayAdapter:

public class CustomListViewAdapter extends ArrayAdapter {

     public CustomListViewAdapter(Context context, int textViewResourceId, List 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.custom_listview_item, null);

         }else{

             view = convertView;

         }


         TextView contentTv = (TextView)view.findViewById(R.id.content_tv);

        contentTv.setText(getItem(position));


         return view;

     }

}


5、在activity_main.xml中引入自定义的ListView:

6、在MainActivity中对列表做初始化、设置列表项删除按钮点击事件等处理:

public class MainActivity extends Activity {

     // 自定义Lv

     private CustomListView mCustomLv;

     // 自定义适配器

     private CustomListViewAdapter mAdapter;

     // 内容列表

     private List contentList = newArrayList();


     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);


         initContentList();


         mCustomLv = (CustomListView)findViewById(R.id.custom_lv);

         mCustomLv.setOnDeleteListener(newOnDeleteListener() {


             @Override

             public void onDelete(intindex) {

                contentList.remove(index);

                mAdapter.notifyDataSetChanged();

             }

         });


         mAdapter = new CustomListViewAdapter(this, 0, contentList);

         mCustomLv.setAdapter(mAdapter);

     }


     // 初始化内容列表

     private void initContentList() {

         for (int i = 0; i < 20; i++) {

             contentList.add("内容项" + i);

         }

     }


     @Override

     public void onBackPressed() {

         if(mCustomLv.isDeleteShown()) {

             mCustomLv.hideDelete();

             return;

         }

         super.onBackPressed();

     }

}


7、运行效果如下:

2 参考链接

Android自定义View的三种实现方式

http://www.cnblogs.com/jiayongji/p/5560806.html


Android自定义View的实现方法,带你一步步深入了解View(四)

http://blog.csdn.net/guolin_blog/article/details/17357967

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容