Android使用HorizontalScrollView实现水平滚动

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

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

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

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

mainactivity.java :

package com.crazy.horizontalscrollviewtest;
 
import java.io.inputstream;
import java.util.arraylist;
import java.util.arrays;
import java.util.list;
 
import com.crazy.horizontalscrollviewtest.myhorizontalview.currentimagechangelistener;
import com.crazy.horizontalscrollviewtest.myhorizontalview.onitemclicklistener;
 
import android.content.context;
import android.graphics.bitmap;
import android.graphics.bitmapfactory;
import android.graphics.color;
import android.os.bundle;
import android.util.log;
import android.view.view;
import android.widget.imageview;
import android.support.v7.app.appcompatactivity;
 
 
public class mainactivity extends appcompatactivity {
 
  private imageview mimageview;
  private myhorizontalview myhorizontalview;
  private list<bitmap> bitmaplist;
  private myadapter adapter;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
 
    init();
  }
 
  private void init() {
    mimageview = (imageview)findviewbyid(r.id.imageview);
 
    bitmaplist = new arraylist<>(arrays.aslist(
        readbitmap(this, r.drawable.bricks),
        readbitmap(this, r.drawable.dog),
        readbitmap(this, r.drawable.flower),
        readbitmap(this, r.drawable.grass),
        readbitmap(this, r.drawable.stones),
        readbitmap(this, r.drawable.wood),
        readbitmap(this, r.drawable.bg_01),
        readbitmap(this, r.drawable.bg_02),
        readbitmap(this, r.drawable.bg_03),
        readbitmap(this, r.drawable.bg_04),
        readbitmap(this, r.drawable.bg_05),
        readbitmap(this, r.drawable.bg_06),
        readbitmap(this, r.drawable.bg_07)
    ));
 
    myhorizontalview = (myhorizontalview)findviewbyid(r.id.my_horizontal);
    adapter = new myadapter(this, bitmaplist);
 
    //设置适配器
    myhorizontalview.initdatas(adapter);
 
    //添加滚动回调
    myhorizontalview
        .setcurrentimagechangelistener(new currentimagechangelistener() {
          @override
          public void oncurrentimgchanged(int position, view viewindicator) {
            log.e("==============","===============  " + position);
            mimageview.setimagebitmap(bitmaplist.get(position));
            viewindicator.setbackgroundcolor(color.parsecolor("#aa024da4"));
          }
        });
 
    //添加点击回调
    myhorizontalview.setonitemclicklistener(new onitemclicklistener() {
      @override
      public void onitemclick(view view, int position) {
 
        mimageview.setimagebitmap(bitmaplist.get(position));
        view.setbackgroundcolor(color.parsecolor("#aa024da4"));
      }
    });
  }
 
  public static bitmap readbitmap(context mcontext, int resid) {
    bitmapfactory.options opt = new bitmapfactory.options();
    opt.inpreferredconfig = bitmap.config.rgb_565;
    opt.inpurgeable = true;
    opt.ininputshareable = true;
 
    inputstream is = mcontext.getresources().openrawresource(resid);
    return bitmapfactory.decodestream(is, null, opt);
  }
 
}

myadapter 这部分并不是为 abslistview 和 absspinner 及其子类提供列表项的。它主要用于为 horizontalscrollview 提供数据。

myadapter.java :

package com.crazy.horizontalscrollviewtest;
 
import java.util.arraylist;
import java.util.list;
 
import android.content.context;
import android.graphics.bitmap;
import android.util.log;
import android.view.view;
import android.view.viewgroup;
import android.widget.baseadapter;
import android.widget.imageview;
import android.widget.relativelayout;
 
/**
 * created by antimage on 2016/1/9.
 */
public class myadapter extends baseadapter {
 
  private list<bitmap> bitmaplist;
  private context mcontext;
 
  public myadapter(context context, list<bitmap> bitmaplist) {
    mcontext = context;
    if (bitmaplist == null) {
      bitmaplist = new arraylist<bitmap>();
    } else {
      this.bitmaplist = bitmaplist;
    }
  }
 
  @override
  public int getcount() {
    return bitmaplist.size();
  }
 
  @override
  public object getitem(int position) {
    return bitmaplist.get(position);
  }
 
  @override
  public long getitemid(int position) {
    return position;
  }
 
  @override
  public view getview(int position, view convertview, viewgroup parent) {
 
    viewholder viewholder = null;
    view view = null;
    // 此处要用相对布局，且与 xml 中的布局相同；
    // 如果使用线性布局，则显示不完整
    relativelayout layout;
    if (convertview == null) {
 
      layout = (relativelayout) view.inflate(mcontext, r.layout.image_item_layout, null);
 
      viewholder = new viewholder();
 
      viewholder.image = (imageview) layout.findviewbyid(r.id.top_image);
      layout.settag(viewholder);
    } else {
      layout = (relativelayout) convertview;
      view = layout;
      viewholder = (viewholder) layout.gettag();
      log.e("myadapter", "正在检测数据来了没有 ");
    }
    bitmap btm = (bitmap) getitem(position);
    viewholder.image.setimagebitmap(btm);
 
    log.e("myadapter", "信息来了哦！");
 
    return layout;
  }
 
  private static class viewholder {
    imageview image;
  }
 
}

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

myhorizontalview.java :

package com.crazy.horizontalscrollviewtest;
 
 
import java.util.hashmap;
import java.util.map;
 
import android.app.activity;
import android.content.context;
import android.graphics.color;
import android.util.attributeset;
import android.util.displaymetrics;
import android.util.log;
import android.view.motionevent;
import android.view.view;
import android.view.viewgroup;
import android.widget.horizontalscrollview;
 
/**
 * created by antimage on 2016/1/9.
 */
public class myhorizontalview extends horizontalscrollview
    implements view.onclicklistener {
 
  private string tag = "myhorizontalview";
 
  private viewgroup parent;
  private int screenwidth;
  /* 当前最后一张图片的index*/
  private int mcurrentindex;
  /* 当前第一张图片的下标*/
  private int mfristindex;
  /* 每屏幕最多显示的个数*/
  private int mcountonescreen;
  /* 子元素的宽度*/
  private int mchildwidth;
  /* 子元素的高度*/
  private int mchildheight;
 
  private myadapter madapter;
 
  private currentimagechangelistener mlistener;
 
  private onitemclicklistener monitemclicklistener;
 
  /**
   * 图片滚动时的回调接口
   */
  public interface currentimagechangelistener {
    void oncurrentimgchanged(int position, view viewindicator);
  }
 
  /**
   * 点击条目时的回调
   */
  public interface onitemclicklistener {
    void onitemclick(view view, int pos);
  }
 
  /* 保存view与位置的键值对 */
  private map<view, integer> mviewpos = new hashmap<>();
 
  public myhorizontalview(context context) {
    this(context, null);
  }
 
  public myhorizontalview(context context, attributeset attrs) {
    this(context, attrs, 0);
  }
 
  public myhorizontalview(context context, attributeset attrs, int defstyleattr) {
    super(context, attrs, defstyleattr);
 
    this.setsmoothscrollingenabled(true);
 
    displaymetrics metrics = new displaymetrics();
    // 取得窗口属性
    ((activity) context).getwindowmanager().getdefaultdisplay().getmetrics(metrics);
    // 窗口的宽度 （像素）
    screenwidth = metrics.widthpixels;
  }
 
  /**
   * 初始化数据，设置数据适配器
   */
  public void initdatas(myadapter madapter) {
 
    if (getchildcount() == 0) {
      log.e(tag, "必须要有子元素");
    }
    if (getchildcount() == 0 || madapter == null)
      return;
 
    this.madapter = madapter;
    parent = (viewgroup) getchildat(0);
 
    // 获得适配器中第一个view
    final view view = madapter.getview(0, null, parent);
    parent.addview(view);
 
    // 强制计算当前view的宽和高
    if (mchildwidth == 0 && mchildheight == 0) {
      int w = view.measurespec.makemeasurespec(0,
          view.measurespec.unspecified);
      int h = view.measurespec.makemeasurespec(0,
          view.measurespec.unspecified);
 
      view.measure(w, h);
      mchildheight = view.getmeasuredheight();
      mchildwidth = view.getmeasuredwidth();
      log.e(tag, "子组件的宽：" + mchildwidth + ", 子组件的高：" + mchildheight);
 
      // 计算每次加载多少个view
      mcountonescreen = screenwidth / mchildwidth + 2;
 
      log.e(tag, "mcountonescreen = " + mcountonescreen
          + " ,mchildwidth = " + mchildwidth);
    }
    //初始化第一屏幕的元素
    loadfirstchild(mcountonescreen);
  }
 
  /**
   * 加载第一屏的view
   */
  public void loadfirstchild(int mcountonescreen) {
 
    parent.removeallviews();
    mviewpos.clear();
 
    for (int i = 0; i < mcountonescreen; i++) {
      view view = madapter.getview(i, null, parent);
      view.setonclicklistener(this);
      parent.addview(view);
      mviewpos.put(view, i);
      mcurrentindex = i;
    }
 
    if (mlistener != null) {
      notifycurrentimagechanged();
    }
  }
 
  @override
  public boolean ontouchevent(motionevent event) {
 
    switch (event.getaction()) {
      case motionevent.action_move:
 
        int scrollx = getscrollx();
        // 如果当前scrollx为view的宽度，加载下一张，移除第一张
        if (scrollx >= mchildwidth) {
          loadnextimage();
        }
        // 如果当前scrollx = 0， 往前设置一张，移除最后一张
        if (scrollx == 0) {
          loadpreimage();
        }
        break;
    }
    // 这里无论返回值是设置 true 还是 false
    // horizontalscrollview都不会滑动
    return super.ontouchevent(event);
  }
 
  /**
   * 加载下一张图片
   */
  protected void loadnextimage() {
    // 数组边界值计算
    if (mcurrentindex == madapter.getcount() - 1) {
      return;
    }
    //移除第一张图片，且将水平滚动位置置0（图片有宽度，所以为置0）
    scrollto(0, 0);
    mviewpos.remove(parent.getchildat(0));
    parent.removeviewat(0);
 
    //获取下一张图片，并且设置onclick事件，且加入容器中
    view view = madapter.getview(++mcurrentindex, null, parent);
    log.e(tag, "mcurrentindex ===" + mcurrentindex);
    view.setonclicklistener(this);
    parent.addview(view);
    mviewpos.put(view, mcurrentindex);
 
    //当前第一张图片小标
    mfristindex++;
    //如果设置了滚动监听则触发
    if (mlistener != null) {
      notifycurrentimagechanged();
    }
 
  }
 
  /**
   * 加载前一张图片
   */
  protected void loadpreimage() {
    //如果当前已经是第一张，则返回
    if (mfristindex == 0)
      return;
    //获得当前应该显示为第一张图片的下标
    int index = mcurrentindex - mcountonescreen;
    if (index >= 0) {
      //移除最后一张
      int oldviewpos = parent.getchildcount() - 1;
      mviewpos.remove(parent.getchildat(oldviewpos));
      parent.removeviewat(oldviewpos);
 
      //将此view放入第一个位置
      view view = madapter.getview(index, null, parent);
      mviewpos.put(view, index);
      parent.addview(view, 0);
      view.setonclicklistener(this);
      //水平滚动位置向左移动view的宽度个像素
      scrollto(mchildwidth, 0);
      //当前位置--，当前第一个显示的下标--
      mcurrentindex--;
      mfristindex--;
      //回调
      if (mlistener != null) {
        notifycurrentimagechanged();
      }
    }
  }
 
  /**
   * 滑动时的回调
   */
  public void notifycurrentimagechanged() {
 
    int sum = parent.getchildcount();
    for (int i = 0; i < sum; i++) {
      // 清除所有的背景色，点击时会设置为蓝色
      parent.getchildat(i).setbackgroundcolor(color.white);
    }
 
    mlistener.oncurrentimgchanged(mfristindex, parent.getchildat(0));
  }
 
  @override
  public void onclick(view v) {
 
    if (monitemclicklistener != null) {
 
      int sum = parent.getchildcount();
      for (int i = 0; i < sum; i++) {
        parent.getchildat(i).setbackgroundcolor(color.white);
      }
      monitemclicklistener.onitemclick(v, mviewpos.get(v));
    }
  }
 
  public void setonitemclicklistener(onitemclicklistener monclicklistener) {
    this.monitemclicklistener = monclicklistener;
  }
 
  public void setcurrentimagechangelistener(currentimagechangelistener mlistener) {
    this.mlistener = mlistener;
  }
}

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

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

所用到的布局文件：

content_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingleft="5dp"
  android:paddingtop="5dp"
  android:paddingright="5dp"
  android:paddingbottom="5dp"
  app:layout_behavior="@string/appbar_scrolling_view_behavior"
  tools:context="com.crazy.horizontalscrollviewtest.mainactivity"
  tools:showin="@layout/activity_main">
 
 
  <imageview
    android:id="@+id/imageview"
    android:layout_width="match_parent"
    android:layout_height="380dp"
    android:scaletype="centercrop" />
 
  <com.crazy.horizontalscrollviewtest.myhorizontalview
    android:id="@+id/my_horizontal"
    android:layout_below="@id/imageview"
    android:layout_alignparentbottom="true"
    android:scrollbars="none"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <linearlayout
      android:id="@+id/linear_layout"
      android:orientation="horizontal"
      android:layout_gravity="center_vertical"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
    </linearlayout>
  </com.crazy.horizontalscrollviewtest.myhorizontalview>
 
</relativelayout>

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

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
  
  <imageview 
    android:id="@+id/top_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:scaletype="centercrop"/>
 
</relativelayout>

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