Android 滑动效果高级篇（八）—— 自定义控件

最新推荐文章于 2021-05-26 14:30:07 发布

吗牌友

最新推荐文章于 2021-05-26 14:30:07 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/dghggij/article/details/84001758

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

自定义控件，较常用View、ViewGroup、Scroller三个类，其继承关系如下：

本示例自定义控件，实现一个Gallery效果，并添加了一个显示View个数和位置的bar条，效果图：

自定义控件，包含通过继承实现的自定义控件和自定义控件属性两部分，即控件和属性

1、自定义属性

自定义属性，分为定义属性、解析属性、设置属性三部分，具体步骤：

首先，在res/valus/attrs.xml属性资源文件中，定义控件属性

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="com.myapps.widget.Pager">        <attr name="pageWidth" format="dimension" />    </declare-styleable>        <declare-styleable name="com.myapps.widget.PagerBar">        <attr name="barColor" format="color" />        <attr name="highlightColor" format="color" />        <attr name="fadeDelay" format="integer" />        <attr name="fadeDuration" format="integer" />        <attr name="roundRectRadius" format="dimension" />    </declare-styleable></resources>

然后，在自定义控件的代码中，解析自定义的属性，如在PagerBar.java：

// 自定义属性  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_PagerBar);  int barBackColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_barColor, DEFAULT_BAR_BACKCOLOR);    // bar背景色  int barForeColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_highlightColor, DEFAULT_BAR_FORECOLOR); // bar前景色  fadeDelay = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDelay, DEFAULT_FADE_DELAY);    // bar消失延迟时间  fadeDuration = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDuration, DEFAULT_FADE_DURATION); // bar消失动画时间  ovalRadius = a.getDimension(R.styleable.com_myapps_widget_PagerBar_roundRectRadius, 2f);  a.recycle();

最后，在布局文件中设置属性，如在main.xml

    <com.homer.mycontrol.PagerBar        android:id="@+id/control"        android:layout_width="fill_parent"        android:layout_height="4dip"        android:layout_margin="8dip"        myapps:roundRectRadius="2dip" />  <!-- 自定义圆角 -->

其中，在布局中间main.xml中，需要注意：

xmlns:myapps="http://schemas.android.com/apk/res/com.homer.mycontrol"

定义属性时，在declare-styleable的name中，需要包含com.myapps.widget.PagerBar，表示自定义的控件PageBar是widget子类，myapps是xmlns解析标记

解析属性时，在TypedArray中，需要包含R.styleable.com_myapps_widget_PagerBar，横线替换了圆点.

定义属性时，在com.homer.mycontrol.PagerBar中，需要包含myapps:roundRectRadius="2dip"，加上myapps解析标记

2、自定义控件PagerBar

自定义PagerBar，在图片下方用来显示图片滑到了第几页，即上面效果图（图2、图3）中的下部银白色细条，具体实现：

 public PagerBar(Context context, AttributeSet attrs, int defStyle) {  super(context, attrs, defStyle);  // 自定义属性  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_PagerBar);  int barBackColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_barColor, DEFAULT_BAR_BACKCOLOR);    // bar背景色  int barForeColor = a.getColor(R.styleable.com_myapps_widget_PagerBar_highlightColor, DEFAULT_BAR_FORECOLOR); // bar前景色  fadeDelay = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDelay, DEFAULT_FADE_DELAY);    // bar消失延迟时间  fadeDuration = a.getInteger(R.styleable.com_myapps_widget_PagerBar_fadeDuration, DEFAULT_FADE_DURATION); // bar消失动画时间  ovalRadius = a.getDimension(R.styleable.com_myapps_widget_PagerBar_roundRectRadius, 2f);  a.recycle();  barBackPaint = new Paint();  barBackPaint.setColor(barBackColor);  barForePaint = new Paint();  barForePaint.setColor(barForeColor);  fadeOutAnimation = new AlphaAnimation(1f, 0f);  fadeOutAnimation.setDuration(fadeDuration);  fadeOutAnimation.setRepeatCount(0);  fadeOutAnimation.setInterpolator(new LinearInterpolator());  fadeOutAnimation.setFillEnabled(true);  fadeOutAnimation.setFillAfter(true); } public int getNumPages() {  return numPages; } public void setNumPages(int numPages) {  if (numPages <= 0) {   throw new IllegalArgumentException("numPages must be positive");  }  this.numPages = numPages;  invalidate();  // 重绘View  fadeOut();   // 设置bar消失效果 } /** bar消失动画 */ private void fadeOut() {  if (fadeDuration > 0) {   clearAnimation();   fadeOutAnimation.setStartTime(AnimationUtils.currentAnimationTimeMillis() + fadeDelay); //延迟fadeDelay后动画开始   setAnimation(fadeOutAnimation);  } } /**  @return  0 to numPages-1 */ public int getCurrentPage() {  return currentPage; } /** @param currentPage  0 to numPages-1  */ public void setCurrentPage(int currentPage) {  if (currentPage < 0 || currentPage >= numPages) {   throw new IllegalArgumentException("currentPage parameter out of bounds");  }  if (this.currentPage != currentPage) {   this.currentPage = currentPage;   this.position = currentPage * getPageWidth(); // bar前景色滑动条的起始位置（像素值）   invalidate();   fadeOut();  } } /** 获取View的宽度，即bar的宽度 */ public int getPageWidth() {  return getWidth() / numPages; // getWidth()是PagerBar的宽度（减去了margin左右距离后） } /**  @param position     can be -pageWidth to pageWidth*(numPages+1)  */ public void setPosition(int position) {  if (this.position != position) {   this.position = position;   invalidate();   fadeOut();  } } @Override protected void onDraw(Canvas canvas) {  canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), ovalRadius, ovalRadius, barBackPaint); // 绘制bar背景  canvas.drawRoundRect(new RectF(position, 0, position + (getWidth() / numPages), getHeight()), ovalRadius, ovalRadius, barForePaint); // 绘制bar前景 }}

3、自定义控件Pager

自定义控件Pager，继承自ViewGroup，用来显示图片的，类似于Gallery，实现主要部分包含：

A、自定义属性解析

B、Pager容器控件Scroller滑动页设置与控制

C、容器状态保存（onSaveInstanceState）

D、容器事件监听接口

详细实现如下：

A、自定义属性解析

 public Pager(Context context, AttributeSet attrs, int defStyle) {  super(context, attrs, defStyle);  // 自定义属性  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.com_myapps_widget_Pager);  pageWidthSpec = a.getDimensionPixelSize(R.styleable.com_myapps_widget_Pager_pageWidth, SPEC_UNDEFINED);  a.recycle(); }

B、Pager容器控件Scroller滑动页设置与控制

 public void setCurrentPage(int currentPage) {  mCurrentPage = Math.max(0, Math.min(currentPage, getChildCount()));  // 非常好  scrollTo(getScrollXForPage(mCurrentPage), 0);  invalidate(); // 重绘View } int getCurrentPage() {  return mCurrentPage; } public void setPageWidth(int pageWidth) {  this.pageWidthSpec = pageWidth; } public int getPageWidth() {  return pageWidth; } /** 获取whichPage的Pager起始x位置，whichPage从0开始计 */ private int getScrollXForPage(int whichPage) {  return (whichPage * pageWidth) - pageWidthPadding(); } /** 返回View的 paddingwidth 一半(1/2)*/ int pageWidthPadding() {  return ((getMeasuredWidth() - pageWidth) / 2); } @Override public void computeScroll() {  // update  mScrollX and mScrollY  of View  if (mScroller.computeScrollOffset()) {   scrollTo(mScroller.getCurrX(), mScroller.getCurrY());   postInvalidate();   // invalidate the View from a non-UI thread  } else if (mNextPage != INVALID_SCREEN) {   mCurrentPage = mNextPage;   mNextPage = INVALID_SCREEN;   clearChildrenCache();  } } @Override protected void dispatchDraw(Canvas canvas) { // draw the child views    final long drawingTime = getDrawingTime(); // 绘制childView  final int count = getChildCount();  for (int i = 0; i < count; i++) {   drawChild(canvas, getChildAt(i), drawingTime);  }  for (OnScrollListener mListener : mListeners) { // 自定义接口   int adjustedScrollX = getScrollX() + pageWidthPadding();   mListener.onScroll(adjustedScrollX);   if (adjustedScrollX % pageWidth == 0) { // scroll finished    mListener.onViewScrollFinished(adjustedScrollX / pageWidth);   }  } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  pageWidth = (pageWidthSpec == SPEC_UNDEFINED) ? getMeasuredWidth() : pageWidthSpec;  pageWidth = Math.min(pageWidth, getMeasuredWidth());  final int count = getChildCount();  for (int i = 0; i < count; i++) {   widthMeasureSpec = MeasureSpec.makeMeasureSpec(pageWidth, MeasureSpec.EXACTLY);   getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);  }  if (mFirstLayout) { // 第一次显示Pager时，page的位置   scrollTo(getScrollXForPage(mCurrentPage), mScroller.getCurrY());   mFirstLayout = false;  } } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) {  int childLeft = 0;  final int count = getChildCount(); // 绘制childView  for (int i = 0; i < count; i++) {   final View child = getChildAt(i);   if (child.getVisibility() != View.GONE) {    final int childWidth = child.getMeasuredWidth();    child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());    childLeft += childWidth;   }  } }

 @Override public boolean onInterceptTouchEvent(MotionEvent ev) {  final int action = ev.getAction();  if ((action == MotionEvent.ACTION_MOVE) && (mTouchState != TOUCH_STATE_REST)) { // 正在滑动中   return true;  }  final float x = ev.getX();  final float y = ev.getY();  switch (action) {  case MotionEvent.ACTION_MOVE:   if (mTouchState == TOUCH_STATE_REST) {    checkStartScroll(x, y);   }   break;  case MotionEvent.ACTION_DOWN:   mLastMotionX = x;   mLastMotionY = y;   mAllowLongPress = true;   mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST : TOUCH_STATE_SCROLLING; // scroll 完成后，重置状态   break;  case MotionEvent.ACTION_CANCEL:  case MotionEvent.ACTION_UP:   clearChildrenCache();   mTouchState = TOUCH_STATE_REST;   break;  }  return mTouchState != TOUCH_STATE_REST; } @Override public boolean onTouchEvent(MotionEvent ev) {  if (mVelocityTracker == null) {   mVelocityTracker = VelocityTracker.obtain();  }  mVelocityTracker.addMovement(ev);  final int action = ev.getAction();  final float x = ev.getX();  final float y = ev.getY();  switch (action) {  case MotionEvent.ACTION_DOWN:   if (!mScroller.isFinished()) {    mScroller.abortAnimation();   }   mLastMotionX = x;   break;     case MotionEvent.ACTION_MOVE:   if (mTouchState == TOUCH_STATE_REST) {    checkStartScroll(x, y);   } else if (mTouchState == TOUCH_STATE_SCROLLING) { // scrolling 状态时，重绘view    int deltaX = (int) (mLastMotionX - x);    mLastMotionX = x;    if (getScrollX() < 0 || getScrollX() > getChildAt(getChildCount() - 1).getLeft()) {     deltaX /= 2;    }    scrollBy(deltaX, 0);   }   break;     case MotionEvent.ACTION_UP:   if (mTouchState == TOUCH_STATE_SCROLLING) {    final VelocityTracker velocityTracker = mVelocityTracker;    velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);    int velocityX = (int) velocityTracker.getXVelocity();    if (velocityX > SNAP_VELOCITY && mCurrentPage > 0) {     snapToPage(mCurrentPage - 1);    } else if (velocityX < -SNAP_VELOCITY && mCurrentPage < getChildCount() - 1) {     snapToPage(mCurrentPage + 1);    } else {     snapToDestination();    }    if (mVelocityTracker != null) {     mVelocityTracker.recycle();     mVelocityTracker = null;    }   }   mTouchState = TOUCH_STATE_REST;   break;  case MotionEvent.ACTION_CANCEL:   mTouchState = TOUCH_STATE_REST;  }  return true; } /** 检查scroll状态，并设置绘制scroll缓存 */ private void checkStartScroll(float x, float y) {  final int xDiff = (int) Math.abs(x - mLastMotionX);  final int yDiff = (int) Math.abs(y - mLastMotionY);  boolean xMoved = xDiff > mTouchSlop;  boolean yMoved = yDiff > mTouchSlop;  if (xMoved || yMoved) {   if (xMoved) {    mTouchState = TOUCH_STATE_SCROLLING;  // 设置为scrolling 状态    enableChildrenCache();   }   if (mAllowLongPress) {    mAllowLongPress = false;    final View currentScreen = getChildAt(mCurrentPage);    currentScreen.cancelLongPress(); // Cancels a pending long press   }  } } void enableChildrenCache() {  setChildrenDrawingCacheEnabled(true);  // Enables or disables the drawing cache for each child of this viewGroup  setChildrenDrawnWithCacheEnabled(true); // Tells the ViewGroup to draw its children using their drawing cache } void clearChildrenCache() {  setChildrenDrawnWithCacheEnabled(false); } private void snapToDestination() {  final int startX = getScrollXForPage(mCurrentPage);  int whichPage = mCurrentPage;  if (getScrollX() < startX - getWidth() / 8) {   whichPage = Math.max(0, whichPage - 1);  } else if (getScrollX() > startX + getWidth() / 8) {   whichPage = Math.min(getChildCount() - 1, whichPage + 1);  }  snapToPage(whichPage); } void snapToPage(int whichPage) {  enableChildrenCache();  boolean changingPages = whichPage != mCurrentPage;  mNextPage = whichPage;  View focusedChild = getFocusedChild();  if (focusedChild != null && changingPages && focusedChild == getChildAt(mCurrentPage)) {   focusedChild.clearFocus();  }  final int newX = getScrollXForPage(whichPage);  final int delta = newX - getScrollX();  mScroller.startScroll(getScrollX(), 0, delta, 0, Math.abs(delta) * 2);  invalidate(); } /** 向左滑动 */ public void scrollLeft() {  if (mNextPage == INVALID_SCREEN && mCurrentPage > 0 && mScroller.isFinished()) {   snapToPage(mCurrentPage - 1);  } } /** 向右滑动 */ public void scrollRight() {  if (mNextPage == INVALID_SCREEN && mCurrentPage < getChildCount() - 1 && mScroller.isFinished()) {   snapToPage(mCurrentPage + 1);  } }

C、容器状态保存（onSaveInstanceState）

 /** 保存状态 */ public static class SavedState extends BaseSavedState {  int currentScreen = -1;  SavedState(Parcelable superState) {   super(superState);  }  private SavedState(Parcel in) {   super(in);   currentScreen = in.readInt();  }  public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {   public SavedState createFromParcel(Parcel in) { // get data written by Parcelable.writeToParcel()     return new SavedState(in);   }   public SavedState[] newArray(int size) {   // create  array of the Parcelable     return new SavedState[size];   }  };    @Override  public void writeToParcel(Parcel out, int flags) {  // set data to parcel   super.writeToParcel(out, flags);   out.writeInt(currentScreen);  } } @Override protected Parcelable onSaveInstanceState() {  // 保存状态  final SavedState state = new SavedState(super.onSaveInstanceState());  state.currentScreen = mCurrentPage;   // save InstanceState  return state; } @Override protected void onRestoreInstanceState(Parcelable state) { // 恢复状态  SavedState savedState = (SavedState) state;  super.onRestoreInstanceState(savedState.getSuperState()); // get InstanceState  if (savedState.currentScreen != INVALID_SCREEN) {   mCurrentPage = savedState.currentScreen;   } }

D、容器事件监听接口

 public void addOnScrollListener(OnScrollListener listener) {  mListeners.add(listener); } public void removeOnScrollListener(OnScrollListener listener) {  mListeners.remove(listener); } /** 自定义接口 */ public static interface OnScrollListener {  void onScroll(int scrollX);  void onViewScrollFinished(int currentPage); }

代码下载

参考推荐：

Android中自定义属性的使用

Android中自定义属性的格式详解

Scroller（Android） Scroller（cnblog）

Android Parcelable

Android左右滑动加载分页

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d