Android使用HorizontalScrollView實現(xiàn)水平滾動

更新時間：2018年11月23日 15:43:20 作者：antimage08

這篇文章主要為大家詳細介紹了Android使用HorizontalScrollView實現(xiàn)水平滾動，并點擊有相應(yīng)的反應(yīng)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

HorizontalScrollView 和 ScrollView 都是由 FrameLayout 派生出來的。它們就是一個用于為普通組件添加滾動條的組件。且 HorizontalScrollView 和 ScrollView 里面最多只能包含一個組件（當然組件里面還可以嵌套組件）。它們不同的是 HorizontalScrollView 用于添加水平滾動，而 ScrollView 用于添加垂直滾動。

突然間想到做一個屏幕下方水平滑動，屏幕上方并作出相應(yīng)的反應(yīng)的效果。只是在下方滾動時，屏幕上方?jīng)]有作出理想的反應(yīng)，點擊事件倒是實現(xiàn)了。最終只能在網(wǎng)上搜索，終于找到了一個。于是作出的效果如下：

只是這個效果還有所缺陷，加載了 13 張圖片，在屏幕下方水平滾動到最后一頁時，第 9 張的圖片并沒有在上面的顯示出來(原作者的也有這個問題)；如果圖片的數(shù)量小于或者等于 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);
 
    //設(shè)置適配器
    myHorizontalView.initDatas(adapter);
 
    //添加滾動回調(diào)
    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"));
          }
        });
 
    //添加點擊回調(diào)
    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 提供數(shù)據(jù)。

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", "正在檢測數(shù)據(jù)來了沒有 ");
    }
    Bitmap btm = (Bitmap) getItem(position);
    viewHolder.image.setImageBitmap(btm);
 
    Log.e("MyAdapter", "信息來了哦！");
 
    return layout;
  }
 
  private static class ViewHolder {
    ImageView image;
  }
 
}

MyHorizontalView 類主要用于未 MainAcitivity 類提供接口、水平滾動時屏幕上方的反應(yīng)及相應(yīng)的點擊事件等。該類主要使用了收集而來的代碼，并做了相應(yīng)的調(diào)整。

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;
  /* 每屏幕最多顯示的個數(shù)*/
  private int mCountOneScreen;
  /* 子元素的寬度*/
  private int mChildWidth;
  /* 子元素的高度*/
  private int mChildHeight;
 
  private MyAdapter mAdapter;
 
  private CurrentImageChangeListener mListener;
 
  private OnItemClickListener mOnItemClickListener;
 
  /**
   * 圖片滾動時的回調(diào)接口
   */
  public interface CurrentImageChangeListener {
    void onCurrentImgChanged(int position, View viewIndicator);
  }
 
  /**
   * 點擊條目時的回調(diào)
   */
  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;
  }
 
  /**
   * 初始化數(shù)據(jù)，設(shè)置數(shù)據(jù)適配器
   */
  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， 往前設(shè)置一張，移除最后一張
        if (scrollX == 0) {
          loadPreImage();
        }
        break;
    }
    // 這里無論返回值是設(shè)置 true 還是 false
    // HorizontalScrollView都不會滑動
    return super.onTouchEvent(event);
  }
 
  /**
   * 加載下一張圖片
   */
  protected void loadNextImage() {
    // 數(shù)組邊界值計算
    if (mCurrentIndex == mAdapter.getCount() - 1) {
      return;
    }
    //移除第一張圖片，且將水平滾動位置置0（圖片有寬度，所以為置0）
    scrollTo(0, 0);
    mViewPos.remove(parent.getChildAt(0));
    parent.removeViewAt(0);
 
    //獲取下一張圖片，并且設(shè)置onClick事件，且加入容器中
    View view = mAdapter.getView(++mCurrentIndex, null, parent);
    Log.e(TAG, "mCurrentIndex ===" + mCurrentIndex);
    view.setOnClickListener(this);
    parent.addView(view);
    mViewPos.put(view, mCurrentIndex);
 
    //當前第一張圖片小標
    mFristIndex++;
    //如果設(shè)置了滾動監(jiān)聽則觸發(fā)
    if (mListener != null) {
      notifyCurrentImageChanged();
    }
 
  }
 
  /**
   * 加載前一張圖片
   */
  protected void loadPreImage() {
    //如果當前已經(jīng)是第一張，則返回
    if (mFristIndex == 0)
      return;
    //獲得當前應(yīng)該顯示為第一張圖片的下標
    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--;
      //回調(diào)
      if (mListener != null) {
        notifyCurrentImageChanged();
      }
    }
  }
 
  /**
   * 滑動時的回調(diào)
   */
  public void notifyCurrentImageChanged() {
 
    int sum = parent.getChildCount();
    for (int i = 0; i < sum; i++) {
      // 清除所有的背景色，點擊時會設(shè)置為藍色
      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;
  }
}

該類中的很多數(shù)據(jù)都在 List 集合里面，而集合的下標初始值為 0，與 list.size() 不相等。顧猜測，正是由于這個原因，在 mImageView 顯示圖片時，不能顯示到第 9 張。

在這個類中計算每次加載多少個 View 時的 mCountOneScreen 計算方法感覺略有問題，從效果圖中可以看出，屏幕中能加載 3 張多一點的圖片。mCountOneScreen = screenWidth / mChildWidth + 2; 在我的模擬器上計算得出的結(jié)果等于 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: