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

阿新 • • 發佈：2019-01-04

自從Gallery被谷歌廢棄以後，Google推薦使用ViewPager和HorizontalScrollView來實現Gallery的效果。的確HorizontalScrollView可以實現Gallery的效果，但是HorizontalScrollView存在一個很大的問題，如果你僅是用來展示少量的圖片，應該是沒問題的，但是如果我希望HorizontalScrollView可以想ViewPager一樣，既可以繫結資料集（動態改變圖片），還能做到，不管多少圖片都不會OOM（ViewPager內部一直初始化，回收，至多隻保持3個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;

	@Override
	protected 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));

	@Override
	protected 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()
				{
					@Override
					public void onCurrentImgChanged(int position,
							View viewIndicator)
					{
						mImg.setImageResource(mDatas.get(position));
						viewIndicator.setBackgroundColor(Color
								.parseColor("#AA024DA4"));
					}
				});
		//新增點選回撥
		mHorizontalScrollView.setOnItemClickListener(new OnItemClickListener()
		{

			@Override
			public 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 implements
		OnClickListener
{

	/**
	 * 圖片滾動時的回撥介面
	 * 
	 * @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;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
	{
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		mContainer = (LinearLayout) getChildAt(0);
	}

	/**
	 * 載入下一張圖片
	 */
	protected void loadNextImg()
	{
		// 陣列邊界值計算
		if (mCurrentIndex == mAdapter.getCount() - 1)
		{
			return;
		}
		//移除第一張圖片，且將水平滾動位置置0
		scrollTo(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);
		// 獲得介面卡中第一個View
		final 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();
			// 計算每次載入多少個View
			mCountOneScreen = 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();
		}

	}

	@Override
	public 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);
	}

	@Override
	public 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的位置，有點類似：

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

最後貼一下旋轉屏幕後的效果圖：

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

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

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

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

1、HorizontalScrollView的簡單用法

2、自定義HorizontalScrollView

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

Android 自定義 ViewPager 打造千變萬化的圖片切換效果

Android自定義語音音訊對話識別翻譯動畫控制元件

android 自定義dialog並實現失去焦點（背景透明）的功能

android 自定義View之View的測量（onMeasure()方法）

Android 自定義自由選擇時間區間的日曆控制元件

Android 自定義視訊錄製終極解決方案（翻轉問題）

Android自定義Movie播放網路gif圖片

Android自定義ViewGroup打造各種風格的SlidingMenu

Android自定義view-打造酷炫的字型滑動高亮控制元件

android自定義view-打造圓形ImageView(一)

Android自定義圓角ImageView 支援網路圖片

android自定義view-打造圓形ImageView(四)終結篇

android自定義view-打造圓形ImageView(二)

android自定義View打造自己的專屬控制元件——風車控制元件

HTML5呼叫照相機並自定義顯示獲取到的圖片（FileReader）

Android自定義View ——畫弧線詳解（Rectf放入用法）

Android自定義View-仿華為手機管家病毒查殺類似於雷達掃描動畫效果

Android進階之自定義View實戰(一)仿iOS UISwitch控制元件實現

Android 自定義View練習：雷達圖（比重）繪製

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

1、HorizontalScrollView的簡單用法

2、自定義HorizontalScrollView

相關推薦