有关自己定义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. git —— bug分支

    储藏工作现场 $ git stash 切换到需要修改bug的分支,创建临时分支 修复bug,修复完提交 修复完之后,切换到需要修改的分支.完成合并 合并后删除临时分支 完成后,可以重新回到没有修改完的 ...

  2. python基础学习之路No.4 数据转换以及操作

    练习python的时候经常会用到一些不同数据类型之间的转换操作 搜集了一些资料,整理如下 函数 描述 int(x [,base]) 将x转换为一个整数 long(x [,base] ) 将x转换为一个 ...

  3. JavaScript之MV*模式

    前言 在前端技术的快速发展过程中,MVC(模型-视图-控制器).MVP(模型-视图-表示器)和MVVM(模型-视图-视图模型)也得到了很多使用.然而,这三种框架模式非常相似,不易分清,易于混淆.本文重 ...

  4. sql server 约束 查找

    --1.主键约束 SELECT tab.name AS [表名], idx.name AS [主键名称], col.name AS [主键列名] FROM sys.indexes idx JOIN s ...

  5. 在SQL中有时候我们需要查看现在正在SQL Server执行的命令

    在SQL中有时候我们需要查看现在正在SQL Server执行的命令.在分析管理器或者Microsoft SQL Server Management Studio中,我们可以在"管理-SQL  ...

  6. MySQL学习笔记：生成时间维度表

    # ---- 对应时间戳怎么生成的? ---- /*TIME_CD TIME_CD1000000 000005000001 000005000002 000005000003 000005000004 ...

  7. CVE-2010-2553 Microsoft Windows Cinepak 编码解码器解压缩漏洞 分析

      Microsoft Windows是微软发布的非常流行的操作系统.         Microsoft Windows XP SP2和SP3,Windows Vista SP1和SP2,以及Win ...

  8. Pg168-1

    1.Pg168-1 package org.hanqi.pn0120; public class Computer { private double neicundx=10; public doubl ...

  9. https页面打不开

    https://blog.csdn.net/leedaning/article/details/71552625

  10. abp zero 4.3 发布

    Demo URL: http://abpzerodemo.demo.aspnetzero.com Username: systemPassword: 123456 需要源码,请加QQ:3833-255 ...