Android自定义控件
Posted Android、Boy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android自定义控件相关的知识，希望对你有一定的参考价值。
这一篇主要来讲一下自定义控件中的自定义viewgroup，我们以项目中最常用的下拉刷新和加载更多组件为例
简单介绍一下自定义viewgroup时应该怎么做。
分析：下拉刷新和加载更多的原理和步骤
自定义一个viewgroup，将headerview、contentview和footerview从上到下依次布局，然后在初始化的时候
通过Scrooller滚动使得该组件在y轴方向上滚动headerview的高度，这样headerview就被隐藏了。而contentview的
宽度和高度都是match_parent的，因此屏幕上 headerview和footerview就都被隐藏在屏幕之外了。当contentview被
滚动到顶部，如果此时用户继续下拉，那么下拉刷新组件将拦截触摸事件，然后根据用户的触摸事件获取到手指滑动的
y轴距离，并通过scroller将该下拉组件在y轴上滚动手指滑动的距离，实现headerview的显示和隐藏，从而达到下拉的效果
。当用户滑动到最底部时会触发加载更多的操作，此时会通过scroller滚动该下拉刷新组件，将footerview显示出来，实现加载更多
的效果。具体步骤如下：
第一步：初始化View即headerView contentView和footerView
第二步：测量三个view的大小，并计算出viewgroup的大小
第三步：布局，将三个view在界面上布局，按照上中下的顺序
第四步：监听屏幕的触摸事件，判断是否下拉刷新或者加载更多
第五步：触发下拉刷新和加载更多事件执行下拉刷新和加载更多
第六步：下拉刷新和加载更多执行完后的重置操作
示例代码：
自定义的viewgroup
1 package com.jiao.simpleimageview.view; 2 3 import android.content.Context; 4 import android.graphics.Color; 5 import android.support.v4.view.MotionEventCompat; 6 import android.util.AttributeSet; 7 import android.view.LayoutInflater; 8 import android.view.MotionEvent; 9 import android.view.View; 10 import android.view.ViewGroup; 11 import android.view.animation.RotateAnimation; 12 import android.widget.AbsListView; 13 import android.widget.AbsListView.OnScrollListener; 14 import android.widget.ImageView; 15 import android.widget.ProgressBar; 16 import android.widget.Scroller; 17 import android.widget.TextView; 18 19 import com.jiao.simpleimageview.R; 20 import com.jiao.simpleimageview.listener.OnLoadListener; 21 import com.jiao.simpleimageview.listener.OnRefreshListener; 22 23 import java.text.SimpleDateFormat; 24 import java.util.Date; 25 26 /** 27 * Created by jiaocg on 2016/3/24. 28 */ 29 public abstract class RefreshLayoutBase<T extends View> extends ViewGroup implements 30 OnScrollListener { 31 32 /** 33 * 34 */ 35 protected Scroller mScroller; 36 37 /** 38 * 下拉刷新时显示的header view 39 */ 40 protected View mHeaderView; 41 42 /** 43 * 上拉加载更多时显示的footer view 44 */ 45 protected View mFooterView; 46 47 /** 48 * 本次触摸滑动y坐标上的偏移量 49 */ 50 protected int mYOffset; 51 52 /** 53 * 内容视图, 即用户触摸导致下拉刷新、上拉加载的主视图. 比如ListView, GridView等. 54 */ 55 protected T mContentView; 56 57 /** 58 * 最初的滚动位置.第一次布局时滚动header的高度的距离 59 */ 60 protected int mInitScrollY = 0; 61 /** 62 * 最后一次触摸事件的y轴坐标 63 */ 64 protected int mLastY = 0; 65 66 /** 67 * 空闲状态 68 */ 69 public static final int STATUS_IDLE = 0; 70 71 /** 72 * 下拉或者上拉状态, 还没有到达可刷新的状态 73 */ 74 public static final int STATUS_PULL_TO_REFRESH = 1; 75 76 /** 77 * 下拉或者上拉状态 78 */ 79 public static final int STATUS_RELEASE_TO_REFRESH = 2; 80 /** 81 * 刷新中 82 */ 83 public static final int STATUS_REFRESHING = 3; 84 85 /** 86 * LOADING中 87 */ 88 public static final int STATUS_LOADING = 4; 89 90 /** 91 * 当前状态 92 */ 93 protected int mCurrentStatus = STATUS_IDLE; 94 95 /** 96 * header中的箭头图标 97 */ 98 private ImageView mArrowImageView; 99 /** 100 * 箭头是否向上 101 */ 102 private boolean isArrowUp; 103 /** 104 * header 中的文本标签 105 */ 106 private TextView mTipsTextView; 107 /** 108 * header中的时间标签 109 */ 110 private TextView mTimeTextView; 111 /** 112 * header中的进度条 113 */ 114 private ProgressBar mProgressBar; 115 /** 116 * 屏幕高度 117 */ 118 private int mScreenHeight; 119 /** 120 * Header 高度 121 */ 122 private int mHeaderHeight; 123 /** 124 * 下拉刷新监听器 125 */ 126 protected OnRefreshListener mOnRefreshListener; 127 /** 128 * 加载更多回调 129 */ 130 protected OnLoadListener mLoadListener; 131 132 /** 133 * @param context 134 */ 135 public RefreshLayoutBase(Context context) { 136 this(context, null); 137 } 138 139 /** 140 * @param context 141 * @param attrs 142 */ 143 public RefreshLayoutBase(Context context, AttributeSet attrs) { 144 this(context, attrs, 0); 145 } 146 147 /** 148 * @param context 149 * @param attrs 150 * @param defStyle 151 */ 152 public RefreshLayoutBase(Context context, AttributeSet attrs, int defStyle) { 153 super(context, attrs); 154 155 // 初始化Scroller对象 156 mScroller = new Scroller(context); 157 158 // 获取屏幕高度 159 mScreenHeight = context.getResources().getDisplayMetrics().heightPixels; 160 // header 的高度为屏幕高度的 1/4 161 mHeaderHeight = mScreenHeight / 4; 162 163 // 初始化整个布局 164 initLayout(context); 165 } 166 167 /** 168 * 第一步：初始化整个布局 169 * 170 * @param context 171 */ 172 private final void initLayout(Context context) { 173 // header view 174 setupHeaderView(context); 175 // 设置内容视图 176 setupContentView(context); 177 // 设置布局参数 178 setDefaultContentLayoutParams(); 179 // 添加mContentView 180 addView(mContentView); 181 // footer view 182 setupFooterView(context); 183 184 } 185 186 /** 187 * 初始化 header view 188 */ 189 protected void setupHeaderView(Context context) { 190 mHeaderView = LayoutInflater.from(context).inflate(R.layout.pull_to_refresh_header, this, 191 false); 192 mHeaderView 193 .setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, 194 mHeaderHeight)); 195 mHeaderView.setBackgroundColor(Color.RED); 196 mHeaderView.setPadding(0, mHeaderHeight - 100, 0, 0); 197 addView(mHeaderView); 198 199 // HEADER VIEWS 200 mArrowImageView = (ImageView) mHeaderView.findViewById(R.id.pull_to_arrow_image); 201 mTipsTextView = (TextView) mHeaderView.findViewById(R.id.pull_to_refresh_text); 202 mTimeTextView = (TextView) mHeaderView.findViewById(R.id.pull_to_refresh_updated_at); 203 mProgressBar = (ProgressBar) mHeaderView.findViewById(R.id.pull_to_refresh_progress); 204 } 205 206 207 /** 208 * 初始化Content View, 子类覆写. 209 */ 210 protected abstract void setupContentView(Context context); 211 212 /** 213 * 设置Content View的默认布局参数 214 */ 215 protected void setDefaultContentLayoutParams() { 216 ViewGroup.LayoutParams params = 217 new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, 218 LayoutParams.MATCH_PARENT); 219 mContentView.setLayoutParams(params); 220 } 221 222 /** 223 * 初始化footer view 224 */ 225 protected void setupFooterView(Context context) { 226 mFooterView = LayoutInflater.from(context).inflate(R.layout.pull_to_refresh_footer, 227 this, false); 228 addView(mFooterView); 229 } 230 231 232 /** 233 * 第二步：测量 234 * 丈量视图的宽、高。宽度为用户设置的宽度，高度则为header, 235 * content view, footer这三个子控件的高度之和。 236 * 237 * @param widthMeasureSpec 238 * @param heightMeasureSpec 239 */ 240 @Override 241 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 242 int width = MeasureSpec.getSize(widthMeasureSpec); 243 int childCount = getChildCount(); 244 int finalHeight = 0; 245 for (int i = 0; i < childCount; i++) { 246 View child = getChildAt(i); 247 // measure 248 measureChild(child, widthMeasureSpec, heightMeasureSpec); 249 // 该view所需要的总高度 250 finalHeight += child.getMeasuredHeight(); 251 } 252 setMeasuredDimension(width, finalHeight); 253 } 254 255 256 /** 257 * 第三步：布局 258 * 布局函数，将header, content view, 259 * footer这三个view从上到下布局。布局完成后通过Scroller滚动到header的底部， 260 * 即滚动距离为header的高度 +本视图的paddingTop，从而达到隐藏header的效果. 261 */ 262 @Override 263 protected void onLayout(boolean changed, int l, int t, int r, int b) { 264 265 int childCount = getChildCount(); 266 int top = getPaddingTop(); 267 for (int i = 0; i < childCount; i++) { 268 View child = getChildAt(i); 269 child.layout(0, top, child.getMeasuredWidth(), child.getMeasuredHeight() + top); 270 top += child.getMeasuredHeight(); 271 } 272 273 // 计算初始化滑动的y轴距离 274 mInitScrollY = mHeaderView.getMeasuredHeight() + getPaddingTop(); 275 // 滑动到header view高度的位置, 从而达到隐藏header view的效果 276 scrollTo(0, mInitScrollY); 277 } 278 279 280 /** 281 * 第四步：监听滑动事件 282 * 与Scroller合作,实现平滑滚动。在该方法中调用Scroller的computeScrollOffset来判断滚动是否结束。 283 * 如果没有结束， 284 * 那么滚动到相应的位置，并且调用postInvalidate方法重绘界面， 285 * 从而再次进入到这个computeScroll流程，直到滚动结束。 286 */ 287 @Override 288 public void computeScroll() { 289 if (mScroller.computeScrollOffset()) { 290 scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); 291 postInvalidate(); 292 } 293 } 294 295 /* 296 * 在适当的时候拦截触摸事件，这里指的适当的时候是当mContentView滑动到顶部， 297 * 并且是下拉时拦截触摸事件，否则不拦截，交给其child 298 * view 来处理。 299 */ 300 @Override 301 public boolean onInterceptTouchEvent(MotionEvent ev) { 302 303 final int action = MotionEventCompat.getActionMasked(ev); 304 // Always handle the case of the touch gesture being complete. 305 if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) { 306 // Do not intercept touch event, let the child handle it 307 return false; 308 } 309 310 switch (action) { 311 312 case MotionEvent.ACTION_DOWN: 313 mLastY = (int) ev.getRawY(); 314 break; 315 316 case MotionEvent.ACTION_MOVE: 317 // int yDistance = (int) ev.getRawY() - mYDown; 318 mYOffset = (int) ev.getRawY() - mLastY; 319 // 如果拉到了顶部, 并且是下拉,则拦截触摸事件,从而转到onTouchEvent来处理下拉刷新事件 320 if (isTop() && mYOffset > 0) { 321 return true; 322 } 323 break; 324 325 } 326 // Do not intercept touch event, let the child handle it 327 return false; 328 } 329 330 /** 331 * 第五步：下拉刷新 332 * 1、滑动view显示出headerview 333 * 2、进度条滚动，修改标题内容 334 * 3、执行下拉刷新监听 335 * 4、刷新成功或失败后重置：隐藏headerview 修改标题内容 336 * 在这里处理触摸事件以达到下拉刷新或者上拉自动加载的问题 337 * 338 * @see android.view.View#onTouchEvent(android.view.MotionEvent) 339 */ 340 @Override 341 public boolean onTouchEvent(MotionEvent event) {//下拉刷新的处理 342 switch (event.getAction()) { 343 case MotionEvent.ACTION_MOVE: 344 int currentY = (int) event.getRawY(); 345 mYOffset = currentY - mLastY; 346 if (mCurrentStatus != STATUS_LOADING) { 347 changeScrollY(mYOffset); 348 } 349 350 rotateHeaderArrow();//旋转箭头 351 changeTips();//重置文本 352 mLastY = currentY; 353 break; 354 355 case MotionEvent.ACTION_UP: 356 // 下拉刷新的具体操作 357 doRefresh(); 358 break; 359 default: 360 break; 361 } 362 return true; 363 } 364 365 /** 366 * 设置滚动的参数 367 * 368 * @param yOffset 369 */ 370 private void startScroll(int yOffset) { 371 mScroller.startScroll(getScrollX(), getScrollY(), 0, yOffset); 372 invalidate(); 373 } 374 375 /** 376 * y轴上滑动到指定位置 377 * 378 * @param distance 379 * @return 380 */ 381 protected void changeScrollY(int distance) { 382 // 最大值为 scrollY(header 隐藏), 最小值为0 ( header 完全显示). 383 int curY = getScrollY(); 384 // 下拉 385 if (distance > 0 && curY - distance > getPaddingTop()) { 386 scrollBy(0, -distance); 387 } else if (distance < 0 && curY - distance <= mInitScrollY) { 388 // 上拉过程 389 scrollBy(0, -distance); 390 } 391 392 curY = getScrollY(); 393 int slop = mInitScrollY / 2; 394 // 395 if (curY > 0 && curY < slop) { 396 mCurrentStatus = STATUS_RELEASE_TO_REFRESH; 397 } else if (curY > 0 && curY > slop) { 398 mCurrentStatus = STATUS_PULL_TO_REFRESH; 399 } 400 } 401 402 403 /** 404 * 旋转箭头图标 405 */ 406 protected void rotateHeaderArrow() { 407 408 if (mCurrentStatus == STATUS_REFRESHING) { 409 return; 410 } else if (mCurrentStatus == STATUS_PULL_TO_REFRESH && !isArrowUp) { 411 return; 412 } else if (mCurrentStatus == STATUS_RELEASE_TO_REFRESH && isArrowUp) { 413 return; 414 } 415 416 mProgressBar.setVisibility(View.GONE); 417 mArrowImageView.setVisibility(View.VISIBLE); 418 float pivotX = mArrowImageView.getWidth() / 2f; 419 float pivotY = mArrowImageView.getHeight() / 2f; 420 float fromDegrees = 0f; 421 float toDegrees = 0f; 422 if (mCurrentStatus == STATUS_PULL_TO_REFRESH) { 423 fromDegrees = 180f; 424 toDegrees = 360f; 425 } else if (mCurrentStatus == STATUS_RELEASE_TO_REFRESH) { 426 fromDegrees = 0f; 427 toDegrees = 180f; 428 } 429 430 RotateAnimation animation = new RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY); 431 animation.setDuration(100); 432 animation.setFillAfter(true); 433 mArrowImageView.startAnimation(animation); 434 435 if (mCurrentStatus == STATUS_RELEASE_TO_REFRESH) { 436 isArrowUp = true; 437 } else { 438 isArrowUp = false; 439 } 440 } 441 442 /** 443 * 根据当前状态修改header view中的文本标签 444 */ 445 protected void changeTips() { 446 if (mCurrentStatus == STATUS_PULL_TO_REFRESH) { 447 mTipsTextView.setText(R.string.pull_to_refresh_pull_label); 448 } else if (mCurrentStatus == STATUS_RELEASE_TO_REFRESH) { 449 mTipsTextView.setText(R.string.pull_to_refresh_release_label); 450 } 451 } 452 453 454 /** 455 * 手指抬起时,根据用户下拉的高度来判断是否是有效的下拉刷新操作。 456 * 如果下拉的距离超过header view的 457 * 1/2那么则认为是有效的下拉刷新操作，否则恢复原来的视图状态. 458 */ 459 private void changeHeaderViewStaus() { 460 int curScrollY = getScrollY(); 461 // 超过1/2则认为是有效的下拉刷新, 否则还原 462 if (curScrollY < mInitScrollY / 2) { 463 mScroller.startScroll(getScrollX(), curScrollY, 0, mHeaderView.getPaddingTop() 464 - curScrollY); 465 mCurrentStatus = STATUS_REFRESHING; 466 mTipsTextView.setText(R.string.pull_to_refresh_refreshing_label); 467 mArrowImageView.clearAnimation(); 468 mArrowImageView.setVisibility(View.GONE); 469 mProgressBar.setVisibility(View.VISIBLE); 470 } else { 471 mScroller.startScroll(getScrollX(), curScrollY, 0, mInitScrollY - curScrollY); 472 mCurrentStatus = STATUS_IDLE; 473 } 474 475 invalidate(); 476 } 477 478 /** 479 * 执行下拉刷新 480 */ 481 protected void doRefresh() { 482 changeHeaderViewStaus(); 483 // 执行刷新操作 484 if (mCurrentStatus == STATUS_REFRESHING && mOnRefreshListener != null) { 485 mOnRefreshListener.onRefresh(); 486 } 487 } 488 489 /** 490 * 刷新结束，恢复状态 491 */ 492 public void refreshComplete() { 493 mScroller.startScroll(getScrollX(), getScrollY(), 0, mInitScrollY - getScrollY()); 494 mCurrentStatus = STATUS_IDLE; 495 invalidate(); 496 updateHeaderTimeStamp(); 497 498 // 200毫秒后处理arrow和progressbar,免得太突兀 499 this.postDelayed(new Runnable() { 500 501 @Override 502 public void run() { 503 mArrowImageView.setVisibility(View.VISIBLE); 504 mProgressBar.setVisibility(View.GONE); 505 } 506 }, 100); 507 508 } 509 510 /** 511 * 修改header上的最近更新时间 512 */ 513 private void updateHeaderTimeStamp() { 514 // 设置更新时间 515 mTimeTextView.setText(R.string.pull_to_refresh_update_time_label); 516 SimpleDateFormat sdf = (SimpleDateFormat) SimpleDateFormat.getInstance(); 517 sdf.applyPattern("yyyy-MM-dd HH:mm:ss"); 518 mTimeTextView.append(sdf.format(new以上是关于Android自定义控件的主要内容，如果未能解决你的问题，请参考以下文章