码迷，mamicode.com
首页 > 其他好文 > 详细

1.自定义控件（一）

时间：2015-12-05 17:43:49      阅读：287      评论：0      收藏：0      [点我收藏+]

标签：

自定义控件大概分这三种
1、使用系统控件，实现自定义的效果

2、自己定义一个类继承View ，实现特定的效果

3、自定义属性：给自己的控件，添加自己的属性
4、自己定义一个类继承ViewGroup，实现相应的效果

使用系统控件组合成新的控件
1.优酷菜单
技术分享
布局就是三个RelativeLayout，要先声明做为基准的view对象。
activity_main.xml
  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.     tools:context=".MainActivity
  6. //第三个
  7.     <RelativeLayout
  8.         android:id="@+id/level3"
  9.         android:layout_width="280dp"
  10.         android:layout_height="140dp"
  11.         android:layout_alignParentBottom="true"
  12.         android:layout_centerHorizontal="true"
  13.         android:background="@drawable/level3" >
  14.         
  15.         <ImageView 
  16.             android:id="@+id/channel1"
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="wrap_content"
  19.             android:background="@drawable/channel1"
  20.             android:layout_alignParentBottom="true"
  21.             android:layout_marginLeft="10dp"
  22.             android:layout_marginBottom="10dp"
  23.             />
  24.         
  25.         <ImageView
  26.             android:id="@+id/channel2"
  27.             android:layout_width="wrap_content"
  28.             android:layout_height="wrap_content"
  29.             android:layout_above="@id/channel1"
  30.             android:layout_alignLeft="@id/channel1"
  31.             android:layout_marginBottom="6dp"
  32.             android:layout_marginLeft="20dp"
  33.             android:background="@drawable/channel2" />
  34.         
  35.         <ImageView
  36.             android:id="@+id/channel3"
  37.             android:layout_width="wrap_content"
  38.             android:layout_height="wrap_content"
  39.             android:layout_above="@id/channel2"
  40.             android:layout_alignLeft="@id/channel2"
  41.             android:layout_marginBottom="6dp"
  42.             android:layout_marginLeft="30dp"
  43.             android:background="@drawable/channel3" />
  44.         <ImageView
  45.             android:id="@+id/channel4"
  46.             android:layout_width="wrap_content"
  47.             android:layout_height="wrap_content"
  48.             android:layout_centerHorizontal="true"
  49.             android:layout_marginTop="5dp"
  50.             android:background="@drawable/channel4" />

  52.         <ImageView 
  53.             android:id="@+id/channel7"
  54.             android:layout_width="wrap_content"
  55.             android:layout_height="wrap_content"
  56.             android:background="@drawable/channel7"
  57.             android:layout_alignParentBottom="true"
  58.             android:layout_alignParentRight="true"
  59.             android:layout_marginBottom="10dp"
  60.             android:layout_marginRight="10dp"
  61.             />
  62.       
  63.             
  64.         <ImageView
  65.             android:id="@+id/channel6"
  66.             android:layout_width="wrap_content"
  67.             android:layout_height="wrap_content"
  68.             android:layout_above="@id/channel7"
  69.             android:layout_alignRight="@id/channel7"
  70.             android:layout_marginBottom="6dp"
  71.             android:layout_marginRight="20dp"
  72.             android:background="@drawable/channel6" />
  73.         
  74.         
  75.         <ImageView
  76.             android:id="@+id/channel5"
  77.             android:layout_width="wrap_content"
  78.             android:layout_height="wrap_content"
  79.             android:layout_above="@id/channel6"
  80.             android:layout_alignRight="@id/channel6"
  81.             android:layout_marginBottom="6dp"
  82.             android:layout_marginRight="30dp"
  83.             android:background="@drawable/channel5" />
  84.     </RelativeLayout>
  86. </RelativeLayout>
MyUtils
RotateAnim 动画的定义，默认的旋转圆心是从标原点，水平向右为0度，角度按顺时针方向增加。
技术分享
  1. public class MyUtils {
  3. 	/**
  4. 	 * 让指定的view 执行 旋转离开的动画
  5. 	 * @param view
  6. 	 */
  7. 	public static void startAnimOut(RelativeLayout view) {
  8. 		
  9. 		startAnimOut(view, 0);
  10. 	}
  13. 	/**
  14. 	 * 让指定view 延时 执行旋转离开的动画，
  15. 	 * @param level3
  16. 	 * @param offset	延时的时间
  17. 	 */
  18. 	public static void startAnimOut(RelativeLayout view, long offset) {
  19. 		/*
  20. 		 * 默认圆为 为view的左上角，
  21. 		 * 水平向右 为 0度
  22. 		 * 顺时针旋转度数增加
  23. 		 */
  24. 		RotateAnimation animation  =new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());
  25. 		animation.setDuration(500);	//	设置运行的时间
  26. 		animation.setFillAfter(true);	//动画执行完以后，保持最后的状态
  27. 		animation.setStartOffset(offset);	// 设置延时执行的时间
  28. 		
  29. 		view.startAnimation(animation);
  30. 		
  31. 	}
  32. 	
  33. 	
  34. 	
  35. 	/**
  36. 	 * 让指定的view 执行 旋转进入的动画
  37. 	 * @param view
  38. 	 */
  39. 	public static void startAnimIn(RelativeLayout view) {
  40. 		
  41. 		startAnimIn(view, 0);
  42. 	}
  44. 	/**
  45. 	 * 让指定的view 延时执行 旋转进入的动画
  46. 	 * @param level2
  47. 	 * @param i	延时的时间
  48. 	 */
  49. 	public static void startAnimIn(RelativeLayout view, int i) {
  50. 		/*
  51. 		 * 默认圆为 为view的左上角，
  52. 		 * 水平向右 为 0度
  53. 		 * 顺时针旋转度数增加
  54. 		 */
  55. 		RotateAnimation animation  =new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());
  56. 		animation.setDuration(500);	//	设置运行的时间
  57. 		animation.setFillAfter(true);	//动画执行完以后，保持最后的状态
  58. 		animation.setStartOffset(i);	//设置延时执行的时间
  59. 		view.startAnimation(animation);
  60. 			
  61. 	}
  63. }
MainActivity：isLevel3Show = !isLevel3Show是个好方法，当点击按钮时值变化
  1. public class MainActivity extends Activity implements OnClickListener {
  2. 	private ImageView icon_menu;
  3. 	private ImageView icon_home;
  4. 	
  5. 	private RelativeLayout level1;
  6. 	private RelativeLayout level2;
  7. 	private RelativeLayout level3;
  8. 	/**
  9. 	 * 判断 第3级菜单是否显示
  10. 	 * true 为显示
  11. 	 */
  12. 	private boolean isLevel3Show = true;
  13. 	/**
  14. 	 * 判断 第2级菜单是否显示
  15. 	 * true 为显示
  16. 	 */
  17. 	private boolean isLevel2Show = true;
  18. 	/**
  19. 	 * 判断 第1级菜单是否显示
  20. 	 * true 为显示
  21. 	 */
  22. 	private boolean isLevel1show = true;
  23. 	
  24. 	@Override
  25. 	protected void onCreate(Bundle savedInstanceState) {
  26. 		super.onCreate(savedInstanceState);
  27. 		setContentView(R.layout.activity_main);
  28. 		
  29. 		icon_home = (ImageView) findViewById(R.id.icon_home);
  30. 		icon_menu = (ImageView) findViewById(R.id.icon_menu);
  31. 		
  32. 		level1 = (RelativeLayout) findViewById(R.id.level1);
  33. 		level2 = (RelativeLayout) findViewById(R.id.level2);
  34. 		level3 = (RelativeLayout) findViewById(R.id.level3);
  35. 		
  36. 		icon_home.setOnClickListener(this);
  37. 		icon_menu.setOnClickListener(this);
  38. 		
  39. 	}
  41. 	@Override
  42. 	public void onClick(View v) {
  43. 		switch (v.getId()) {
  44. 		case R.id.icon_menu:	//处理 menu 图标的点击事件
  45. 			// 如果第3级菜单是显示状态，那么将其隐藏
  46. 			if(isLevel3Show){
  47. 				//隐藏 第3级菜单
  48. 				MyUtils.startAnimOut(level3);
  49. 			}else{
  50. 				// 如果第3级菜单是隐藏状态，那么将其显示
  51. 				MyUtils.startAnimIn(level3);
  52. 			}
  53. 			
  54. 			isLevel3Show = !isLevel3Show;
  55. 			
  56. 			break;
  57. 		case R.id.icon_home:	//处理 home 图标 的点击事件
  58. 			// 如果第2级菜单是显示状态，那么就隐藏，2，3级菜单
  59. 			if(isLevel2Show ){
  60. 				MyUtils.startAnimOut(level2);
  61. 				isLevel2Show = false;
  62. 				
  63. 				if(isLevel3Show){ // 如果此时，第3级菜单也显示，那也将其隐藏
  64. 					MyUtils.startAnimOut(level3,200);
  65. 					isLevel3Show = false;
  66. 				}
  67. 				
  68. 			}else{
  69. 				// 如果第2级菜单是隐藏状态，那么就显示2级菜单
  70. 				MyUtils.startAnimIn(level2);
  71. 				isLevel2Show = true;
  72. 			}
  73. 			
  74. 			break;
  75. 		}
  76. 	}
  78. 	/**
  79. 	 * 改变第1级菜单的状态
  80. 	 */
  81. 	private void changeLevel1State() {
  82. 		//如果第1级菜单是显示状态，那么就隐藏 1，2，3级菜单 
  83. 		if(isLevel1show){
  84. 			MyUtils.startAnimOut(level1);
  85. 			isLevel1show = false;
  86. 			
  87. 			if(isLevel2Show){ // 判断2级菜单是否显示
  88. 				MyUtils.startAnimOut(level2,100);
  89. 				isLevel2Show = false;
  90. 				if(isLevel3Show){ // 判断3级菜单是否显示
  91. 					MyUtils.startAnimOut(level3,200);
  92. 					isLevel3Show = false;
  93. 				}
  94. 			}
  95. 			
  96. 		}else{
  97. 			//如果第1级菜单是隐藏状态，那么就显示 1，2级菜单 
  98. 			MyUtils.startAnimIn(level1);
  99. 			isLevel1show = true;
  100. 			
  101. 			MyUtils.startAnimIn(level2,200);
  102. 			isLevel2Show = true;
  103. 			
  104. 		}
  105. 		
  106. 	}
  107. 	
  108. 	@Override
  109. 	/**
  110. 	 * 响应按键的动作
  111. 	 */
  112. 	public boolean onKeyDown(int keyCode, KeyEvent event) {
  113. 	if(keyCode == KeyEvent.KEYCODE_MENU){ // 监听 menu 按键
  114. 		changeLevel1State();
  115. 	}
  116. 		return super.onKeyDown(keyCode, event);
  117. 	}
  119. }
2.ViewPager轮播
MainActivity
#33000000 半透明背景
自动轮播方法重点看看
  1. public class MainActivity extends Activity {
  3. 	private ViewPager viewPager;
  5. 	private LinearLayout pointGroup;
  7. 	private TextView iamgeDesc;
  9. 	// 图片资源ID
  10. 	private final int[] imageIds = { R.drawable.a, R.drawable.b, R.drawable.c,
  11. 			R.drawable.d, R.drawable.e };
  13.     //图片标题集合
  14. 	private final String[] imageDescriptions = {
  15. 			"巩俐不低俗，我就不能低俗",
  16. 			"扑树又回来啦！再唱经典老歌引万人大合唱",
  17. 			"揭秘北京电影如何升级",
  18. 			"乐视网TV版大派送",
  19. 			"热血屌丝的反杀"
  20. 	};
  21. 	
  22. 	
  23. 	private ArrayList<ImageView> imageList;
  25. 	/**
  26. 	 * 上一个页面的位置
  27. 	 */
  28. 	protected int lastPosition;
  29. 	
  30. 	
  31. 	@Override
  32. 	protected void onCreate(Bundle savedInstanceState) {
  33. 		super.onCreate(savedInstanceState);
  34. 		setContentView(R.layout.activity_main);
  36. 		viewPager = (ViewPager) findViewById(R.id.viewpager);
  37. 		pointGroup = (LinearLayout) findViewById(R.id.point_group);
  38. 		iamgeDesc = (TextView) findViewById(R.id.image_desc);
  39. 		iamgeDesc.setText(imageDescriptions[0]);
  40. 		
  41. 		
  42. 		imageList = new ArrayList<ImageView>();
  43. 		for (int i = 0; i <imageIds.length; i++) {
  44. 			
  45. 			
  46. 			//初始化图片资源
  47. 			ImageView image = new ImageView(this);
  48. 			image.setBackgroundResource(imageIds[i]);
  49. 			imageList.add(image);
  50. 			
  51. 			//添加指示点
  52. 			ImageView point =new ImageView(this);
  53. 			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
  54. 					LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
  55. 			
  56. 			params.rightMargin = 20;
  57. 			point.setLayoutParams(params);
  58. 			
  59. 			point.setBackgroundResource(R.drawable.point_bg);
  60. 			if(i==0){
  61. 				point.setEnabled(true);
  62. 			}else{
  63. 				point.setEnabled(false);
  64. 			}
  65. 			pointGroup.addView(point);
  66. 		}
  67. 		
  68. 		 viewPager.setAdapter(new MyPagerAdapter());
  69. 		 
  70. //		 viewPager.setCurrentItem(Integer.MAX_VALUE/2 - (Integer.MAX_VALUE/2%imageList.size())) ;
  71. 		 
  72. 		 viewPager.setOnPageChangeListener(new OnPageChangeListener() {
  73. 			
  75. 			@Override
  76. 			/**
  77. 			 * 页面切换后调用 
  78. 			 * position  新的页面位置
  79. 			 */
  80. 			public void onPageSelected(int position) {
  81. 				
  82. 				position = position%imageList.size();
  83. 				
  84. 				//设置文字描述内容
  85. 				iamgeDesc.setText(imageDescriptions[position]);
  86. 				
  87. 				//改变指示点的状态
  88. 				//把当前点enbale 为true 
  89. 				pointGroup.getChildAt(position).setEnabled(true);
  90. 				//把上一个点设为false
  91. 				pointGroup.getChildAt(lastPosition).setEnabled(false);
  92. 				lastPosition = position;
  93. 				
  94. 			}
  95. 			
  96. 			@Override
  97. 			/**
  98. 			 * 页面正在滑动的时候，回调
  99. 			 */
  100. 			public void onPageScrolled(int position, float positionOffset,
  101. 					int positionOffsetPixels) {
  102. 			}
  103. 			
  104. 			@Override
  105. 			/**
  106. 			 * 当页面状态发生变化的时候，回调
  107. 			 */
  108. 			public void onPageScrollStateChanged(int state) {
  109. 				
  110. 			}
  111. 		});
  112. 		 
  113. 		 /*
  114. 		  * 自动循环：
  115. 		  * 1、定时器：Timer
  116. 		  * 2、开子线程 while  true 循环
  117. 		  * 3、ColckManager 
  118. 		  * 4、 用handler 发送延时信息，实现循环
  119. 		  */
  120. 		 isRunning = true;
  121. //		 handler.sendEmptyMessageDelayed(0, 2000);
  122. 	}
  123. 	
  124. 	/**
  125. 	 * 判断是否自动滚动
  126. 	 */
  127. 	private boolean isRunning = false;
  128. 	
  129. 	private Handler handler = new Handler(){
  130. 		public void handleMessage(android.os.Message msg) {
  131. 			
  132. 			//让viewPager 滑动到下一页
  133. 			viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
  134. 			if(isRunning){
  135. 				handler.sendEmptyMessageDelayed(0, 2000);
  136. 			}
  137. 		};
  138. 	};
  139. 	
  140. 	protected void onDestroy() {
  141. 		
  142. 		isRunning = false;
  143. 	};
  145. 	private class MyPagerAdapter extends PagerAdapter {
  147. 		@Override
  148. 		/**
  149. 		 * 获得页面的总数
  150. 		 */
  151. 		public int getCount() {
  152. 			return Integer.MAX_VALUE;
  153. 		}
  155. 		@Override
  156. 		/**
  157. 		 * 获得相应位置上的view
  158. 		 * container  view的容器，其实就是viewpager自身
  159. 		 * position 	相应的位置
  160. 		 */
  161. 		public Object instantiateItem(ViewGroup container, int position) {
  162. 			
  163. 			System.out.println("instantiateItem  ::"+position);
  164. 			
  165. 			// 给 container 添加一个view
  166. 			container.addView(imageList.get(position%imageList.size()));
  167. 			//返回一个和该view相对的object
  168. 			return imageList.get(position%imageList.size());
  169. 		}
  171. 		@Override
  172. 		/**
  173. 		 * 判断 view和object的对应关系 
  174. 		 */
  175. 		public boolean isViewFromObject(View view, Object object) {
  176. 			if(view == object){
  177. 				return true;
  178. 			}else{
  179. 				return false;
  180. 			}
  181. 		}
  183. 		@Override
  184. 		/**
  185. 		 * 销毁对应位置上的object
  186. 		 */
  187. 		public void destroyItem(ViewGroup container, int position, Object object) {
  188. 			System.out.println("destroyItem  ::"+position);
  189. 			
  190. 			container.removeView((View) object);
  191. 			object = null;
  192. 		}
  193. 	}
  195. }
3.下拉框效果
技术分享
在editText的右边放置一个小箭头的图片，点击图片，在editText的下方弹出一个popupWindow，并对popupWindow进行一些设置即得到想要的效果。
popupWindow是个listview，重点是popupWindow的用法
MainActivity
  1. public class MainActivity extends Activity {
  3. 	private EditText input;
  4. 	
  5. 	private ImageView downArrow;
  6. 	
  7. 	
  8. 	private List<String> msgList;
  9. 	
  10. 	private PopupWindow popWin;
  12. 	private ListView listView;
  13. 	
  14. 	@Override
  15. 	protected void onCreate(Bundle savedInstanceState) {
  16. 		super.onCreate(savedInstanceState);
  17. 		setContentView(R.layout.activity_main);
  18. 		
  19. 		input = (EditText) findViewById(R.id.input);
  20. 		downArrow = (ImageView) findViewById(R.id.down_arrow);
  21. 		
  22. 		msgList = new ArrayList<String>();
  23. 	
  24. 		for (int i = 0; i < 20; i++) {
  25. 			msgList.add("1000000000"+i);
  26. 		}
  27. 		
  28. 		initListView();
  29. 		
  30. 		
  31. 		downArrow.setOnClickListener(new OnClickListener() {
  32. 			
  33. 			@Override
  34. 			public void onClick(View v) {
  35. 				
  36. 				System.out.println("=======");
  37. 				//定义 popupWindow
  38. 				popWin = new PopupWindow(MainActivity.this);
  39. 				popWin.setWidth(input.getWidth()); //设置宽度
  40. 				popWin.setHeight(200);	//设置popWin 高度
  41. 				
  42. 				popWin.setContentView(listView); //为popWindow填充内容
  43. 				popWin.setOutsideTouchable(true); // 点击popWin 以处的区域，自动关闭 popWin
  44. 				
  45. 				popWin.showAsDropDown(input, 0, 0);//设置 弹出窗口，显示的位置
  46. 				
  47. 			}
  48. 		});
  49. 	}
  51. 	private void initListView() {
  52. 		listView = new ListView(this);
  53. 		listView.setBackgroundResource(R.drawable.listview_background); //设置listView 背景
  54. 		listView.setDivider(null);	//设置条目之间的分隔线为null
  55. 		listView.setVerticalScrollBarEnabled(false); // 关闭
  56. 		listView.setAdapter(new MyListAdapter());
  57. 	}
  59. 	private class MyListAdapter extends BaseAdapter{
  61. 		@Override
  62. 		public int getCount() {
  63. 			return msgList.size();
  64. 		}
  66. 		@Override
  67. 		public Object getItem(int position) {
  68. 			return position;
  69. 		}
  71. 		@Override
  72. 		public long getItemId(int position) {
  73. 			return position;
  74. 		}
  76. 		@Override
  77. 		public View getView(final int position, View convertView, ViewGroup parent) {
  78. 			ViewHolder holder;
  79. 			if(convertView == null){
  80. 				convertView = View.inflate(getApplicationContext(), R.layout.list_item, null);
  81. 				holder = new ViewHolder();
  82. 				
  83. 				holder.delete = (ImageView) convertView.findViewById(R.id.delete);
  84. 				holder.tv_msg =(TextView) convertView.findViewById(R.id.tv_list_item);
  85. 				convertView.setTag(holder);
  86. 			}else{
  87. 				holder = (ViewHolder) convertView.getTag();
  88. 			}
  89. 			
  90. 			holder.tv_msg.setText(msgList.get(position));
  91. 			
  92. 			holder.delete.setOnClickListener(new OnClickListener() {
  93. 				
  94. 				@Override
  95. 				public void onClick(View v) {
  96. 				//删除对应的条目
  97. 					msgList.remove(position);
  98. 					
  99. 					//刷新listView
  100. 					MyListAdapter.this.notifyDataSetChanged();
  101. 				}
  102. 			});
  103. 			convertView.setOnClickListener(new OnClickListener() {
  104. 				
  105. 				@Override
  106. 				public void onClick(View v) {
  107. 					//设置输入框 
  108. 					input.setText(msgList.get(position));
  109. 					
  110. 					popWin.dismiss();
  111. 				}
  112. 			});
  113. 			
  114. 			return convertView;
  115. 		}
  116. 		}
  118. 	private class ViewHolder{
  119. 		TextView tv_msg;
  120. 		ImageView delete;
  121. 	}
  122. 	
  123. }





1.自定义控件（一）

标签：

原文地址：http://www.cnblogs.com/liuyu0529/p/5021875.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！