Android 自訂 HorizontalScrollView 打造再多圖片（控制項）也不怕 OOM 的橫向滑動效果

標籤：android   自訂   horizontalscrollview   gallery   

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/38140505

自從Gallery被Google廢棄以後，Google推薦使用ViewPager和HorizontalScrollView來實現Gallery的效果。的確HorizontalScrollView可以實現Gallery的效果，但是HorizontalScrollView存在一個很大的問題，如果你僅是用來展示少量的圖片，應該是沒問題的，但是如果我希望HorizontalScrollView可以想ViewPager一樣，既可以綁定資料集（動態改變圖片），還能做到，不管多少圖片都不會OOM（ViewPager內部一直初始化，回收，至多隻保持2個View）。本篇部落格首先介紹HorizontalScrollView的簡單用法，然後會在此基礎上進行擴充，自訂HorizontalScrollView實現我們上面提到的效果，類似一屏可以顯示多個View的ViewPager，再多的圖片也不怕OOM。

1、HorizontalScrollView的簡單用法

HorizontalScrollView其實是FrameLayout的子類，所以內部只能有一個直接的子View。我們用來做Gallery效果，首選當然是LinearLayout，然後方向設定為水平。

1、布局檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"     >    <HorizontalScrollView        android:layout_width="wrap_content"        android:layout_height="150dp"        android:layout_gravity="center_vertical"        android:background="#AA444444"        android:scrollbars="none" >        <LinearLayout            android:id="@+id/id_gallery"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:orientation="horizontal" >        </LinearLayout>    </HorizontalScrollView></LinearLayout>

很簡單，就一個HorizontalScrollView內部有個水平方向的LinearLayout

MainActivity:

package com.example.zhy_horizontalscrollview;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.Window;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;public class MainActivity extends Activity{private LinearLayout mGallery;private int[] mImgIds;private LayoutInflater mInflater;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);mInflater = LayoutInflater.from(this);initData();initView();}private void initData(){mImgIds = new int[] { R.drawable.a, R.drawable.b, R.drawable.c,R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g,R.drawable.h, R.drawable.l };}private void initView(){mGallery = (LinearLayout) findViewById(R.id.id_gallery);for (int i = 0; i < mImgIds.length; i++){View view = mInflater.inflate(R.layout.activity_index_gallery_item,mGallery, false);ImageView img = (ImageView) view.findViewById(R.id.id_index_gallery_item_image);img.setImageResource(mImgIds[i]);TextView txt = (TextView) view.findViewById(R.id.id_index_gallery_item_text);txt.setText("some info ");mGallery.addView(view);}}}

很簡單，我預先準備了一些圖片直接放在了Drawble下，然後迴圈加入HorizontalScrollView的LinearLayout中即可，Item的布局就省了，後面會貼源碼。

：

效果還是不錯的~如果只需要簡單展示幾張圖片，直接用就可以了。

下面準備進入正題，HorizontalScrollView不管裡面多少View都是不會回收的，當達到一定量的時候會發生OOM，下面介紹如何改寫HorizontalScollView實現文章開始所說的效果。

2、自訂HorizontalScrollView

思想：

1、首先根據螢幕的大小和Item的大小，計算可以一個螢幕最多可以載入多少個Item，然後載入該數量Item。

2、當使用者右滑（從右向左），滑動到一定距離時，載入下一張，刪除第一張

3、當使用者左滑（從左向右），滑動到一定距離時，載入上一張，刪除最後一張

看下最後的：

為了增加一定的趣味，做了一個類似上面的相簿效果，支援拖動時自動變化，和點擊變化~~是不是很贊~

1、首先看布局檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@android:color/white"    android:orientation="vertical" >    <FrameLayout        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1" >        <ImageView            android:id="@+id/id_content"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_gravity="center"            android:layout_margin="10dp"            android:scaleType="centerCrop"            android:src="@drawable/ic_launcher" />    </FrameLayout>    <com.example.zhy_horizontalscrollview.MyHorizontalScrollView        android:id="@+id/id_horizontalScrollView"        android:layout_width="wrap_content"        android:layout_height="150dp"        android:layout_gravity="bottom"        android:background="@android:color/white"        android:scrollbars="none" >        <LinearLayout            android:id="@+id/id_gallery"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:orientation="horizontal" >        </LinearLayout>    </com.example.zhy_horizontalscrollview.MyHorizontalScrollView></LinearLayout>

沒任何變化，除了把類名改成了我們自訂的類~

2、為了和國際接軌，我們也搞個Adapter，類似BaseAdapter

package com.example.zhy_horizontalscrollview;import java.util.List;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;public class HorizontalScrollViewAdapter{private Context mContext;private LayoutInflater mInflater;private List<Integer> mDatas;public HorizontalScrollViewAdapter(Context context, List<Integer> mDatas){this.mContext = context;mInflater = LayoutInflater.from(context);this.mDatas = mDatas;}public int getCount(){return mDatas.size();}public Object getItem(int position){return mDatas.get(position);}public long getItemId(int position){return position;}public View getView(int position, View convertView, ViewGroup parent){ViewHolder viewHolder = null;if (convertView == null){viewHolder = new ViewHolder();convertView = mInflater.inflate(R.layout.activity_index_gallery_item, parent, false);viewHolder.mImg = (ImageView) convertView.findViewById(R.id.id_index_gallery_item_image);viewHolder.mText = (TextView) convertView.findViewById(R.id.id_index_gallery_item_text);convertView.setTag(viewHolder);} else{viewHolder = (ViewHolder) convertView.getTag();}viewHolder.mImg.setImageResource(mDatas.get(position));viewHolder.mText.setText("some info ");return convertView;}private class ViewHolder{ImageView mImg;TextView mText;}}

3、下面先看用法：

package com.example.zhy_horizontalscrollview;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.view.View;import android.view.Window;import android.widget.ImageView;import com.example.zhy_horizontalscrollview.MyHorizontalScrollView.CurrentImageChangeListener;import com.example.zhy_horizontalscrollview.MyHorizontalScrollView.OnItemClickListener;public class MainActivity extends Activity{private MyHorizontalScrollView mHorizontalScrollView;private HorizontalScrollViewAdapter mAdapter;private ImageView mImg;private List<Integer> mDatas = new ArrayList<Integer>(Arrays.asList(R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d,R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h,R.drawable.l));@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);mImg = (ImageView) findViewById(R.id.id_content);mHorizontalScrollView = (MyHorizontalScrollView) findViewById(R.id.id_horizontalScrollView);mAdapter = new HorizontalScrollViewAdapter(this, mDatas);//添加滾動回調mHorizontalScrollView.setCurrentImageChangeListener(new CurrentImageChangeListener(){@Overridepublic void onCurrentImgChanged(int position,View viewIndicator){mImg.setImageResource(mDatas.get(position));viewIndicator.setBackgroundColor(Color.parseColor("#AA024DA4"));}});//添加點擊回調mHorizontalScrollView.setOnItemClickListener(new OnItemClickListener(){@Overridepublic void onClick(View view, int position){mImg.setImageResource(mDatas.get(position));view.setBackgroundColor(Color.parseColor("#AA024DA4"));}});//設定適配器mHorizontalScrollView.initDatas(mAdapter);}}

用起來是不是有點像ListView，初始化資料配接器，然後設定資料配接器，然後就是設定各種回調~~

如果僅僅是一堆圖片展示，類似商品切換，更見簡單，就不需要設定滾動監聽和點擊監聽了~

4、最後看自訂的MyHorizontalScrollView類

package com.example.zhy_horizontalscrollview;import java.util.HashMap;import java.util.Map;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.View.OnClickListener;import android.view.WindowManager;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;public class MyHorizontalScrollView extends HorizontalScrollView implementsOnClickListener{/** * 圖片滾動時的回調介面 *  * @author zhy *  */public interface CurrentImageChangeListener{void onCurrentImgChanged(int position, View viewIndicator);}/** * 條目點擊時的回調 *  * @author zhy *  */public interface OnItemClickListener{void onClick(View view, int pos);}private CurrentImageChangeListener mListener;private OnItemClickListener mOnClickListener;private static final String TAG = "MyHorizontalScrollView";/** * HorizontalListView中的LinearLayout */private LinearLayout mContainer;/** * 子項目的寬度 */private int mChildWidth;/** * 子項目的高度 */private int mChildHeight;/** * 當前最後一張圖片的index */private int mCurrentIndex;/** * 當前第一張圖片的下標 */private int mFristIndex;/** * 當前第一個View */private View mFirstView;/** * 資料配接器 */private HorizontalScrollViewAdapter mAdapter;/** * 每螢幕最多顯示的個數 */private int mCountOneScreen;/** * 螢幕的寬度 */private int mScreenWitdh;/** * 儲存View與位置的索引值對 */private Map<View, Integer> mViewPos = new HashMap<View, Integer>();public MyHorizontalScrollView(Context context, AttributeSet attrs){super(context, attrs);// 獲得螢幕寬度WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);mScreenWitdh = outMetrics.widthPixels;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);mContainer = (LinearLayout) getChildAt(0);}/** * 載入下一張圖片 */protected void loadNextImg(){// 數組邊界值計算if (mCurrentIndex == mAdapter.getCount() - 1){return;}//移除第一張圖片，且將水平滾動位置置0scrollTo(0, 0);mViewPos.remove(mContainer.getChildAt(0));mContainer.removeViewAt(0);//擷取下一張圖片，並且設定onclick事件，且加入容器中View view = mAdapter.getView(++mCurrentIndex, null, mContainer);view.setOnClickListener(this);mContainer.addView(view);mViewPos.put(view, mCurrentIndex);//當前第一張圖片小標mFristIndex++;//如果設定了滾動監聽則觸發if (mListener != null){notifyCurrentImgChanged();}}/** * 載入前一張圖片 */protected void loadPreImg(){//如果當前已經是第一張，則返回if (mFristIndex == 0)return;//獲得當前應該顯示為第一張圖片的下標int index = mCurrentIndex - mCountOneScreen;if (index >= 0){//mContainer = (LinearLayout) getChildAt(0);//移除最後一張int oldViewPos = mContainer.getChildCount() - 1;mViewPos.remove(mContainer.getChildAt(oldViewPos));mContainer.removeViewAt(oldViewPos);//將此View放入第一個位置View view = mAdapter.getView(index, null, mContainer);mViewPos.put(view, index);mContainer.addView(view, 0);view.setOnClickListener(this);//水平滾動位置向左移動view的寬度個像素scrollTo(mChildWidth, 0);//當前位置--，當前第一個顯示的下標--mCurrentIndex--;mFristIndex--;//回調if (mListener != null){notifyCurrentImgChanged();}}}/** * 滑動時的回調 */public void notifyCurrentImgChanged(){//先清除所有的背景色，點擊時會設定為藍色for (int i = 0; i < mContainer.getChildCount(); i++){mContainer.getChildAt(i).setBackgroundColor(Color.WHITE);}mListener.onCurrentImgChanged(mFristIndex, mContainer.getChildAt(0));}/** * 初始化資料，設定資料配接器 *  * @param mAdapter */public void initDatas(HorizontalScrollViewAdapter mAdapter){this.mAdapter = mAdapter;mContainer = (LinearLayout) getChildAt(0);// 獲得適配器中第一個Viewfinal View view = mAdapter.getView(0, null, mContainer);mContainer.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, view.getMeasuredWidth() + "," + view.getMeasuredHeight());mChildHeight = view.getMeasuredHeight();// 計算每次載入多少個ViewmCountOneScreen = (mScreenWitdh / mChildWidth == 0)?mScreenWitdh / mChildWidth+1:mScreenWitdh / mChildWidth+2;Log.e(TAG, "mCountOneScreen = " + mCountOneScreen+ " ,mChildWidth = " + mChildWidth);}//初始化第一螢幕的元素initFirstScreenChildren(mCountOneScreen);}/** * 載入第一屏的View *  * @param mCountOneScreen */public void initFirstScreenChildren(int mCountOneScreen){mContainer = (LinearLayout) getChildAt(0);mContainer.removeAllViews();mViewPos.clear();for (int i = 0; i < mCountOneScreen; i++){View view = mAdapter.getView(i, null, mContainer);view.setOnClickListener(this);mContainer.addView(view);mViewPos.put(view, i);mCurrentIndex = i;}if (mListener != null){notifyCurrentImgChanged();}}@Overridepublic boolean onTouchEvent(MotionEvent ev){switch (ev.getAction()){case MotionEvent.ACTION_MOVE://Log.e(TAG, getScrollX() + "");int scrollX = getScrollX();// 如果當前scrollX為view的寬度，載入下一張，移除第一張if (scrollX >= mChildWidth){loadNextImg();}// 如果當前scrollX = 0， 往前設定一張，移除最後一張if (scrollX == 0){loadPreImg();}break;}return super.onTouchEvent(ev);}@Overridepublic void onClick(View v){if (mOnClickListener != null){for (int i = 0; i < mContainer.getChildCount(); i++){mContainer.getChildAt(i).setBackgroundColor(Color.WHITE);}mOnClickListener.onClick(v, mViewPos.get(v));}}public void setOnItemClickListener(OnItemClickListener mOnClickListener){this.mOnClickListener = mOnClickListener;}public void setCurrentImageChangeListener(CurrentImageChangeListener mListener){this.mListener = mListener;}}

首先，載入第一個Item，根據item的寬計算當前螢幕可以載入多少張圖片，然後初始化第一屏的圖片，接下來就是從寫onTouchEvent，在其中監聽使用者的ACTION_MOVE，然後根據移動的距離載入前一張或者後一張，同時動態移除不可見的View，回收記憶體~~~~

代碼中有個Map專門儲存View和posion的，主要是為了給點擊回調提供當前的View的位置，有點類似：Android 自訂 ViewPager 打造千變萬化的圖片轉場效果裡面的Map的巧妙用法~~

是不是完全實現了ViewPager和HorizontalScrollView的合體~~~HorizontalScrollView的效果，ViewPager的特性~~~~

最後貼一下旋轉螢幕後的：

可以看出，不僅是做相簿，還是圖片輪播想過都是剛剛的！

如果你的項目中需要用到Gallery類似的效果，果斷使用上例嘗試吧~~

各位看官沒事點個贊，留個言唄~

源碼點擊下載