android左右滑屏

最新推荐文章于 2018-01-04 14:45:00 发布
最新推荐文章于 2018-01-04 14:45:00 发布
阅读量644 收藏
点赞数
分类专栏： android 文章标签： 移动应用划屏

先上效果图：


实现“左右滑屏”核心类是Scroller，将View中的内容左右滚动从而实现滑屏效果。关键方法有：
scroller.scrollTo(x,y):
直接将View中的内容滚动到指定的(x,y)位置。
scroller.scrollTo(dx,dy):
直接将View中的内容滚动到相对当前状态的(dx,dy)位置。本例中用于实现手指拖拉移动View的效果。
scroller.startScroll(nowX, nowY, moveX, moveY, duration):
在duration的时间内完成move的位移。配合重写View.computeScroll()不断刷新界面从而实现滑屏动画。

如果当前点击拖拉的组件是按钮等自身可处理手势动作的组件，则重写ViewGroup.onInterceptTouchEvent(MotionEvent)可拦截此事件并将此事件传递至onTouchEvent(MotionEvent)进行处理。从而对如按钮等即可点击亦可拖拉。


左右滑屏的指示器位置为SlidingIndicator。在fadeOut()方法中为本组件的动画设置了延时，体验上更亲近：


  1.    animFadeout.setStartTime(AnimationUtils.currentAnimationTimeMillis() + fadeDelay);
  2. setAnimation(animFadeout);
复制代码
代码如下(Java奉上，XML代码请各位看官自己实现)：

ActSlidingContainer.java

  1. package lab.sodino.sliding;

  3. import lab.sodino.sliding.SlidingContainer.OnSlidingListener;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.view.View.OnClickListener;
  8. import android.widget.Button;

  10. public class ActSlidingContainer extends Activity implements OnClickListener, OnSlidingListener {
  11. private SlidingContainer slidingContainer;
  12. private SlidingIndicator slidingIndicator;
  13. private Button btnLeft, btnRight, btnMid;

  15. @Override
  16. public void onCreate(Bundle savedInstanceState) {
  17. super.onCreate(savedInstanceState);
  18. setContentView(R.layout.main);
  19. btnLeft = (Button) findViewById(R.id.left);
  20. btnLeft.setOnClickListener(this);
  21. btnRight = (Button) findViewById(R.id.right);
  22. btnRight.setOnClickListener(this);
  23. btnMid = (Button) findViewById(R.id.mid);
  24. btnMid.setOnClickListener(this);

  26. slidingContainer = (SlidingContainer) findViewById(R.id.slidingContainer);
  27. slidingContainer.setOnSlidingListener(this);
  28. slidingIndicator = (SlidingIndicator) findViewById(R.id.slidingIndicator);
  29. slidingIndicator.setPageAmount(slidingContainer.getChildCount());
  30. }

  32. @Override
  33. public void onClick(View v) {
  34. if (v == btnLeft) {
  35. slidingContainer.scroll2page(slidingContainer.getCurrentPage() - 1);
  36. } else if (v == btnRight) {
  37. slidingContainer.scroll2page(slidingContainer.getCurrentPage() + 1);
  38. } else if (v == btnMid) {
  39. slidingContainer.scroll2page(slidingContainer.getChildCount() >> 1);
  40. }
  41. }

  43. @Override
  44. public void onSliding(int scrollX) {
  45. float scale = (float) (slidingContainer.getPageWidth() * slidingContainer.getChildCount())
  46. / (float) slidingIndicator.getWidth();
  47. slidingIndicator.setPosition((int) (scrollX / scale));
  48. }

  50. @Override
  51. public void onSlidingEnd(int pageIdx, int scrollX) {
  52. slidingIndicator.setCurrentPage(pageIdx);
  53. }
  54. }
复制代码
SlidingContainer.java

  1. package lab.sodino.sliding;

  3. import java.util.ArrayList;

  5. import android.content.Context;
  6. import android.content.res.TypedArray;
  7. import android.graphics.Canvas;
  8. import android.graphics.Rect;
  9. import android.util.AttributeSet;
  10. import android.view.MotionEvent;
  11. import android.view.View;
  12. import android.view.ViewConfiguration;
  13. import android.view.ViewGroup;
  14. import android.widget.Scroller;

  16. /**
  17. * @author Sodino E-mail:sodinoopen@hotmail.com
  18. * @version Time：2012-1-18 下午02:55:59
  19. */
  20. public class SlidingContainer extends ViewGroup {
  21. private static final int INVALID_SCREEN = -1;
  22. public static final int SCROLL_DURATION = 500;
  23. public static final int SPEC_UNDEFINED = ViewGroup.LayoutParams.FILL_PARENT;
  24. public static final int SNAP_VELOCITY = 500;
  25. private static final int STATE_STATIC = 0;
  26. private static final int STATE_SCROLLING = 1;
  27. private int pageWidth;
  28. /**
  29. * 标识是否是第一次布局。

  31. * 第一次布局需要将第一页调居中显示在屏幕上。

  33. */
  34. private boolean isFirstLayout;
  35. private int currentPage, nextPage;
  36. private Scroller scroller;
  37. /** 手指滑动过程中可理解为拖动的最小长度。 */
  38. private int distanceSlop;
  39. private int state = STATE_STATIC;
  40. private float lastMotionX;
  41. private OnSlidingListener slidingListener;

  43. public SlidingContainer(Context context, AttributeSet attrs, int defStyle) {
  44. super(context, attrs, defStyle);
  45. LogOut.out(this, "SlidingContainer() 3");
  46. initialization(context, attrs);
  47. }

  49. public SlidingContainer(Context context, AttributeSet attrs) {
  50. super(context, attrs);
  51. LogOut.out(this, "SlidingContainer() 2");
  52. initialization(context, attrs);
  53. }

  55. public SlidingContainer(Context context) {
  56. super(context);
  57. LogOut.out(this, "SlidingContainer() 1");
  58. initialization(context, null);
  59. }

  61. private void initialization(Context context, AttributeSet attrs) {
  62. if (attrs != null) {
  63. TypedArray typedArr = context.obtainStyledAttributes(attrs, R.styleable.sliding_SlidingContainer);
  64. pageWidth = typedArr.getDimensionPixelSize(R.styleable.sliding_SlidingContainer_pageWidth, SPEC_UNDEFINED);
  65. typedArr.recycle();
  66. }

  68. state = STATE_STATIC;
  69. isFirstLayout = true;
  70. currentPage = 0;
  71. nextPage = INVALID_SCREEN;

  73. scroller = new Scroller(context);

  75. final ViewConfiguration configuration = ViewConfiguration.get(context);
  76. distanceSlop = configuration.getScaledTouchSlop();
  77. }

  79. public int getCurrentPage() {
  80. return currentPage;
  81. }

  83. public int getScrollXByPage(int page) {
  84. return (page * pageWidth) - getPagePadding();
  85. }

  87. public int getPagePadding() {
  88. return (getMeasuredWidth() - pageWidth) >> 1;
  89. }

  91. public int getPageWidth() {
  92. return pageWidth;
  93. }

  95. public boolean scroll2page(int page) {
  96. if (page < 0) {
  97. return false;
  98. } else if (page >= getChildCount()) {
  99. return false;
  100. } else if (scroller.isFinished() == false) {
  101. return false;
  102. }
  103. enableChildrenCache(true);
  104. boolean changingPage = (page != currentPage);
  105. nextPage = page;

  107. View focusedChild = getFocusedChild();
  108. if (changingPage && focusedChild != null && focusedChild == getChildAt(currentPage)) {
  109. focusedChild.clearFocus();
  110. }

  112. final int nowX = getScrollX();
  113. final int newX = getScrollXByPage(nextPage);
  114. final int move = newX - nowX;
  115. final int absMove = Math.abs(move);
  116. int duration = SCROLL_DURATION;
  117. if (absMove < pageWidth) {
  118. duration = SCROLL_DURATION * absMove / pageWidth;
  119. }
  120. // 启动左右切屏动画
  121. scroller.startScroll(nowX, 0, move, 0, duration);
  122. invalidate();
  123. return true;
  124. }

  126. private void checkScrolling(float x) {
  127. float diff = Math.abs(x - lastMotionX);
  128. if (diff > distanceSlop) {
  129. state = STATE_SCROLLING;
  130. enableChildrenCache(true);
  131. }
  132. }

  134. /**
  135. * 开始滑动时设置允许使用缓存。

  137. * 结束滑动时设置取消缓存。

  139. */
  140. public void enableChildrenCache(boolean enable) {
  141. setChildrenDrawingCacheEnabled(enable);
  142. setChildrenDrawnWithCacheEnabled(enable);
  143. }

  145. /** 在正式显示之前设置才有效。 */
  146. public boolean setPageWidth(int width) {
  147. if (isFirstLayout) {
  148. pageWidth = width;
  149. return true;
  150. }
  151. return false;
  152. }

  154. public void setOnSlidingListener(OnSlidingListener listener) {
  155. slidingListener = listener;
  156. }

  158. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  159. LogOut.out(this, "onMeasure()");
  160. super.onMeasure(widthMeasureSpec, heightMeasureSpec);

  162. pageWidth = (pageWidth == SPEC_UNDEFINED) ? getMeasuredWidth() : pageWidth;
  163. pageWidth = Math.min(Math.max(0, pageWidth), getMeasuredWidth());

  165. final int count = getChildCount();
  166. for (int i = 0; i < count; i++) {
  167. int childWidthSpec = MeasureSpec.makeMeasureSpec(pageWidth, MeasureSpec.EXACTLY);
  168. View view = getChildAt(i);
  169. view.measure(childWidthSpec, heightMeasureSpec);
  170. }
  171. }

  173. @Override
  174. protected void onLayout(boolean changing, int left, int top, int right, int bottom) {
  175. LogOut.out(this, "onLayout");
  176. int childLeft = 0;
  177. final int count = getChildCount();
  178. for (int i = 0; i < count; i++) {
  179. final View view = getChildAt(i);
  180. if (view.getVisibility() != View.GONE) {
  181. int childWidth = view.getMeasuredWidth();
  182. view.layout(childLeft, 0, childLeft + childWidth, view.getMeasuredHeight());
  183. childLeft += childWidth;
  184. }
  185. }

  187. if (isFirstLayout) {
  188. scrollTo(getScrollXByPage(currentPage), 0);
  189. isFirstLayout = false;
  190. }
  191. }

  193. public boolean onInterceptTouchEvent(MotionEvent event) {
  194. LogOut.out(this, "onInterceptTouchEvent action=" + event.getAction());
  195. final int action = event.getAction();
  196. if (action == MotionEvent.ACTION_MOVE && state != STATE_STATIC) {
  197. // MOVE及非静止情况下，返回TRUE阻止将此事件传递给子组件，
  198. // 而是执行onTouchEvent()来实现滑动
  199. return true;
  200. }
  201. final float x = event.getX();
  202. switch (action) {
  203. case MotionEvent.ACTION_DOWN:
  204. lastMotionX = x;
  205. // 点击按钮时，此处设置状态为静止。
  206. state = scroller.isFinished() ? STATE_STATIC : STATE_SCROLLING;
  207. break;
  208. case MotionEvent.ACTION_MOVE:
  209. if (state == STATE_STATIC) {
  210. // 由于已静止，在点击按钮后进行拖拉，则根据拖拉位移大小决定是否需要改变状态进而进一步拦截此事件。
  211. checkScrolling(x);
  212. }
  213. break;
  214. case MotionEvent.ACTION_UP:
  215. case MotionEvent.ACTION_CANCEL:
  216. enableChildrenCache(false);
  217. state = STATE_STATIC;
  218. break;
  219. }
  220. // 非静止状态，将此事件交由onTouchEvent()处理。
  221. return state != STATE_STATIC;
  222. }

  224. public boolean onTouchEvent(MotionEvent event) {
  225. LogOut.out(this, "onTouchEvent");
  226. super.onTouchEvent(event);
  227. final int action = event.getAction();
  228. final float x = event.getX();
  229. switch (action) {
  230. case MotionEvent.ACTION_DOWN:
  231. lastMotionX = x;
  232. if (scroller.isFinished() == false) {
  233. scroller.abortAnimation();
  234. }
  235. break;
  236. case MotionEvent.ACTION_MOVE:
  237. if (state == STATE_STATIC) {
  238. checkScrolling(x);
  239. } else if (state == STATE_SCROLLING) {
  240. int moveX = (int) (lastMotionX - x);
  241. lastMotionX = x;
  242. if (getScrollX() < 0 || getScrollX() > getChildAt(getChildCount() - 1).getLeft()) {
  243. // 对于越界的拖拉，则将位移减半。
  244. moveX = moveX >> 1;
  245. }
  246. scrollBy(moveX, 0);
  247. }
  248. break;
  249. case MotionEvent.ACTION_UP:
  250. case MotionEvent.ACTION_CANCEL:
  251. if (state == STATE_SCROLLING) {
  252. final int startX = getScrollXByPage(currentPage);
  253. // 默认选择回到手指滑动之前的当前页
  254. int whichPage = currentPage;
  255. int xSpace = getWidth() / 8;
  256. if (getScrollX() < startX - xSpace) {
  257. whichPage = Math.max(0, whichPage - 1);
  258. } else if (getScrollX() > startX + xSpace) {
  259. whichPage = Math.min(getChildCount() - 1, whichPage + 1);
  260. }
  261. scroll2page(whichPage);
  262. }
  263. state = STATE_STATIC;
  264. break;
  265. }
  266. return true;
  267. }

  269. /** 让拖拉、动画过程中界面过渡顺滑。 */
  270. protected void dispatchDraw(Canvas canvas) {
  271. final long drawingTime = getDrawingTime();

  273. final int count = getChildCount();
  274. for (int i = 0; i < count; i++) {
  275. drawChild(canvas, getChildAt(i), drawingTime);
  276. }

  278. if (slidingListener != null) {
  279. int adjustedScrollX = getScrollX() + getPagePadding();
  280. slidingListener.onSliding(adjustedScrollX);
  281. if (adjustedScrollX % pageWidth == 0) {
  282. slidingListener.onSlidingEnd(adjustedScrollX / pageWidth, adjustedScrollX);
  283. }
  284. }
  285. }

  287. /** 与Scroller相匹配，实现动画效果中每一帧的界面更新。 */
  288. public void computeScroll() {
  289. if (scroller.computeScrollOffset()) {
  290. scrollTo(scroller.getCurrX(), scroller.getCurrY());
  291. postInvalidate();
  292. } else if (nextPage != INVALID_SCREEN) {
  293. currentPage = nextPage;
  294. nextPage = INVALID_SCREEN;
  295. enableChildrenCache(false);
  296. }
  297. }


  300. public static interface OnSlidingListener {
  301. public void onSliding(int scrollX);

  303. public void onSlidingEnd(int pageIdx, int scrollX);
  304. }
  305. }
复制代码
SlidingIndicator.java

  1. package lab.sodino.sliding;

  3. import android.content.Context;
  4. import android.content.res.TypedArray;
  5. import android.graphics.Canvas;
  6. import android.graphics.Paint;
  7. import android.graphics.RectF;
  8. import android.util.AttributeSet;
  9. import android.view.View;
  10. import android.view.animation.AlphaAnimation;
  11. import android.view.animation.Animation;
  12. import android.view.animation.AnimationUtils;
  13. import android.view.animation.LinearInterpolator;

  15. /**
  16. * @author Sodino E-mail:sodinoopen@hotmail.com
  17. * @version Time：2012-1-18 下午03:31:08
  18. */
  19. public class SlidingIndicator extends View {
  20. public static final int BAR_COLOR = 0xaa777777;
  21. public static final int HIGHLIGHT_COLOR = 0xaa999999;
  22. public static final int FADE_DELAY = 2000;
  23. public static final int FADE_DURATION = 500;

  25. private int amount, currentPage, position;
  26. private Paint barPaint, highlightPaint;
  27. private int fadeDelay, fadeDuration;
  28. private float ovalRadius;
  29. private Animation animFadeout;
  30. /** RectF比Rect是精度上更精确。 */
  31. private RectF rectFBody, rectFIndicator;

  33. public SlidingIndicator(Context context, AttributeSet attrs, int defStyle) {
  34. super(context, attrs, defStyle);
  35. // 预设值。
  36. int barColor = BAR_COLOR, highlightColor = HIGHLIGHT_COLOR;
  37. fadeDelay = FADE_DELAY;
  38. fadeDuration = FADE_DURATION;
  39. if (attrs != null) {
  40. TypedArray typedArr = context.obtainStyledAttributes(attrs, R.styleable.sliding_SlidingIndicator);
  41. barColor = typedArr.getColor(R.styleable.sliding_SlidingIndicator_barColor, BAR_COLOR);
  42. highlightColor = typedArr.getColor(R.styleable.sliding_SlidingIndicator_highlightColor, HIGHLIGHT_COLOR);
  43. fadeDelay = typedArr.getInteger(R.styleable.sliding_SlidingIndicator_fadeDelay, FADE_DELAY);
  44. fadeDuration = typedArr.getInteger(R.styleable.sliding_SlidingIndicator_fadeDuration, FADE_DURATION);
  45. ovalRadius = typedArr.getDimension(R.styleable.sliding_SlidingIndicator_roundRectRadius, 0f);
  46. typedArr.recycle();
  47. }
  48. initialization(barColor, highlightColor, fadeDuration);
  49. }

  51. public SlidingIndicator(Context context, AttributeSet attrs) {
  52. this(context, attrs, 0);
  53. }

  55. public SlidingIndicator(Context context) {
  56. super(context);
  57. }

  59. private void initialization(int barColor, int highlightColor, int fadeDuration) {
  60. barPaint = new Paint();
  61. barPaint.setColor(barColor);

  63. highlightPaint = new Paint();
  64. highlightPaint.setColor(highlightColor);

  66. animFadeout = new AlphaAnimation(1f, 0f);
  67. animFadeout.setDuration(fadeDuration);
  68. animFadeout.setRepeatCount(0);
  69. animFadeout.setInterpolator(new LinearInterpolator());
  70. // 设置动画结束后，本组件保持动画结束时的最后状态，即全透明不可见。
  71. animFadeout.setFillEnabled(true);
  72. animFadeout.setFillAfter(true);

  74. rectFBody = new RectF();
  75. rectFIndicator = new RectF();
  76. }

  78. public void setPageAmount(int num) {
  79. if (num < 0) {
  80. throw new IllegalArgumentException("num must be positive.");
  81. }
  82. amount = num;
  83. invalidate();
  84. fadeOut();
  85. }

  87. private void fadeOut() {
  88. if (fadeDuration > 0) {
  89. clearAnimation();
  90. // 设置动画的延时时间，此时间段内正好指示当前页位置。
  91. animFadeout.setStartTime(AnimationUtils.currentAnimationTimeMillis() + fadeDelay);
  92. setAnimation(animFadeout);
  93. }
  94. }

  96. public int getCurrentPage() {
  97. return currentPage;
  98. }

  100. public void setCurrentPage(int idx) {
  101. if (currentPage < 0 || currentPage >= amount) {
  102. throw new IllegalArgumentException("currentPage parameter out of bounds");
  103. }
  104. if (this.currentPage != idx) {
  105. this.currentPage = idx;
  106. this.position = currentPage * getPageWidth();
  107. invalidate();
  108. fadeOut();
  109. }
  110. }

  112. public void setPosition(int position) {
  113. if (this.position != position) {
  114. this.position = position;
  115. invalidate();
  116. fadeOut();
  117. }
  118. }

  120. public int getPageWidth() {
  121. return getWidth() / amount;
  122. }

  124. protected void onDraw(Canvas canvas) {
  125. rectFBody.set(0, 0, getWidth(), getHeight());
  126. canvas.drawRoundRect(rectFBody, ovalRadius, ovalRadius, barPaint);
  127. rectFIndicator.set(position, 0, position + getPageWidth(), getHeight());
  128. canvas.drawRoundRect(rectFIndicator, ovalRadius, ovalRadius, highlightPaint);
  129. }
Hurricaner_Zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Android]左右滑屏的实现
Sodino的专栏
01-19 5609
先上效果图： 实现“左右滑屏”核心类是Scroller，将View中的内容左右滚动从而实现滑屏效果。关键方法有： scroller.scrollTo(x,y): 直接将View中的内容滚动到指定的(x,y)位置。 scroller.scrollTo(dx,dy): 直接将View中的内容滚动到相对当前状态的(dx,dy)位置。本例中用于实现手指拖拉移动View的效果。
android中左右滑屏的实现
04-07
NULL 博文链接：https://geyubin.iteye.com/blog/1561577
android中的左右滑屏实现By ViewPager
djun100的专栏
07-25 113
先看效果，就是左右滑屏的效果 具体实现详解 android compatibility package, revision 3在7月份发布后，其中有个ViewPager引起了我的注意 官方的描述： 请参考：http://developer.android.com/sdk/compatibility-library.html#Notes ViewPager的...
Android中左右滑屏实现
07-10 7513
在网上搜索了下滑屏的实现，自己整理了下， 代码如下： package kexc.scroll; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.V
android 左右滑屏
04-06
在Android开发中，左右滑屏通常是实现应用内页面切换或者展示多级菜单的常见交互方式。这个场景在很多类型的App中都有所应用，比如新闻阅读、电商产品展示等。本篇将围绕“android 左右滑屏”这一主题，探讨如何在...
android 左右滑屏翻页
03-15
在Android开发中，实现左右滑屏翻页是一种常见的交互方式，尤其在应用的主界面或者内容展示场景下，用户可以通过简单的手势切换不同的页面。本文将深入探讨如何在Android项目中实现这种滑动翻页的效果，以及如何加载...
android模仿桌面左右滑屏
10-28
android中桌面左右滑屏幕 看了别人的博客，把发布的资料整理成了一个工程，发布出来大家共同学习
Android左右菜单滑动
04-09
这是一个可以从左，或右端滑出菜单，菜单中可以添加ListView，并写了个公共控件来处理上下，左右手势处理，避免冲突。
andriod 商城左侧固定菜单,右侧内容两个list实现
11-21
andriod 商城左侧固定菜单,右侧内容两个list实现
模拟实现启动滑屏
07-19
模拟实现启动滑屏模拟实现启动滑屏
Android自定义锁屏实现----仿正点闹钟滑屏解锁
05-11
Android自定义锁屏实现----仿正点闹钟滑屏解锁
Android 左右滑屏效果
dianwei5413的博客
05-07 79
View Code <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layo...
Android FrameLayout子view居中（左居中，右居中）等
chuoshao2508的博客
01-04 1344
Android的布局FrameLayout默认是把布局内的子view堆砌在左上角，但是，可以通过设置子view的： android:layout_gravity 此参数控制子view的布局位置，实现FrameLayout的各种子view布局位置，如左居中，右居中，居中等等，要点...
Android手势识别——上下左右滑动、屏幕上下左右中区域处理
热门推荐
双斧狂暴战专栏
12-04 1万+
手势识别GestureDetector 关于手势识别是Android为了方便开发人员处理屏幕上的触摸、拖动、单双击、滑动等提供的一组接口。用这个我们可以很方便的在屏幕上做出想要的效果，比如滑动翻页、触摸不同区域采用不同处理等。 在日常生活中，我们常用的手机浏览器等，都有这样的应用。比如，当你用手机浏览器看小说时，点击屏幕下方，会翻到下一页；点击屏幕上方，会翻到上一页；当你点击屏幕中央时，出现目
android studio滑屏事件处理
最新发布
09-02
- *3* [android 左右滑屏 ](https://download.csdn.net/download/weixin_38669628/11091558)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值