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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
