经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
Android使用HorizontalScrollView实现水平滚动
来源：jb51　　时间：2018/11/25 19:38:57　　对本文有异议

HorizontalScrollView 和 ScrollView 都是由 FrameLayout 派生出来的。它们就是一个用于为普通组件添加滚动条的组件。且 HorizontalScrollView 和 ScrollView 里面最多只能包含一个组件（当然组件里面还可以嵌套组件）。它们不同的是 HorizontalScrollView 用于添加水平滚动，而 ScrollView 用于添加垂直滚动。

突然间想到 做一个屏幕下方水平滑动，屏幕上方并作出相应的反应的效果。只是在下方滚动时，屏幕上方没有作出理想的反应，点击事件倒是实现了。最终只能在网上搜索，终于找到了一个。于是作出的效果如下：

只是这个效果还有所缺陷，加载了 13 张图片，在屏幕下方水平滚动到最后一页时，第 9 张的图片并没有在上面的显示出来(原作者的也有这个问题)；如果图片的数量小于或者等于 4 张时则不能运行。

本例的难点主要在于 MyHorizontalView 类中，并且还有收集而来的注解。

MainActivity.java :

  1. package com.crazy.horizontalscrollviewtest;
  2.  
  3. import java.io.InputStream;
  4. import java.util.ArrayList;
  5. import java.util.Arrays;
  6. import java.util.List;
  7.  
  8. import com.crazy.horizontalscrollviewtest.MyHorizontalView.CurrentImageChangeListener;
  9. import com.crazy.horizontalscrollviewtest.MyHorizontalView.OnItemClickListener;
  10.  
  11. import android.content.Context;
  12. import android.graphics.Bitmap;
  13. import android.graphics.BitmapFactory;
  14. import android.graphics.Color;
  15. import android.os.Bundle;
  16. import android.util.Log;
  17. import android.view.View;
  18. import android.widget.ImageView;
  19. import android.support.v7.app.AppCompatActivity;
  20.  
  21.  
  22. public class MainActivity extends AppCompatActivity {
  23.  
  24.   private ImageView mImageView;
  25.   private MyHorizontalView myHorizontalView;
  26.   private List<Bitmap> bitmapList;
  27.   private MyAdapter adapter;
  28.  
  29.   @Override
  30.   protected void onCreate(Bundle savedInstanceState) {
  31.     super.onCreate(savedInstanceState);
  32.     setContentView(R.layout.activity_main);
  33.  
  34.     init();
  35.   }
  36.  
  37.   private void init() {
  38.     mImageView = (ImageView)findViewById(R.id.imageView);
  39.  
  40.     bitmapList = new ArrayList<>(Arrays.asList(
  41.         readBitMap(this, R.drawable.bricks),
  42.         readBitMap(this, R.drawable.dog),
  43.         readBitMap(this, R.drawable.flower),
  44.         readBitMap(this, R.drawable.grass),
  45.         readBitMap(this, R.drawable.stones),
  46.         readBitMap(this, R.drawable.wood),
  47.         readBitMap(this, R.drawable.bg_01),
  48.         readBitMap(this, R.drawable.bg_02),
  49.         readBitMap(this, R.drawable.bg_03),
  50.         readBitMap(this, R.drawable.bg_04),
  51.         readBitMap(this, R.drawable.bg_05),
  52.         readBitMap(this, R.drawable.bg_06),
  53.         readBitMap(this, R.drawable.bg_07)
  54.     ));
  55.  
  56.     myHorizontalView = (MyHorizontalView)findViewById(R.id.my_horizontal);
  57.     adapter = new MyAdapter(this, bitmapList);
  58.  
  59.     //设置适配器
  60.     myHorizontalView.initDatas(adapter);
  61.  
  62.     //添加滚动回调
  63.     myHorizontalView
  64.         .setCurrentImageChangeListener(new CurrentImageChangeListener() {
  65.           @Override
  66.           public void onCurrentImgChanged(int position, View viewIndicator) {
  67.             Log.e("==============","===============  " + position);
  68.             mImageView.setImageBitmap(bitmapList.get(position));
  69.             viewIndicator.setBackgroundColor(Color.parseColor("#AA024DA4"));
  70.           }
  71.         });
  72.  
  73.     //添加点击回调
  74.     myHorizontalView.setOnItemClickListener(new OnItemClickListener() {
  75.       @Override
  76.       public void onItemClick(View view, int position) {
  77.  
  78.         mImageView.setImageBitmap(bitmapList.get(position));
  79.         view.setBackgroundColor(Color.parseColor("#AA024DA4"));
  80.       }
  81.     });
  82.   }
  83.  
  84.   public static Bitmap readBitMap(Context mContext, int resId) {
  85.     BitmapFactory.Options opt = new BitmapFactory.Options();
  86.     opt.inPreferredConfig = Bitmap.Config.RGB_565;
  87.     opt.inPurgeable = true;
  88.     opt.inInputShareable = true;
  89.  
  90.     InputStream is = mContext.getResources().openRawResource(resId);
  91.     return BitmapFactory.decodeStream(is, null, opt);
  92.   }
  93.  
  94. }

MyAdapter 这部分并不是为 AbsListView 和 AbsSpinner 及其子类提供列表项的。它主要用于为 HorizontalScrollView 提供数据。

MyAdapter.java :

  1. package com.crazy.horizontalscrollviewtest;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.List;
  5.  
  6. import android.content.Context;
  7. import android.graphics.Bitmap;
  8. import android.util.Log;
  9. import android.view.View;
  10. import android.view.ViewGroup;
  11. import android.widget.BaseAdapter;
  12. import android.widget.ImageView;
  13. import android.widget.RelativeLayout;
  14.  
  15. /**
  16.  * Created by antimage on 2016/1/9.
  17.  */
  18. public class MyAdapter extends BaseAdapter {
  19.  
  20.   private List<Bitmap> bitmapList;
  21.   private Context mContext;
  22.  
  23.   public MyAdapter(Context context, List<Bitmap> bitmapList) {
  24.     mContext = context;
  25.     if (bitmapList == null) {
  26.       bitmapList = new ArrayList<Bitmap>();
  27.     } else {
  28.       this.bitmapList = bitmapList;
  29.     }
  30.   }
  31.  
  32.   @Override
  33.   public int getCount() {
  34.     return bitmapList.size();
  35.   }
  36.  
  37.   @Override
  38.   public Object getItem(int position) {
  39.     return bitmapList.get(position);
  40.   }
  41.  
  42.   @Override
  43.   public long getItemId(int position) {
  44.     return position;
  45.   }
  46.  
  47.   @Override
  48.   public View getView(int position, View convertView, ViewGroup parent) {
  49.  
  50.     ViewHolder viewHolder = null;
  51.     View view = null;
  52.     // 此处要用相对布局，且与 XML 中的布局相同；
  53.     // 如果使用线性布局，则显示不完整
  54.     RelativeLayout layout;
  55.     if (convertView == null) {
  56.  
  57.       layout = (RelativeLayout) View.inflate(mContext, R.layout.image_item_layout, null);
  58.  
  59.       viewHolder = new ViewHolder();
  60.  
  61.       viewHolder.image = (ImageView) layout.findViewById(R.id.top_image);
  62.       layout.setTag(viewHolder);
  63.     } else {
  64.       layout = (RelativeLayout) convertView;
  65.       view = layout;
  66.       viewHolder = (ViewHolder) layout.getTag();
  67.       Log.e("MyAdapter", "正在检测数据来了没有 ");
  68.     }
  69.     Bitmap btm = (Bitmap) getItem(position);
  70.     viewHolder.image.setImageBitmap(btm);
  71.  
  72.     Log.e("MyAdapter", "信息来了哦！");
  73.  
  74.     return layout;
  75.   }
  76.  
  77.   private static class ViewHolder {
  78.     ImageView image;
  79.   }
  80.  
  81. }

MyHorizontalView 类主要用于未 MainAcitivity 类提供接口、水平滚动时屏幕上方的反应及相应的点击事件等。该类主要使用了收集而来的代码，并做了相应的调整。

MyHorizontalView.java :

  1. package com.crazy.horizontalscrollviewtest;
  2.  
  3.  
  4. import java.util.HashMap;
  5. import java.util.Map;
  6.  
  7. import android.app.Activity;
  8. import android.content.Context;
  9. import android.graphics.Color;
  10. import android.util.AttributeSet;
  11. import android.util.DisplayMetrics;
  12. import android.util.Log;
  13. import android.view.MotionEvent;
  14. import android.view.View;
  15. import android.view.ViewGroup;
  16. import android.widget.HorizontalScrollView;
  17.  
  18. /**
  19.  * Created by antimage on 2016/1/9.
  20.  */
  21. public class MyHorizontalView extends HorizontalScrollView
  22.     implements View.OnClickListener {
  23.  
  24.   private String TAG = "MyHorizontalView";
  25.  
  26.   private ViewGroup parent;
  27.   private int screenWidth;
  28.   /* 当前最后一张图片的index*/
  29.   private int mCurrentIndex;
  30.   /* 当前第一张图片的下标*/
  31.   private int mFristIndex;
  32.   /* 每屏幕最多显示的个数*/
  33.   private int mCountOneScreen;
  34.   /* 子元素的宽度*/
  35.   private int mChildWidth;
  36.   /* 子元素的高度*/
  37.   private int mChildHeight;
  38.  
  39.   private MyAdapter mAdapter;
  40.  
  41.   private CurrentImageChangeListener mListener;
  42.  
  43.   private OnItemClickListener mOnItemClickListener;
  44.  
  45.   /**
  46.    * 图片滚动时的回调接口
  47.    */
  48.   public interface CurrentImageChangeListener {
  49.     void onCurrentImgChanged(int position, View viewIndicator);
  50.   }
  51.  
  52.   /**
  53.    * 点击条目时的回调
  54.    */
  55.   public interface OnItemClickListener {
  56.     void onItemClick(View view, int pos);
  57.   }
  58.  
  59.   /* 保存View与位置的键值对 */
  60.   private Map<View, Integer> mViewPos = new HashMap<>();
  61.  
  62.   public MyHorizontalView(Context context) {
  63.     this(context, null);
  64.   }
  65.  
  66.   public MyHorizontalView(Context context, AttributeSet attrs) {
  67.     this(context, attrs, 0);
  68.   }
  69.  
  70.   public MyHorizontalView(Context context, AttributeSet attrs, int defStyleAttr) {
  71.     super(context, attrs, defStyleAttr);
  72.  
  73.     this.setSmoothScrollingEnabled(true);
  74.  
  75.     DisplayMetrics metrics = new DisplayMetrics();
  76.     // 取得窗口属性
  77.     ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(metrics);
  78.     // 窗口的宽度 （像素）
  79.     screenWidth = metrics.widthPixels;
  80.   }
  81.  
  82.   /**
  83.    * 初始化数据，设置数据适配器
  84.    */
  85.   public void initDatas(MyAdapter mAdapter) {
  86.  
  87.     if (getChildCount() == 0) {
  88.       Log.e(TAG, "必须要有子元素");
  89.     }
  90.     if (getChildCount() == 0 || mAdapter == null)
  91.       return;
  92.  
  93.     this.mAdapter = mAdapter;
  94.     parent = (ViewGroup) getChildAt(0);
  95.  
  96.     // 获得适配器中第一个View
  97.     final View view = mAdapter.getView(0, null, parent);
  98.     parent.addView(view);
  99.  
  100.     // 强制计算当前View的宽和高
  101.     if (mChildWidth == 0 && mChildHeight == 0) {
  102.       int w = View.MeasureSpec.makeMeasureSpec(0,
  103.           View.MeasureSpec.UNSPECIFIED);
  104.       int h = View.MeasureSpec.makeMeasureSpec(0,
  105.           View.MeasureSpec.UNSPECIFIED);
  106.  
  107.       view.measure(w, h);
  108.       mChildHeight = view.getMeasuredHeight();
  109.       mChildWidth = view.getMeasuredWidth();
  110.       Log.e(TAG, "子组件的宽：" + mChildWidth + ", 子组件的高：" + mChildHeight);
  111.  
  112.       // 计算每次加载多少个View
  113.       mCountOneScreen = screenWidth / mChildWidth + 2;
  114.  
  115.       Log.e(TAG, "mCountOneScreen = " + mCountOneScreen
  116.           + " ,mChildWidth = " + mChildWidth);
  117.     }
  118.     //初始化第一屏幕的元素
  119.     loadFirstChild(mCountOneScreen);
  120.   }
  121.  
  122.   /**
  123.    * 加载第一屏的View
  124.    */
  125.   public void loadFirstChild(int mCountOneScreen) {
  126.  
  127.     parent.removeAllViews();
  128.     mViewPos.clear();
  129.  
  130.     for (int i = 0; i < mCountOneScreen; i++) {
  131.       View view = mAdapter.getView(i, null, parent);
  132.       view.setOnClickListener(this);
  133.       parent.addView(view);
  134.       mViewPos.put(view, i);
  135.       mCurrentIndex = i;
  136.     }
  137.  
  138.     if (mListener != null) {
  139.       notifyCurrentImageChanged();
  140.     }
  141.   }
  142.  
  143.   @Override
  144.   public boolean onTouchEvent(MotionEvent event) {
  145.  
  146.     switch (event.getAction()) {
  147.       case MotionEvent.ACTION_MOVE:
  148.  
  149.         int scrollX = getScrollX();
  150.         // 如果当前scrollX为view的宽度，加载下一张，移除第一张
  151.         if (scrollX >= mChildWidth) {
  152.           loadNextImage();
  153.         }
  154.         // 如果当前scrollX = 0， 往前设置一张，移除最后一张
  155.         if (scrollX == 0) {
  156.           loadPreImage();
  157.         }
  158.         break;
  159.     }
  160.     // 这里无论返回值是设置 true 还是 false
  161.     // HorizontalScrollView都不会滑动
  162.     return super.onTouchEvent(event);
  163.   }
  164.  
  165.   /**
  166.    * 加载下一张图片
  167.    */
  168.   protected void loadNextImage() {
  169.     // 数组边界值计算
  170.     if (mCurrentIndex == mAdapter.getCount() - 1) {
  171.       return;
  172.     }
  173.     //移除第一张图片，且将水平滚动位置置0（图片有宽度，所以为置0）
  174.     scrollTo(0, 0);
  175.     mViewPos.remove(parent.getChildAt(0));
  176.     parent.removeViewAt(0);
  177.  
  178.     //获取下一张图片，并且设置onClick事件，且加入容器中
  179.     View view = mAdapter.getView(++mCurrentIndex, null, parent);
  180.     Log.e(TAG, "mCurrentIndex ===" + mCurrentIndex);
  181.     view.setOnClickListener(this);
  182.     parent.addView(view);
  183.     mViewPos.put(view, mCurrentIndex);
  184.  
  185.     //当前第一张图片小标
  186.     mFristIndex++;
  187.     //如果设置了滚动监听则触发
  188.     if (mListener != null) {
  189.       notifyCurrentImageChanged();
  190.     }
  191.  
  192.   }
  193.  
  194.   /**
  195.    * 加载前一张图片
  196.    */
  197.   protected void loadPreImage() {
  198.     //如果当前已经是第一张，则返回
  199.     if (mFristIndex == 0)
  200.       return;
  201.     //获得当前应该显示为第一张图片的下标
  202.     int index = mCurrentIndex - mCountOneScreen;
  203.     if (index >= 0) {
  204.       //移除最后一张
  205.       int oldViewPos = parent.getChildCount() - 1;
  206.       mViewPos.remove(parent.getChildAt(oldViewPos));
  207.       parent.removeViewAt(oldViewPos);
  208.  
  209.       //将此View放入第一个位置
  210.       View view = mAdapter.getView(index, null, parent);
  211.       mViewPos.put(view, index);
  212.       parent.addView(view, 0);
  213.       view.setOnClickListener(this);
  214.       //水平滚动位置向左移动view的宽度个像素
  215.       scrollTo(mChildWidth, 0);
  216.       //当前位置--，当前第一个显示的下标--
  217.       mCurrentIndex--;
  218.       mFristIndex--;
  219.       //回调
  220.       if (mListener != null) {
  221.         notifyCurrentImageChanged();
  222.       }
  223.     }
  224.   }
  225.  
  226.   /**
  227.    * 滑动时的回调
  228.    */
  229.   public void notifyCurrentImageChanged() {
  230.  
  231.     int sum = parent.getChildCount();
  232.     for (int i = 0; i < sum; i++) {
  233.       // 清除所有的背景色，点击时会设置为蓝色
  234.       parent.getChildAt(i).setBackgroundColor(Color.WHITE);
  235.     }
  236.  
  237.     mListener.onCurrentImgChanged(mFristIndex, parent.getChildAt(0));
  238.   }
  239.  
  240.   @Override
  241.   public void onClick(View v) {
  242.  
  243.     if (mOnItemClickListener != null) {
  244.  
  245.       int sum = parent.getChildCount();
  246.       for (int i = 0; i < sum; i++) {
  247.         parent.getChildAt(i).setBackgroundColor(Color.WHITE);
  248.       }
  249.       mOnItemClickListener.onItemClick(v, mViewPos.get(v));
  250.     }
  251.   }
  252.  
  253.   public void setOnItemClickListener(OnItemClickListener mOnClickListener) {
  254.     this.mOnItemClickListener = mOnClickListener;
  255.   }
  256.  
  257.   public void setCurrentImageChangeListener(CurrentImageChangeListener mListener) {
  258.     this.mListener = mListener;
  259.   }
  260. }

该类中的很多数据都在 List 集合里面，而集合的下标初始值为 0，与 list.size() 不相等。顾猜测，正是由于这个原因，在 mImageView 显示图片时，不能显示到第 9 张。

在这个类中 计算每次加载多少个 View 时的 mCountOneScreen 计算方法感觉略有问题，从效果图中可以看出，屏幕中能加载 3 张多一点的图片。mCountOneScreen = screenWidth / mChildWidth + 2; 在我的模拟器上计算得出的结果等于 5，也就是为什么不能加载小于等于 4 张图片，如果想要让该屏幕底部上只显示 3 张即一个屏幕也就能显示完。那就不用水平滚动了，那样就感觉使用 HorizontalScrollView 失去了意义。

所用到的布局文件：

content_main.xml :

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.   xmlns:app="http://schemas.android.com/apk/res-auto"
  4.   xmlns:tools="http://schemas.android.com/tools"
  5.   android:layout_width="match_parent"
  6.   android:layout_height="match_parent"
  7.   android:paddingLeft="5dp"
  8.   android:paddingTop="5dp"
  9.   android:paddingRight="5dp"
  10.   android:paddingBottom="5dp"
  11.   app:layout_behavior="@string/appbar_scrolling_view_behavior"
  12.   tools:context="com.crazy.horizontalscrollviewtest.MainActivity"
  13.   tools:showIn="@layout/activity_main">
  14.  
  15.  
  16.   <ImageView
  17.     android:id="@+id/imageView"
  18.     android:layout_width="match_parent"
  19.     android:layout_height="380dp"
  20.     android:scaleType="centerCrop" />
  21.  
  22.   <com.crazy.horizontalscrollviewtest.MyHorizontalView
  23.     android:id="@+id/my_horizontal"
  24.     android:layout_below="@id/imageView"
  25.     android:layout_alignParentBottom="true"
  26.     android:scrollbars="none"
  27.     android:layout_width="match_parent"
  28.     android:layout_height="wrap_content">
  29.  
  30.     <LinearLayout
  31.       android:id="@+id/linear_layout"
  32.       android:orientation="horizontal"
  33.       android:layout_gravity="center_vertical"
  34.       android:layout_width="wrap_content"
  35.       android:layout_height="wrap_content">
  36.     </LinearLayout>
  37.   </com.crazy.horizontalscrollviewtest.MyHorizontalView>
  38.  
  39. </RelativeLayout>

image_item_layout.xml (主要用于提供水平滚动的图片(屏幕底部)):

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.   android:layout_width="match_parent"
  4.   android:layout_height="match_parent"
  5.   android:orientation="vertical" >
  6.   
  7.   <ImageView 
  8.     android:id="@+id/top_image"
  9.     android:layout_width="wrap_content"
  10.     android:layout_height="wrap_content"
  11.     android:layout_margin="10dp"
  12.     android:scaleType="centerCrop"/>
  13.  
  14. </RelativeLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号