有关自己定义ViewGroup的文章已经非常多了，我为什么写这篇文章，对于刚開始学习的人或者对自己定义组件比較生疏的朋友尽管能够拿来主义的用了，可是要一步一步的实现和了解当中的过程和原理才干真真脱离别人的代码，举一反三却不easy，非常多博主事实上不愿意一步一步的去写，这样非常耗时，可是假设能对读者有帮助，能从这篇文章中学会自己定义组件就达到我的目的了。

第一步：搭建框架来实现一个3/5和2/5分屏的界面，效果例如以下：


最外层是一个自己定义的ViewGroup布局文件例如以下：

  1. package com.example.testscrollto;
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.view.View.MeasureSpec;
  9. public class MyScrollView extends ViewGroup{
  11. 	private int mWidth;
  12. 	private int mHeight;
  14. 	private float mMenuWeight = 3.0f / 5; //菜单界面比例
  16. 	private View mMenuView;   //菜单界面
  17. 	private View mPriView;	  //内容界面
  19. 	public MyScrollView(Context context, AttributeSet attrs) {
  20. 		super(context, attrs);
  22. 	}
  24. 	@Override
  25. 	protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
  26. 		System.out.println("运行了onLayout");
  27. 		mMenuView.layout(0, 0, (int)(mWidth * mMenuWeight), mHeight);
  28. 		mPriView.layout((int)(mWidth * mMenuWeight), 0, mWidth, mHeight);
  29. 	}
  31. 	@Override
  32. 	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  33. 		System.out.println("运行了onMeasure");
  34. 		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  35. 		/*
  36. 		 * onMeasure传入的两个參数是由上一层控件传入的大小，有多种情况，重写该方法时须要对计算控件的实际大小，
  37. 		 * 然后调用setMeasuredDimension(int, int)设置实际大小。
  38. 		 * onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值，而是将模式和尺寸组合在一起的数值。
  39. 		 * 我们须要通过int mode = MeasureSpec.getMode(widthMeasureSpec)得到模式，
  40. 		 * 用int size = MeasureSpec.getSize(widthMeasureSpec)得到尺寸。
  41. 		 * mode共同拥有三种情况，取值分别为MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY, MeasureSpec.AT_MOST。
  42. 		 * MeasureSpec.EXACTLY是精确尺寸，当我们将控件的layout_width或layout_height指定为详细数值时如andorid:layout_width="50dip"，或者为FILL_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。
  43. 		 * MeasureSpec.AT_MOST是最大尺寸，当控件的layout_width或layout_height指定为WRAP_CONTENT时，控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸仅仅要不超过父控件同意的最大尺寸就可以。因此，此时的mode是AT_MOST，size给出了父控件同意的最大尺寸。
  44. 		 * MeasureSpec.UNSPECIFIED是未指定尺寸，这样的情况不多，一般都是父控件是AdapterView，通过measure方法传入的模式。
  45. 		 */
  46. 		mWidth = MeasureSpec.getSize(widthMeasureSpec);  //获取MyScrollView的宽度
  47. 		mHeight = MeasureSpec.getSize(heightMeasureSpec); //获取MyScrollView的高度
  48. 	}
  50. 	/**设置右滑的菜单View*/
  51. 	public void setMenu(View menu){
  52. 		mMenuView = menu;
  53. 		addView(mMenuView);
  54. 	}
  56. 	/**
  57. 	 * 设置主界面View
  58. 	 */
  59. 	public void setPrimary(View primary){
  60. 		mPriView = primary;
  61. 		addView(mPriView);
  62. 	}
  64. }

第二步：按须要设置界面位置
 

  1. 	@Override
  2. 	protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
  3. 		mMenuView.layout(-(int)(mWidth * mMenuWeight), 0, 0, mHeight);
  4. 		mPriView.layout(0, 0, mWidth, mHeight);
  5. 	}

第三步：实现左右滑动

  1. package com.example.testscrollto;
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.view.MotionEvent;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.Scroller;
  10. public class MyScrollView extends ViewGroup{
  12. 	private Context mContext;
  13. 	private int mWidth;
  14. 	private int mHeight;
  16. 	private float mMenuWeight = 3.0f / 5; //菜单界面比例
  18. 	private View mMenuView;   //菜单界面
  19. 	private View mPriView;	  //内容界面
  21. 	private boolean mIsShowMenu;
  23. 	private Scroller mScroller;
  25. 	public MyScrollView(Context context, AttributeSet attrs) {
  26. 		super(context, attrs);
  27. 		mContext = context;
  28. 		mScroller = new Scroller(mContext);
  29. 	}
  31. 	@Override
  32. 	protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
  33. 		mMenuView.layout(-(int)(mWidth * mMenuWeight), 0, 0, mHeight);
  34. 		mPriView.layout(0, 0, mWidth, mHeight);
  35. 	}
  37. 	@Override
  38. 	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  39. 		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  40. 		mWidth = MeasureSpec.getSize(widthMeasureSpec);  //获取MyScrollView的宽度
  41. 		mHeight = MeasureSpec.getSize(heightMeasureSpec); //获取MyScrollView的高度
  42. 	}
  44. 	/**设置右滑的菜单View*/
  45. 	public void setMenu(View menu){
  46. 		mMenuView = menu;
  47. 		addView(mMenuView);
  48. 	}
  50. 	/**
  51. 	 * 设置主界面View
  52. 	 */
  53. 	public void setPrimary(View primary){
  54. 		mPriView = primary;
  55. 		addView(mPriView);
  56. 	}
  58. 	private float mDownX;
  60. 	@Override
  61. 	public boolean onTouchEvent(MotionEvent event) {
  62. 		float x = event.getX();
  63. 		switch (event.getAction()) {
  64. 		case MotionEvent.ACTION_DOWN:
  65. 			System.out.println("ACTION_DOWN");
  66. 			mDownX = x;          //记录按下时的x坐标
  67. 			break;
  68. 		case MotionEvent.ACTION_UP:
  69. 			System.out.println("ACTION_UP");
  70. 			int dis = (int) (x - mDownX);   //滑动的距离
  71. 			if(Math.abs(dis) > (mWidth * mMenuWeight / 2)){
  72. 				if(dis > 0){          //假设>0则是向右滑动
  73. 					showMenu();
  74. 				}else{				  //假设<0则是向左滑动
  75. 					hideMenu();
  76. 				}
  77. 			}
  78. 			break;
  79. 		default:
  80. 			break;
  81. 		}
  83. 		return true;
  84. 	}
  86. 	@Override
  87. 	public void computeScroll() {
  88. 		super.computeScroll();
  89. 		if(mScroller.computeScrollOffset()){
  90. 			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
  91. 			postInvalidate();
  92. 		}
  93. 	}
  95. 	public boolean isShowMenu(){
  96. 		return mIsShowMenu;
  97. 	}
  99. 	public void showMenu(){
  100. 		 if(mIsShowMenu){
  101. 			 return;
  102. 		 }
  103. 		 mIsShowMenu = true;  //标记菜单已经显示
  104. 		 int dx = (int)(mWidth * mMenuWeight);  //滑动到目标位置的距离
  105. 		 mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);
  106. 		 invalidate();
  107. 	}
  109. 	public void hideMenu(){
  110. 		if(!mIsShowMenu){
  111. 			return;
  112. 		}
  113. 		mIsShowMenu = false;
  114. 		int dx = (int)(mWidth * mMenuWeight);
  115. 		mScroller.startScroll(getScrollX(), 0, dx, 0, 500);
  116. 		invalidate();
  117. 	}
  119. }

从上面代码中能够看到以下两句代码触发computeScroll()方法 

  1. mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);
  2. invalidate();

第四步：加入窗体状态切换监听接口 

  1. 	public interface OnMenuChangedListener{
  2. 		 public void onChanged(boolean isShow);
  3. 	}	
  5. 	public void setOnMenuChangedListener(OnMenuChangedListener listener){
  6. 		mListener = listener;
  7. 	}

将showMenu()方法和hideMenu()方法改动例如以下： 

  1. 	public void showMenu(){
  2. 		 if(mIsShowMenu){
  3. 			 return;
  4. 		 }
  5. 		 mIsShowMenu = true;
  6. 		 int dx = (int)(mWidth * mMenuWeight);
  7. 		 mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);
  8. 		 if(mListener != null){
  9. 			 mListener.onChanged(mIsShowMenu);
  10. 		 }
  11. 		 invalidate();
  12. 	}
  14. 	public void hideMenu(){
  15. 		if(!mIsShowMenu){
  16. 			return;
  17. 		}
  18. 		mIsShowMenu = false;
  19. 		int dx = (int)(mWidth * mMenuWeight);
  20. 		mScroller.startScroll(getScrollX(), 0, dx, 0, 500);
  21. 		 if(mListener != null){
  22. 			 mListener.onChanged(mIsShowMenu);
  23. 		 }
  24. 		 invalidate();
  25. 	}

在MainActivity中加入监听 

  1. 		mScrollView.setOnMenuChangedListener(new OnMenuChangedListener() {
  3. 			@Override
  4. 			public void onChanged(boolean isShow) {
  5. 				System.out.println("窗体切换了一次");
  6. 			}
  7. 		});

第五步：依据详细业务及需求实现菜单列表及界面（直接贴出代码）

MainActivity.java

  1. package com.example.testrefreshview;
  3. import android.app.Activity;
  4. import android.graphics.Color;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.view.View.OnClickListener;
  8. import android.widget.AdapterView;
  9. import android.widget.AdapterView.OnItemClickListener;
  10. import android.widget.ArrayAdapter;
  11. import android.widget.Button;
  12. import android.widget.ListView;
  14. import com.example.testrefreshview.RightScrollView.OnMenuChangedListener;
  16. /**
  17.  * 測试具有右滑菜单功能的ViewGroup，RigthScrollView
  18.  *@author Lqh
  19.  */
  20. public class MainActivity extends Activity {
  22. 	private RightScrollView mRightScrollView;
  23. 	private Button mShowMenuBtn;
  24. 	private ListView mMenuList;
  25. 	private ArrayAdapter<String> mAdapter;
  26. 	private String[] menus = {"附近的人", "我的资料", "设置", "游戏", "即时聊天"};
  28. 	@Override
  29. 	protected void onCreate(Bundle savedInstanceState) {
  30. 		super.onCreate(savedInstanceState);
  31. 		setContentView(R.layout.rightscrollview_test);
  32. 		mRightScrollView = (RightScrollView)findViewById(R.id.rightscrollview);
  33. 		final View menu = getLayoutInflater().inflate(R.layout.rightscrollview_menu, null);
  34. 		final View primary = getLayoutInflater().inflate(R.layout.rightscrollview_primary, null);
  35. 		mMenuList = (ListView) menu.findViewById(R.id.list_right_menu);
  36. 		mShowMenuBtn = (Button) primary.findViewById(R.id.btn_showmenu);
  37. 		mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, menus);
  38. 		mMenuList.setAdapter(mAdapter);
  40. 		mShowMenuBtn.setOnClickListener(new OnClickListener() {
  41. 			public void onClick(View v) {
  42. 				if(mRightScrollView.isShowMenu()){
  43. 					mRightScrollView.hideMenu();
  44. 				}else{
  45. 					mRightScrollView.showMenu();
  46. 				}
  47. 			}
  48. 		});
  50. 		mRightScrollView.setOnMenuChangedListener(new OnMenuChangedListener() {
  51. 			public void onChanged(boolean isShow) {
  52. 				if(isShow){
  53. 					mShowMenuBtn.setText("隐藏菜单");
  54. 				}else{
  55. 					mShowMenuBtn.setText("显示菜单");
  56. 				}
  57. 			}
  58. 		});
  60. 		mRightScrollView.setMenu(menu);
  61. 		mRightScrollView.setPrimary(primary);
  63. 		mMenuList.setOnItemClickListener(new OnItemClickListener() {
  64. 			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  65. 				switch(position){
  66. 				case 0:
  67. 					primary.setBackgroundColor(Color.CYAN);
  68. 					break;
  69. 				case 1:
  70. 					primary.setBackgroundColor(Color.BLUE);
  71. 					break;
  72. 				case 2:
  73. 					primary.setBackgroundColor(Color.GRAY);
  74. 					break;
  75. 				case 3:
  76. 					primary.setBackgroundColor(Color.MAGENTA);
  77. 					break;
  78. 				case 4:
  79. 					primary.setBackgroundColor(Color.YELLOW);
  80. 					break;
  81. 				}
  82. 				mRightScrollView.hideMenu();
  83. 			}
  84. 		});
  86. 	}
  87. }

RightScrollView.java 

  1. package com.example.testrefreshview;
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.view.MotionEvent;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.Scroller;
  10. /**
  11.  * 具有右滑菜单的ViewGroup，相似于Facebook的主界面
  12.  * @author Lqh
  13.  */
  14. public class RightScrollView extends ViewGroup {
  16. 	private Context mContext;
  17. 	private Scroller mScroller;
  18. 	private View mMenuView;
  19. 	private View mPriView;
  20. 	private int mWidth;
  21. 	private int mHeight;
  22. 	private boolean mIsShowMenu;
  23. 	private float mMenuWeight = 3.0f / 5;
  24. 	private OnMenuChangedListener mListener;
  26. 	public RightScrollView(Context context) {
  27. 		this(context, null);
  28. 	}
  30. 	public RightScrollView(Context context, AttributeSet attrs) {
  31. 		super(context, attrs);
  33. 		mContext = context;
  34. 		mScroller = new Scroller(mContext);
  36. 	}
  38. 	/**设置右滑的菜单View*/
  39. 	public void setMenu(View menu){
  40. 		mMenuView = menu;
  41. 		addView(mMenuView);
  42. 	}
  44. 	/**
  45. 	 * 设置主界面View
  46. 	 */
  47. 	public void setPrimary(View primary){
  48. 		mPriView = primary;
  49. 		addView(mPriView);
  50. 	}
  52. 	public boolean isShowMenu(){
  53. 		return mIsShowMenu;
  54. 	}
  56. 	public void setOnMenuChangedListener(OnMenuChangedListener listener){
  57. 		mListener = listener;
  58. 	}
  60. 	public void showMenu(){
  61. 		 if(mIsShowMenu){
  62. 			 return;
  63. 		 }
  64. 		 mIsShowMenu = true;
  65. 		 int dx = (int)(mWidth * mMenuWeight);
  66. 		 mScroller.startScroll(getScrollX(), 0, -dx, 0, 500);
  67. 		 if(mListener != null){
  68. 			 mListener.onChanged(mIsShowMenu);
  69. 		 }
  70. 		 invalidate();
  71. 	}
  73. 	public void hideMenu(){
  74. 		if(!mIsShowMenu){
  75. 			return;
  76. 		}
  77. 		mIsShowMenu = false;
  78. 		int dx = (int)(mWidth * mMenuWeight);
  79. 		mScroller.startScroll(getScrollX(), 0, dx, 0, 500);
  80. 		 if(mListener != null){
  81. 			 mListener.onChanged(mIsShowMenu);
  82. 		 }
  83. 		 invalidate();
  84. 	}
  86. 	private float mDownX;
  88. 	@Override
  89. 	public boolean onTouchEvent(MotionEvent event) {
  91. 		float x = event.getX();
  93. 		switch(event.getAction()){
  94. 		case MotionEvent.ACTION_DOWN:
  95. 			mDownX = x;
  96. 			break;
  97. 		case MotionEvent.ACTION_UP:
  98. 			int dis = (int) (x - mDownX);
  99. 			if(Math.abs(dis) > (mWidth * mMenuWeight / 2)){
  100. 				if(dis > 0){
  101. 					showMenu();
  102. 				}else{
  103. 					hideMenu();
  104. 				}
  105. 			}
  106. 			break;
  107. 		}
  109. 		return true;
  110. 	}
  112. 	 @Override
  113. 	public void computeScroll() {
  114. 		super.computeScroll();
  115. 		if(mScroller.computeScrollOffset()){
  116. 			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
  117. 			postInvalidate();
  118. 		}
  119. 	}
  121. 	@Override
  122. 	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  124. 		mWidth = MeasureSpec.getSize(widthMeasureSpec);
  125. 		mHeight = MeasureSpec.getSize(heightMeasureSpec);
  127. 		setMeasuredDimension(mWidth, mHeight);
  128. 		int widthSpec = MeasureSpec.makeMeasureSpec((int)(mWidth * mMenuWeight), MeasureSpec.EXACTLY);
  129. 		int heightSpec = MeasureSpec.makeMeasureSpec(mHeight, MeasureSpec.EXACTLY);
  130. 		mMenuView.measure(widthSpec, heightSpec);
  132. 		widthSpec = MeasureSpec.makeMeasureSpec(mWidth, MeasureSpec.EXACTLY);
  133. 		mPriView.measure(widthSpec, heightSpec);
  134. 	}
  136. 	@Override
  137. 	protected void onLayout(boolean changed, int l, int t, int r, int b) {
  139. 		mMenuView.layout(-(int)(mWidth * mMenuWeight), 0, 0, mHeight);
  140. 		mPriView.layout(0, 0, mWidth, mHeight);
  141. 	}
  143. 	 public interface OnMenuChangedListener{
  144. 		 public void onChanged(boolean isShow);
  145. 	 }
  147. }

运行效果：

源码下载：http://download.csdn.net/detail/lxq_xsyu/7231677

Android自己定义组件系列【3】——自己定义ViewGroup实现側滑的更多相关文章

  1. Android自己定义组件系列【7】——进阶实践（4）

    上一篇<Android自己定义组件系列[6]--进阶实践(3)>中补充了关于Android中事件分发的过程知识.这一篇我们接着来分析任老师的<可下拉的PinnedHeaderExpa ...

  2. Android自己定义组件系列【6】——进阶实践（3）

    上一篇<Android自己定义组件系列[5]--进阶实践(2)>继续对任老师的<可下拉的PinnedHeaderExpandableListView的实现>进行了分析,这一篇计 ...

  3. Android自己定义组件系列【5】——进阶实践（2）

    上一篇<Android自己定义组件系列[5]--进阶实践(1)>中对任老师的<可下拉的PinnedHeaderExpandableListView的实现>前一部分进行了实现,这 ...

  4. Android自己定义组件系列【4】——自己定义ViewGroup实现双側滑动

    在上一篇文章<Android自己定义组件系列[3]--自己定义ViewGroup实现側滑>中实现了仿Facebook和人人网的側滑效果,这一篇我们将接着上一篇来实现双面滑动的效果. 1.布 ...

  5. Android自己定义组件系列【2】——Scroller类

    在上一篇中介绍了View类的scrollTo和scrollBy两个方法,对这两个方法不太了解的朋友能够先看<自己定义View及ViewGroup> scrollTo和scrollBy尽管实 ...

  6. Android自己定义组件系列【1】——自己定义View及ViewGroup

    View类是ViewGroup的父类,ViewGroup具有View的全部特性.ViewGroup主要用来充当View的容器.将当中的View作为自己孩子,并对其进行管理.当然孩子也能够是ViewGr ...

  7. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  8. Android自己定义组件系列【5】——高级实践（1）

    在接下来的几篇文章将任老师的博文<您可以下拉PinnedHeaderExpandableListView实现>骤来具体实现.来学习一下大神的代码并记录一下. 原文出处:http://blo ...

  9. Android自己定义组件系列【8】——面膜文字动画

    我们掩盖文字动画Flash中非经货共同体共同,由于Android应用程序开发人员做你想要做这个动画在应用程序中去?本文中,我们看的是如何自己的定义ImageView来实现让一张文字图片实现文字的遮罩闪 ...

随机推荐

  1. 分享一个自己写的vue多语言插件smart-vue-i18n

    前言 目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压 ...

  2. java基础32 List集合下的ArrayList集合

    单例集合体系: ---------| collection  单例集合的根接口--------------| List  如果实现了list接口的集合类,具备的特点:有序,可重复       注:集合 ...

  3. 3.Springboot之修改启动时的默认图案Banner

    一.SpringBoot的默认启动图案 在SpringBoot启动的时候,默认的会展示出一个spring的logo,这个图案我们用户是可以自定义的 二.自定义启动图案 方法一: Application ...

  4. HDU 3374 String Problem(KMP+最大(最小)表示)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题目大意:给出一个字符串,依次左移一个单位形成一堆字符串,求其字典序最小和最大的字符串需要左移多 ...

  5. **PHP错误Cannot use object of type stdClass as array in错误的

    错误:将PHP对象类型当做了PHP数组  解决方法:用对象操作符-> 今天在PHP输出一个二维数组的时候,出现了“Fatal error: Cannot use object of type s ...

  6. INNODB表快速迁移

    本实验在一台server上启动了2个mysql实例端口分别是3307   3308,目的是将3307的表aaa迁移到3308中去,并打开3308的slave 1.在3308上 mysql> dr ...

  7. day7 面向对象进阶

    面向对象高级语法部分 通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法,可以在实例化后直接调用,并且在方法里可以通过self.调用实例 ...

  8. Codeforces Round #239 (Div. 1) 二项式差分

    C - Curious Array 思路:对于区间[l, r]每个数加上C(i - l + k, k), 可以在l处+1, 在r+1处-1, 然后做k+1次求前缀和操作,然后就可以写啦. 然后逐层求前 ...

  9. ubuntu 安装 theano

    参考博客: http://www.cnblogs.com/anyview/p/5025704.html 1. 安装gfortran, numpy, scipy, sklearn, blas, atla ...

  10. Python实现代码行数统计工具

    我们经常想要统计项目的代码行数,但是如果想统计功能比较完善可能就不是那么简单了, 今天我们来看一下如何用python来实现一个代码行统计工具. 思路:首先获取所有文件,然后统计每个文件中代码的行数,最 ...