欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android使用HorizontalScrollView实现水平滚动

程序员文章站 2022-05-27 10:23:57
horizontalscrollview 和 scrollview 都是由 framelayout 派生出来的。它们就是一个用于为普通组件添加滚动条的组件。且 horizo...

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

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

Android使用HorizontalScrollView实现水平滚动

只是这个效果还有所缺陷,加载了 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>

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