devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

横向滑动视图HorizontalScrollView精炼详解

作者：不正经 | 2024-04-22 03:21:04

赞

踩

horizontalscrollview

 

一、前期基础知识储备

由于移动设备物理显示空间一般有限，不可能一次性的把所有要显示的内容都显示在屏幕上。所以各大平台一般会提供一些可滚动的视图来向用户展示数据。Android平台框架中为我们提供了诸如ListView、GirdView、ScrollView、RecyclerView等滚动视图控件，这几个视图控件也是我们平常使用最多的。本节内容我们来分析一下横向滚动视图HorizontalScrollView。

HorizontalScrollView是FrameLayout的子类，这意味着你只能在它下面放置一个子控件，这个子控件可以包含很多数据内容。有可能这个子控件本身就是一个布局控件，可以包含非常多的其他用来展示数据的控件。这个布局控件一般使用的是一个水平布局的LinearLayout 。

本节内容使用HorizontalScrollView分为两种情形：

①横向布局视图中放入文字；

②横向布局视图中放入图片

二、上代码，具体实现文字类的横向布局

（1）布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:paddingBottom="@dimen/activity_vertical_margin"
  7.     android:paddingLeft="@dimen/activity_horizontal_margin"
  8.     android:paddingRight="@dimen/activity_horizontal_margin"
  9.     android:paddingTop="@dimen/activity_vertical_margin"
  10.     tools:context="com.example.administrator.hscrollview.MainActivity">
  11.  
  12.     <HorizontalScrollView
  13.         android:id="@+id/horizontalScrollView"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="wrap_content"
  16.         android:background="#007b12">
  17.  
  18.         <LinearLayout
  19.             android:id="@+id/horizontalScrollViewItemContainer"
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="match_parent"
  22.             android:orientation="horizontal" />
  23.     </HorizontalScrollView>
  24.  
  25.     <TextView
  26.         android:id="@+id/testTextView"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:layout_centerHorizontal="true"
  30.         android:layout_centerVertical="true"
  31.         android:text="TextView_Test" />
  32.  
  33. </RelativeLayout>

（2）主Activity代码文件

  1. public class MainActivity extends AppCompatActivity
  2. {
  3.  
  4.     private HorizontalScrollView horizontalScrollView;
  5.     private LinearLayout container;
  6.     private String cities[] = new String[]{"London", "Bangkok", "Paris", "Dubai", "Istanbul", "New York",
  7.                                             "Singapore", "Kuala Lumpur", "Hong Kong", "Tokyo", "Barcelona",
  8.                                             "Vienna", "Los Angeles", "Prague", "Rome", "Seoul", "Mumbai", "Jakarta",
  9.                                             "Berlin", "Beijing", "Moscow", "Taipei", "Dublin", "Vancouver"};
  10.     private ArrayList<String> data = new ArrayList<>();
  11.     private TextView testTextView;
  12.  
  13.     @Override
  14.     protected void onCreate(Bundle savedInstanceState)
  15.     {
  16.         super.onCreate(savedInstanceState);
  17.         setContentView(R.layout.activity_centerlockhorizontalscrollview);
  18.  
  19.         bindData();
  20.         setUIRef();
  21.         bindHZSWData();
  22.     }
  23. 	//将集合中的数据绑定到HorizontalScrollView上
  24.     private void bindHZSWData()
  25.     {	//为布局中textview设置好相关属性
  26.         LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, 
  27. 		ViewGroup.LayoutParams.WRAP_CONTENT);
  28.         layoutParams.gravity = Gravity.CENTER;
  29.         layoutParams.setMargins(20, 10, 20, 10);
  30.  
  31.         for (int i = 0; i < data.size(); i++)
  32.         {
  33.             TextView textView = new TextView(this);
  34.             textView.setText(data.get(i));
  35.             textView.setTextColor(Color.WHITE);
  36.             textView.setLayoutParams(layoutParams);
  37.             container.addView(textView);  
  38.             container.invalidate();  
  39.         }
  40.     }
  41.  
  42. 	//初始化布局中的控件
  43.     private void setUIRef()
  44.     {
  45.         horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView);
  46.         container = (LinearLayout) findViewById(R.id.horizontalScrollViewItemContainer);
  47.         testTextView = (TextView) findViewById(R.id.testTextView);
  48.     }
  49. 	//将字符串数组与集合绑定起来
  50.     private void bindData()
  51.     {
  52.         //add all cities to our ArrayList
  53.         Collections.addAll(data, cities);
  54.     }
  55.  
  56. }

运行效果如图：

（3）为HorizontalScrollView中的item设置点击事件

在上面的代码中添加两段代码

  1.     private void bindHZSWData() {
  2. 		....
  3. 		....
  4.         for (int i = 0; i < data.size(); i++) {
  5.             TextView textView = new TextView(this);
  6.             textView.setText(data.get(i));
  7.             textView.setTextColor(Color.WHITE);
  8.             textView.setLayoutParams(layoutParams);
  9.  
  10.             textView.setOnClickListener(new View.OnClickListener() {
  11.                 @Override
  12.                 public void onClick(View view) {
  13.                     performItemClick(view);
  14.                 }
  15.             });
  16. 		....
  17.         }
  18.     }
  1.     private void performItemClick(View view) {
  2.         //------get Display's Width--------
  3.         DisplayMetrics displayMetrics = new DisplayMetrics();
  4.         getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
  5.  
  6.         int screenWidth = displayMetrics.widthPixels;
  7.  
  8.         int scrollX = (view.getLeft() - (screenWidth / 2)) + (view.getWidth() / 2);
  9.  
  10.         //smooth scrolling horizontalScrollView
  11.         horizontalScrollView.smoothScrollTo(scrollX, 0);
  12.  
  13.         //additionally we set current center textView data to our testTextView
  14.         String s = "CenterLocked Item: "+((TextView)view).getText();
  15.         testTextView.setText(s);
  16.     }

为了展示显示效果，将每次item中的text设置到界面中，进行显示，运行效果如图：

三、上代码，具体实现图片类的横向布局

（1）主布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:paddingBottom="@dimen/activity_vertical_margin"
  7.     android:paddingLeft="@dimen/activity_horizontal_margin"
  8.     android:paddingRight="@dimen/activity_horizontal_margin"
  9.     android:paddingTop="@dimen/activity_vertical_margin"
  10.     tools:context="com.example.administrator.hscrollview.MainActivity">
  11.  
  12.     <HorizontalScrollView
  13.         android:id="@+id/horizontalScrollView"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="wrap_content"
  16.         android:background="#007b12">
  17.  
  18.         <LinearLayout
  19.             android:id="@+id/horizontalScrollViewItemContainer"
  20.             android:layout_width="wrap_content"
  21.             android:layout_height="match_parent"
  22.             android:orientation="horizontal" />
  23.     </HorizontalScrollView>
  24. </RelativeLayout>

（2）主Activity代码

  1. public class MainActivity extends AppCompatActivity {
  2.  
  3.     private HorizontalScrollView horizontalScrollView;
  4.     private LinearLayout container;
  5.     private Integer mImgIds[] = new Integer[]{R.drawable.aa, R.drawable.bb, R.drawable.cc, R.drawable.dd,
  6.             R.drawable.ee, R.drawable.ff, R.drawable.gg, R.drawable.hh, R.drawable.ii, R.drawable.aaa,
  7.             R.drawable.bbb, R.drawable.ccc, R.drawable.ddd,
  8.             R.drawable.eee, R.drawable.fff, R.drawable.ggg, R.drawable.hhh, R.drawable.iii};
  9.  
  10.  
  11.     private ArrayList<Integer> data = new ArrayList<>();
  12.  
  13.  
  14.     @Override
  15.     protected void onCreate(Bundle savedInstanceState) {
  16.         super.onCreate(savedInstanceState);
  17.         setContentView(R.layout.activity_main);
  18.  
  19.         bindData();
  20.         setUIRef();
  21.         bindHZSWData();
  22.     }
  23.  
  24.     private void bindHZSWData() {
  25.         LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
  26.                 ViewGroup.LayoutParams.WRAP_CONTENT);
  27.         layoutParams.gravity = Gravity.CENTER;
  28.         layoutParams.setMargins(20, 10, 20, 10);
  29.  
  30.         for (int i = 0; i < data.size(); i++) {
  31.             ImageView imageView = new ImageView(this);
  32.             imageView.setImageResource(data.get(i));
  33.             imageView.setLayoutParams(layoutParams);
  34.  
  35.             container.addView(imageView);
  36.             container.invalidate();
  37.         }
  38.     }
  39.  
  40.     //初始化布局中定义的控件
  41.     private void setUIRef() {
  42.         horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView);
  43.         container = (LinearLayout) findViewById(R.id.horizontalScrollViewItemContainer);
  44.         testTextView = (TextView) findViewById(R.id.testTextView);
  45.     }
  46.  
  47.     //将字符串数组中的数据加入到集合当中
  48.     private void bindData() {
  49.         //add all cities to our ArrayList
  50.         Collections.addAll(data, mImgIds);
  51.     }
  52. }

 

运行效果如图：

 

 

当然了，最简单的运用图片类的HorizontalScrollView，就是直接将图片放置在HorizontalScrollView的子布局中进行显示，只需要一个布局文件进行控制，这样做非常简单，UI是通过布局文件进行控制。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:id="@+id/activity_main"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context="com.example.administrator.horizontalscrollview.MainActivity">
  8.  
  9.     <HorizontalScrollView
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content">
  12.         <LinearLayout
  13.             android:layout_width="wrap_content"
  14.             android:layout_height="wrap_content"
  15.             android:orientation="horizontal">
  16.  
  17.             <ImageView
  18.                 android:layout_width="200dp"
  19.                 android:layout_height="200dp"
  20.                 android:background="#ff00ff" />
  21.  
  22.             <ImageView
  23.                 android:layout_width="200dp"
  24.                 android:layout_height="200dp"
  25.                 android:background="#000000" />
  26.  
  27.             <ImageView
  28.                 android:layout_width="200dp"
  29.                 android:layout_height="200dp"
  30.                 android:background="#b7a500" />
  31.  
  32.             <ImageView
  33.                 android:layout_width="200dp"
  34.                 android:layout_height="200dp"
  35.                 android:background="#c1070e" />
  36.  
  37.             <ImageView
  38.                 android:layout_width="200dp"
  39.                 android:layout_height="200dp"
  40.                 android:background="#ff00ff" />
  41.  
  42.             <ImageView
  43.                 android:layout_width="200dp"
  44.                 android:layout_height="200dp"
  45.                 android:background="#000000" />
  46.  
  47.             <ImageView
  48.                 android:layout_width="200dp"
  49.                 android:layout_height="200dp"
  50.                 android:background="#b7a500" />
  51.  
  52.             <ImageView
  53.                 android:layout_width="200dp"
  54.                 android:layout_height="200dp"
  55.                 android:background="#c1070e" />
  56.  
  57.         </LinearLayout>
  58.     </HorizontalScrollView>
  59. </RelativeLayout>

注意：无论使用何种方式，注意HoriztalScrollview都只有一个直接子view。否则会报错：

Caused by: java.lang.IllegalStateException: HorizontalScrollView can host only one direct child

三、HorizontalScrollView添加自动滚动和回弹效果

1）添加自动滚动效果

HorizontalScrollView并没有内置自动滚动的API方法，所以要自己实现，滚动类似平移，所以采用平移动画实现。

  1. private AnimatorSet mAnimatorSetLeft, mAnimatorSetRight;
  2. private ObjectAnimator mItemsliding;
  3. private ObjectAnimator mItemsAlpha;
  4.  
  5.     //初始化布局中的控件
  6.     private void setUIRef() {
  7.         horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView);
  8.         UITools.elasticPadding(horizontalScrollView, 300); // 可选 为左右回弹效果实现
  9.         //container 为HorizontalScrollView的直接子布局
  10.         container = (LinearLayout) findViewById(R.id.horizontalScrollViewItemContainer);
  11.  
  12.         mAnimatorSetLeft = new AnimatorSet();
  13.         mAnimatorSetRight = new AnimatorSet();
  14.         mItemsliding = ObjectAnimator.ofFloat(container,"translationX",0,-300);
  15.         mItemsAlpha = ObjectAnimator.ofFloat(container,"alpha",1,1);
  16.         mAnimatorSetLeft.setDuration(0);
  17.         mAnimatorSetLeft.play(mItemsliding).with(mItemsAlpha);
  18.         mAnimatorSetLeft.start();
  19.         mAnimatorSetLeft.addListener(new AnimatorListenerAdapter() {
  20.             @Override
  21.             public void onAnimationEnd(Animator animation) {
  22.                 super.onAnimationEnd(animation);
  23.                 mItemsliding = ObjectAnimator.ofFloat(container,"translationX",-300,0);
  24.                 mItemsAlpha = ObjectAnimator.ofFloat(container,"alpha",1,1);
  25.                 mAnimatorSetRight.setStartDelay(500);
  26.                 mAnimatorSetRight.setDuration(500);
  27.                 mAnimatorSetRight.play(mItemsliding).with(mItemsAlpha);
  28.                 mAnimatorSetRight.start();
  29.             }
  30.         });
  31.  
  32.         testTextView = (TextView) findViewById(R.id.testTextView);
  33.     }
  34.

注意，这里的动画绑定对象不是HoriztalScrollView而是其直接子布局对象container。

效果如下：

2）添加回弹效果

HorizontalScrollView添加回弹效果，有两种方案：①自定义HorizontalScrollView；②使用工具类；

①自定义HorizontalScrollView，使用时直接作为布局元素替换掉旧的HorizontalScrollView即可；

  1. public class BouncyHScrollView extends HorizontalScrollView {
  2.  
  3.     private static final int MAX_X_OVERSCROLL_DISTANCE = 200;
  4.     private Context mContext;
  5.     private int mMaxXOverscrollDistance;
  6.  
  7.     public BouncyHScrollView(Context context) {
  8.         super(context);
  9.         // TODO Auto-generated constructor stub
  10.         mContext = context;
  11.         initBounceDistance();
  12.     }
  13.     public BouncyHScrollView(Context context, AttributeSet attrs) {
  14.         super(context, attrs);
  15.         // TODO Auto-generated constructor stub
  16.         mContext = context;
  17.         initBounceDistance();
  18.     }
  19.     public BouncyHScrollView(Context context, AttributeSet attrs, int defStyle) {
  20.         super(context, attrs, defStyle);
  21.         // TODO Auto-generated constructor stub
  22.         mContext = context;
  23.         initBounceDistance();
  24.     }
  25.  
  26.     private void initBounceDistance(){
  27.         final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
  28.         mMaxXOverscrollDistance = (int) (metrics.density * MAX_X_OVERSCROLL_DISTANCE);
  29.     }
  30.  
  31.     @Override
  32.     protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent){
  33.         //这块是关键性代码
  34.         return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, mMaxXOverscrollDistance, maxOverScrollY, isTouchEvent);
  35.     }
  36.  
  37. }

②工具类；调用代码

  1. public class UITools {
  2.  
  3.     /**HorizontalScrollView添加阻尼效果
  4.      * ScrollView效果不太好
  5.      * 利用父元素的Padding给ScrollView添加弹性
  6.      * @param scrollView
  7.      * @param padding
  8.      */
  9.     public static void elasticPadding(final ScrollView scrollView, final int padding){
  10.         View child = scrollView.getChildAt(0);
  11.         //记录以前的padding
  12.         final int oldpt = child.getPaddingTop();
  13.         final int oldpb = child.getPaddingBottom();
  14.         //设置新的padding
  15.         child.setPadding(child.getPaddingLeft(), padding+oldpt, child.getPaddingRight(), padding+oldpb);
  16.  
  17.         //添加视图布局完成事件监听
  18.         scrollView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
  19.             private boolean inTouch = false; //手指是否按下状态
  20.  
  21.             @SuppressLint("NewApi")
  22.             private void disableOverScroll(){
  23.                 scrollView.setOverScrollMode(ScrollView.OVER_SCROLL_NEVER);
  24.             }
  25.  
  26.             /**  滚动到顶部 */
  27.             private void scrollToTop(){
  28.                 scrollView.smoothScrollTo(scrollView.getScrollX(), padding-oldpt);
  29.             }
  30.  
  31.             /** 滚动到底部 */
  32.             private void scrollToBottom(){
  33.                 scrollView.smoothScrollTo(scrollView.getScrollX(), scrollView.getChildAt(0).getBottom()-scrollView.getMeasuredHeight()-padding+oldpb);
  34.             }
  35.  
  36.             /** 检测scrollView结束以后,复原位置 */
  37.             private final Runnable checkStopped = new Runnable() {
  38.                 @Override
  39.                 public void run() {
  40.                     int y = scrollView.getScrollY();
  41.                     int bottom = scrollView.getChildAt(0).getBottom()-y-scrollView.getMeasuredHeight();
  42.                     if(y <= padding && !inTouch){
  43.                         scrollToTop();
  44.                     }else if(bottom<=padding && !inTouch){
  45.                         scrollToBottom();
  46.                     }
  47.                 }
  48.             };
  49.  
  50.             @SuppressWarnings("deprecation")
  51.             @Override
  52.             public void onGlobalLayout() {
  53.                 //移除监听器
  54.                 scrollView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
  55.                 //设置最小高度
  56.                 //scrollView.getChildAt(0).setMinimumHeight(scrollView.getMeasuredHeight());
  57.                 //取消overScroll效果
  58.                 if(Build.VERSION.SDK_INT > Build.VERSION_CODES.GINGERBREAD){
  59.                     disableOverScroll();
  60.                 }
  61.  
  62.                 scrollView.setOnTouchListener(new OnTouchListener() {
  63.                     @Override
  64.                     public boolean onTouch(View v, MotionEvent event) {
  65.                         if(event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_POINTER_DOWN){
  66.                             inTouch = true;
  67.                         }else if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL){
  68.                             inTouch = false;
  69.                             //手指弹起以后检测一次是否需要复原位置
  70.                             scrollView.post(checkStopped);
  71.                         }
  72.                         return false;
  73.                     }
  74.                 });
  75.  
  76.                 scrollView.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {
  77.                     @Override
  78.                     public void onScrollChanged() {
  79.                         if(!inTouch && scrollView!=null && scrollView.getHandler()!=null){//如果持续滚动,移除checkStopped,停止滚动以后只执行一次检测任务
  80.                             scrollView.getHandler().removeCallbacks(checkStopped);
  81.                             scrollView.postDelayed(checkStopped, 100);
  82.                         }
  83.                     }
  84.                 });
  85.  
  86.                 //第一次加载视图,复原位置
  87.                 scrollView.postDelayed(checkStopped, 300);
  88.             }
  89.         });
  90.     }
  91.  
  92.     /**
  93.      * 利用父元素的Padding给HorizontalScrollView添加弹性
  94.      * @param scrollView
  95.      * @param padding
  96.      */
  97.     public static void elasticPadding(final HorizontalScrollView scrollView, final int padding){
  98.         Log.i("", "elasticPadding>>>>!!");
  99.         View child = scrollView.getChildAt(0);
  100.  
  101.         //记录以前的padding
  102.         final int oldpt = child.getPaddingTop();
  103.         final int oldpb = child.getPaddingBottom();
  104.         //设置新的padding
  105.         child.setPadding(padding+oldpt, child.getPaddingTop(), padding+oldpb, child.getPaddingBottom());
  106.  
  107.         //添加视图布局完成事件监听
  108.         scrollView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
  109.             private boolean inTouch = false; //手指是否按下状态
  110.  
  111.             @SuppressLint("NewApi")
  112.             private void disableOverScroll(){
  113.                 scrollView.setOverScrollMode(ScrollView.OVER_SCROLL_NEVER);
  114.             }
  115.  
  116.             /**  滚动到左边 */
  117.             private void scrollToLeft(){
  118.                 scrollView.smoothScrollTo(padding-oldpt, scrollView.getScrollY());
  119.             }
  120.  
  121.             /** 滚动到底部 */
  122.             private void scrollToRight(){
  123.                 scrollView.smoothScrollTo(scrollView.getChildAt(0).getRight()-scrollView.getMeasuredWidth()-padding+oldpb, scrollView.getScrollY());
  124.             }
  125.  
  126.             /** 检测scrollView结束以后,复原位置 */
  127.             private final Runnable checkStopped = new Runnable() {
  128.                 @Override
  129.                 public void run() {
  130.                     int x = scrollView.getScrollX();
  131.                     int bottom = scrollView.getChildAt(0).getRight()-x-scrollView.getMeasuredWidth();
  132.                     if(x <= padding && !inTouch){
  133.                         scrollToLeft();
  134.                     }else if(bottom<=padding && !inTouch){
  135.                         scrollToRight();
  136.                     }
  137.                 }
  138.             };
  139.  
  140.             @SuppressWarnings("deprecation")
  141.             @Override
  142.             public void onGlobalLayout() {
  143.                 //移除监听器
  144.                 scrollView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
  145.  
  146.                 //取消overScroll效果
  147.                 if(Build.VERSION.SDK_INT > Build.VERSION_CODES.GINGERBREAD){
  148.                     disableOverScroll();
  149.                 }
  150.  
  151.                 scrollView.setOnTouchListener(new OnTouchListener() {
  152.                     @Override
  153.                     public boolean onTouch(View v, MotionEvent event) {
  154.                         if(event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_POINTER_DOWN){
  155.                             inTouch = true;
  156.                         }else if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL){
  157.                             inTouch = false;
  158.                             //手指弹起以后检测一次是否需要复原位置
  159.                             scrollView.post(checkStopped);
  160.                         }
  161.                         return false;
  162.                     }
  163.                 });
  164.  
  165.                 scrollView.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {
  166.                     @Override
  167.                     public void onScrollChanged() {
  168.                         //如果持续滚动,移除checkStopped,停止滚动以后只执行一次检测任务
  169.                         if(!inTouch && scrollView!=null && scrollView.getHandler()!=null){
  170.                             scrollView.getHandler().removeCallbacks(checkStopped);
  171.                             scrollView.postDelayed(checkStopped, 100);
  172.                         }
  173.                     }
  174.                 });
  175.  
  176.                 //第一次加载视图,复原位置
  177.                 scrollView.postDelayed(checkStopped, 300);
  178.             }
  179.         });
  180.     }
  181. }

调用代码：

UITools.elasticPadding(horizontalScrollView, 200);

传入HorizontalScrollView对象和一个int类型（表示回弹的距离）的数值即可.

效果如下：

最后补充两个HorizontalScrollView的滚动方法：

HorizontalScrollView属于Scroll类家族成员，自然少不了控制其滚动的方法：

①滚动到指定位置 —— smoothScrollTo (intx, inty);

②滚动指定距离 —— smoothScrollBy (intx, inty);

 

2019.04.21添加：HorizontalScrollView点击子项自动居中的实现，利用smoothScrollTo ()方法实现：

  1. public class HorCenterActivity extends AppCompatActivity implements View.OnClickListener {
  2.  
  3.     private HorizontalScrollView hor;
  4.     private LinearLayout ll;
  5.  
  6.     @Override
  7.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         setContentView(R.layout.activity_hor);
  10.         hor = findViewById(R.id.hor);
  11.         ll = findViewById(R.id.ll);
  12.         for (int i = 0; i < ll.getChildCount(); i++) {
  13.             ll.getChildAt(i).setOnClickListener(this);
  14.         }
  15.     }
  16.  
  17.     // 实现Horizon自动滚动居中
  18.     private void autoScroll(int i) {
  19.         // Width of the screen
  20.         DisplayMetrics metrics = getResources()
  21.                 .getDisplayMetrics();
  22.         int widthScreen = metrics.widthPixels;
  23.  
  24.         // Width of one child (Button)
  25.         int widthChild = ll.getChildAt(i).getWidth(); // 获取对应位置的子View的宽度
  26.  
  27.         // Nb children in screen
  28.         int nbChildInScreen = widthScreen / widthChild;
  29.  
  30.         // Child position left
  31.         int positionLeftChild = ll.getChildAt(i).getLeft(); // 获取对应位置的子View的左边位置 - 坐标
  32.  
  33.         // Auto scroll to the middle
  34.         hor.smoothScrollTo((positionLeftChild - ((nbChildInScreen * widthChild) / 2) + widthChild / 2), 0);
  35. //        hor.smoothScrollTo((positionLeftChild - (widthScreen / 2) + widthChild / 2), 0);
  36.     }
  37.  
  38.     @Override
  39.     public void onClick(View v) {
  40.         switch (v.getId()) {
  41.             case R.id.a:
  42.                 autoScroll(0);
  43.                 break;
  44.             case R.id.aa:
  45.                 autoScroll(1);
  46.                 break;
  47.             case R.id.aaa:
  48.                 autoScroll(2);
  49.                 break;
  50.             case R.id.aaaa:
  51.                 autoScroll(3);
  52.                 break;
  53.             case R.id.aaaaa:
  54.                 autoScroll(4);
  55.                 break;
  56.             case R.id.aaaaaa:
  57.                 autoScroll(5);
  58.                 break;
  59.             case R.id.aaaaaaa:
  60.                 autoScroll(6);
  61.                 break;
  62.             case R.id.aaaaaaaa:
  63.                 autoScroll(7);
  64.                 break;
  65.         }
  66.     }
  67. }

如上autoScroll()方法，我们传入子项的索引值即可，从0开始，注意，此实现方式不论子项是否可见，索引值都是不变的，比如一共有7个子项，索引值是0~6，然后将前三个子项设为不可见，此时所有子项的索引值仍然是0~6，而不会有所变化。

效果如下：

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/466558
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号