关闭

Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果

630人阅读 评论(0) 收藏 举报
分类:

转自:http://blog.csdn.net/lmj623565791/article/details/38140505/

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505

自从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、布局文件:

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.      >  
  6.     <HorizontalScrollView  
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="150dp"  
  9.         android:layout_gravity="center_vertical"  
  10.         android:background="#AA444444"  
  11.         android:scrollbars="none" >  
  12.   
  13.         <LinearLayout  
  14.             android:id="@+id/id_gallery"  
  15.             android:layout_width="wrap_content"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_gravity="center_vertical"  
  18.             android:orientation="horizontal" >  
  19.         </LinearLayout>  
  20.     </HorizontalScrollView>  
  21.   
  22. </LinearLayout>  

很简单,就一个HorizontalScrollView内部有个水平方向的LinearLayout

MainActivity:

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.example.zhy_horizontalscrollview;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.Window;  
  8. import android.widget.ImageView;  
  9. import android.widget.LinearLayout;  
  10. import android.widget.TextView;  
  11.   
  12. public class MainActivity extends Activity  
  13. {  
  14.   
  15.     private LinearLayout mGallery;  
  16.     private int[] mImgIds;  
  17.     private LayoutInflater mInflater;  
  18.   
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState)  
  21.     {  
  22.         super.onCreate(savedInstanceState);  
  23.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  24.         setContentView(R.layout.activity_main);  
  25.         mInflater = LayoutInflater.from(this);  
  26.         initData();  
  27.         initView();  
  28.   
  29.     }  
  30.   
  31.     private void initData()  
  32.     {  
  33.         mImgIds = new int[] { R.drawable.a, R.drawable.b, R.drawable.c,  
  34.                 R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g,  
  35.                 R.drawable.h, R.drawable.l };  
  36.     }  
  37.   
  38.     private void initView()  
  39.     {  
  40.         mGallery = (LinearLayout) findViewById(R.id.id_gallery);  
  41.   
  42.         for (int i = 0; i < mImgIds.length; i++)  
  43.         {  
  44.               
  45.             View view = mInflater.inflate(R.layout.activity_index_gallery_item,  
  46.                     mGallery, false);  
  47.             ImageView img = (ImageView) view  
  48.                     .findViewById(R.id.id_index_gallery_item_image);  
  49.             img.setImageResource(mImgIds[i]);  
  50.             TextView txt = (TextView) view  
  51.                     .findViewById(R.id.id_index_gallery_item_text);  
  52.             txt.setText("some info ");  
  53.             mGallery.addView(view);  
  54.         }  
  55.     }  
  56.   
  57. }  
很简单,我预先准备了一些图片直接放在了Drawble下,然后循环加入HorizontalScrollView的LinearLayout中即可,Item的布局就省了,后面会贴源码。

效果图:

效果还是不错的~如果只需要简单展示几张图片,直接用就可以了。

下面准备进入正题,HorizontalScrollView不管里面多少View都是不会回收的,当达到一定量的时候会发生OOM,下面介绍如何改写HorizontalScollView实现文章开始所说的效果。

2、自定义HorizontalScrollView

思想:

1、首先根据屏幕的大小和Item的大小,计算可以一个屏幕最多可以加载多少个Item,然后加载该数量Item。

2、当用户右滑(从右向左),滑动到一定距离时,加载下一张,删除第一张

3、当用户左滑(从左向右),滑动到一定距离时,加载上一张,删除最后一张

看下最后的效果图:


为了增加一定的趣味,做了一个类似上面的相册效果,支持拖动时自动变化,和点击变化~~是不是很赞~

1、首先看布局文件:

[html] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="@android:color/white"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <FrameLayout  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="0dp"  
  11.         android:layout_weight="1" >  
  12.   
  13.         <ImageView  
  14.             android:id="@+id/id_content"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="fill_parent"  
  17.             android:layout_gravity="center"  
  18.             android:layout_margin="10dp"  
  19.             android:scaleType="centerCrop"  
  20.             android:src="@drawable/ic_launcher" />  
  21.     </FrameLayout>  
  22.   
  23.     <com.example.zhy_horizontalscrollview.MyHorizontalScrollView  
  24.         android:id="@+id/id_horizontalScrollView"  
  25.         android:layout_width="wrap_content"  
  26.         android:layout_height="150dp"  
  27.         android:layout_gravity="bottom"  
  28.         android:background="@android:color/white"  
  29.         android:scrollbars="none" >  
  30.   
  31.         <LinearLayout  
  32.             android:id="@+id/id_gallery"  
  33.             android:layout_width="wrap_content"  
  34.             android:layout_height="wrap_content"  
  35.             android:layout_gravity="center_vertical"  
  36.             android:orientation="horizontal" >  
  37.         </LinearLayout>  
  38.     </com.example.zhy_horizontalscrollview.MyHorizontalScrollView>  
  39.   
  40. </LinearLayout>  
没任何变化,除了把类名改成了我们自定义的类~

2、为了和国际接轨,我们也搞个Adapter,类似BaseAdapter

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.example.zhy_horizontalscrollview;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.content.Context;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9. import android.widget.BaseAdapter;  
  10. import android.widget.ImageView;  
  11. import android.widget.TextView;  
  12.   
  13. public class HorizontalScrollViewAdapter  
  14. {  
  15.   
  16.     private Context mContext;  
  17.     private LayoutInflater mInflater;  
  18.     private List<Integer> mDatas;  
  19.   
  20.     public HorizontalScrollViewAdapter(Context context, List<Integer> mDatas)  
  21.     {  
  22.         this.mContext = context;  
  23.         mInflater = LayoutInflater.from(context);  
  24.         this.mDatas = mDatas;  
  25.     }  
  26.   
  27.     public int getCount()  
  28.     {  
  29.         return mDatas.size();  
  30.     }  
  31.   
  32.     public Object getItem(int position)  
  33.     {  
  34.         return mDatas.get(position);  
  35.     }  
  36.   
  37.     public long getItemId(int position)  
  38.     {  
  39.         return position;  
  40.     }  
  41.   
  42.     public View getView(int position, View convertView, ViewGroup parent)  
  43.     {  
  44.         ViewHolder viewHolder = null;  
  45.         if (convertView == null)  
  46.         {  
  47.             viewHolder = new ViewHolder();  
  48.             convertView = mInflater.inflate(  
  49.                     R.layout.activity_index_gallery_item, parent, false);  
  50.             viewHolder.mImg = (ImageView) convertView  
  51.                     .findViewById(R.id.id_index_gallery_item_image);  
  52.             viewHolder.mText = (TextView) convertView  
  53.                     .findViewById(R.id.id_index_gallery_item_text);  
  54.   
  55.             convertView.setTag(viewHolder);  
  56.         } else  
  57.         {  
  58.             viewHolder = (ViewHolder) convertView.getTag();  
  59.         }  
  60.         viewHolder.mImg.setImageResource(mDatas.get(position));  
  61.         viewHolder.mText.setText("some info ");  
  62.   
  63.         return convertView;  
  64.     }  
  65.   
  66.     private class ViewHolder  
  67.     {  
  68.         ImageView mImg;  
  69.         TextView mText;  
  70.     }  
  71.   
  72. }  

3、下面先看用法:

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.example.zhy_horizontalscrollview;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.Arrays;  
  5. import java.util.List;  
  6.   
  7. import android.app.Activity;  
  8. import android.graphics.Color;  
  9. import android.os.Bundle;  
  10. import android.view.View;  
  11. import android.view.Window;  
  12. import android.widget.ImageView;  
  13.   
  14. import com.example.zhy_horizontalscrollview.MyHorizontalScrollView.CurrentImageChangeListener;  
  15. import com.example.zhy_horizontalscrollview.MyHorizontalScrollView.OnItemClickListener;  
  16.   
  17. public class MainActivity extends Activity  
  18. {  
  19.   
  20.     private MyHorizontalScrollView mHorizontalScrollView;  
  21.     private HorizontalScrollViewAdapter mAdapter;  
  22.     private ImageView mImg;  
  23.     private List<Integer> mDatas = new ArrayList<Integer>(Arrays.asList(  
  24.             R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d,  
  25.             R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h,  
  26.             R.drawable.l));  
  27.   
  28.     @Override  
  29.     protected void onCreate(Bundle savedInstanceState)  
  30.     {  
  31.         super.onCreate(savedInstanceState);  
  32.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  33.         setContentView(R.layout.activity_main);  
  34.   
  35.         mImg = (ImageView) findViewById(R.id.id_content);  
  36.   
  37.         mHorizontalScrollView = (MyHorizontalScrollView) findViewById(R.id.id_horizontalScrollView);  
  38.         mAdapter = new HorizontalScrollViewAdapter(this, mDatas);  
  39.         //添加滚动回调  
  40.         mHorizontalScrollView  
  41.                 .setCurrentImageChangeListener(new CurrentImageChangeListener()  
  42.                 {  
  43.                     @Override  
  44.                     public void onCurrentImgChanged(int position,  
  45.                             View viewIndicator)  
  46.                     {  
  47.                         mImg.setImageResource(mDatas.get(position));  
  48.                         viewIndicator.setBackgroundColor(Color  
  49.                                 .parseColor("#AA024DA4"));  
  50.                     }  
  51.                 });  
  52.         //添加点击回调  
  53.         mHorizontalScrollView.setOnItemClickListener(new OnItemClickListener()  
  54.         {  
  55.   
  56.             @Override  
  57.             public void onClick(View view, int position)  
  58.             {  
  59.                 mImg.setImageResource(mDatas.get(position));  
  60.                 view.setBackgroundColor(Color.parseColor("#AA024DA4"));  
  61.             }  
  62.         });  
  63.         //设置适配器  
  64.         mHorizontalScrollView.initDatas(mAdapter);  
  65.     }  
  66.   
  67. }  

用起来是不是有点像ListView,初始化数据适配器,然后设置数据适配器,然后就是设置各种回调~~

如果仅仅是一堆图片展示,类似商品切换,更见简单,就不需要设置滚动监听和点击监听了~

4、最后看自定义的MyHorizontalScrollView类

[java] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. package com.example.zhy_horizontalscrollview;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5.   
  6. import android.content.Context;  
  7. import android.graphics.Color;  
  8. import android.util.AttributeSet;  
  9. import android.util.DisplayMetrics;  
  10. import android.util.Log;  
  11. import android.view.MotionEvent;  
  12. import android.view.View;  
  13. import android.view.View.OnClickListener;  
  14. import android.view.WindowManager;  
  15. import android.widget.HorizontalScrollView;  
  16. import android.widget.LinearLayout;  
  17.   
  18. public class MyHorizontalScrollView extends HorizontalScrollView implements  
  19.         OnClickListener  
  20. {  
  21.   
  22.     /** 
  23.      * 图片滚动时的回调接口 
  24.      *  
  25.      * @author zhy 
  26.      *  
  27.      */  
  28.     public interface CurrentImageChangeListener  
  29.     {  
  30.         void onCurrentImgChanged(int position, View viewIndicator);  
  31.     }  
  32.   
  33.     /** 
  34.      * 条目点击时的回调 
  35.      *  
  36.      * @author zhy 
  37.      *  
  38.      */  
  39.     public interface OnItemClickListener  
  40.     {  
  41.         void onClick(View view, int pos);  
  42.     }  
  43.   
  44.     private CurrentImageChangeListener mListener;  
  45.   
  46.     private OnItemClickListener mOnClickListener;  
  47.   
  48.     private static final String TAG = "MyHorizontalScrollView";  
  49.   
  50.     /** 
  51.      * HorizontalListView中的LinearLayout 
  52.      */  
  53.     private LinearLayout mContainer;  
  54.   
  55.     /** 
  56.      * 子元素的宽度 
  57.      */  
  58.     private int mChildWidth;  
  59.     /** 
  60.      * 子元素的高度 
  61.      */  
  62.     private int mChildHeight;  
  63.     /** 
  64.      * 当前最后一张图片的index 
  65.      */  
  66.     private int mCurrentIndex;  
  67.     /** 
  68.      * 当前第一张图片的下标 
  69.      */  
  70.     private int mFristIndex;  
  71.     /** 
  72.      * 当前第一个View 
  73.      */  
  74.     private View mFirstView;  
  75.     /** 
  76.      * 数据适配器 
  77.      */  
  78.     private HorizontalScrollViewAdapter mAdapter;  
  79.     /** 
  80.      * 每屏幕最多显示的个数 
  81.      */  
  82.     private int mCountOneScreen;  
  83.     /** 
  84.      * 屏幕的宽度 
  85.      */  
  86.     private int mScreenWitdh;  
  87.   
  88.   
  89.     /** 
  90.      * 保存View与位置的键值对 
  91.      */  
  92.     private Map<View, Integer> mViewPos = new HashMap<View, Integer>();  
  93.   
  94.     public MyHorizontalScrollView(Context context, AttributeSet attrs)  
  95.     {  
  96.         super(context, attrs);  
  97.         // 获得屏幕宽度  
  98.         WindowManager wm = (WindowManager) context  
  99.                 .getSystemService(Context.WINDOW_SERVICE);  
  100.         DisplayMetrics outMetrics = new DisplayMetrics();  
  101.         wm.getDefaultDisplay().getMetrics(outMetrics);  
  102.         mScreenWitdh = outMetrics.widthPixels;  
  103.     }  
  104.   
  105.     @Override  
  106.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
  107.     {  
  108.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  109.         mContainer = (LinearLayout) getChildAt(0);  
  110.     }  
  111.   
  112.     /** 
  113.      * 加载下一张图片 
  114.      */  
  115.     protected void loadNextImg()  
  116.     {  
  117.         // 数组边界值计算  
  118.         if (mCurrentIndex == mAdapter.getCount() - 1)  
  119.         {  
  120.             return;  
  121.         }  
  122.         //移除第一张图片,且将水平滚动位置置0  
  123.         scrollTo(00);  
  124.         mViewPos.remove(mContainer.getChildAt(0));  
  125.         mContainer.removeViewAt(0);  
  126.           
  127.         //获取下一张图片,并且设置onclick事件,且加入容器中  
  128.         View view = mAdapter.getView(++mCurrentIndex, null, mContainer);  
  129.         view.setOnClickListener(this);  
  130.         mContainer.addView(view);  
  131.         mViewPos.put(view, mCurrentIndex);  
  132.           
  133.         //当前第一张图片小标  
  134.         mFristIndex++;  
  135.         //如果设置了滚动监听则触发  
  136.         if (mListener != null)  
  137.         {  
  138.             notifyCurrentImgChanged();  
  139.         }  
  140.   
  141.     }  
  142.     /** 
  143.      * 加载前一张图片 
  144.      */  
  145.     protected void loadPreImg()  
  146.     {  
  147.         //如果当前已经是第一张,则返回  
  148.         if (mFristIndex == 0)  
  149.             return;  
  150.         //获得当前应该显示为第一张图片的下标  
  151.         int index = mCurrentIndex - mCountOneScreen;  
  152.         if (index >= 0)  
  153.         {  
  154. //          mContainer = (LinearLayout) getChildAt(0);  
  155.             //移除最后一张  
  156.             int oldViewPos = mContainer.getChildCount() - 1;  
  157.             mViewPos.remove(mContainer.getChildAt(oldViewPos));  
  158.             mContainer.removeViewAt(oldViewPos);  
  159.               
  160.             //将此View放入第一个位置  
  161.             View view = mAdapter.getView(index, null, mContainer);  
  162.             mViewPos.put(view, index);  
  163.             mContainer.addView(view, 0);  
  164.             view.setOnClickListener(this);  
  165.             //水平滚动位置向左移动view的宽度个像素  
  166.             scrollTo(mChildWidth, 0);  
  167.             //当前位置--,当前第一个显示的下标--  
  168.             mCurrentIndex--;  
  169.             mFristIndex--;  
  170.             //回调  
  171.             if (mListener != null)  
  172.             {  
  173.                 notifyCurrentImgChanged();  
  174.   
  175.             }  
  176.         }  
  177.     }  
  178.   
  179.     /** 
  180.      * 滑动时的回调 
  181.      */  
  182.     public void notifyCurrentImgChanged()  
  183.     {  
  184.         //先清除所有的背景色,点击时会设置为蓝色  
  185.         for (int i = 0; i < mContainer.getChildCount(); i++)  
  186.         {  
  187.             mContainer.getChildAt(i).setBackgroundColor(Color.WHITE);  
  188.         }  
  189.           
  190.         mListener.onCurrentImgChanged(mFristIndex, mContainer.getChildAt(0));  
  191.   
  192.     }  
  193.   
  194.     /** 
  195.      * 初始化数据,设置数据适配器 
  196.      *  
  197.      * @param mAdapter 
  198.      */  
  199.     public void initDatas(HorizontalScrollViewAdapter mAdapter)  
  200.     {  
  201.         this.mAdapter = mAdapter;  
  202.         mContainer = (LinearLayout) getChildAt(0);  
  203.         // 获得适配器中第一个View  
  204.         final View view = mAdapter.getView(0null, mContainer);  
  205.         mContainer.addView(view);  
  206.   
  207.         // 强制计算当前View的宽和高  
  208.         if (mChildWidth == 0 && mChildHeight == 0)  
  209.         {  
  210.             int w = View.MeasureSpec.makeMeasureSpec(0,  
  211.                     View.MeasureSpec.UNSPECIFIED);  
  212.             int h = View.MeasureSpec.makeMeasureSpec(0,  
  213.                     View.MeasureSpec.UNSPECIFIED);  
  214.             view.measure(w, h);  
  215.             mChildHeight = view.getMeasuredHeight();  
  216.             mChildWidth = view.getMeasuredWidth();  
  217.             Log.e(TAG, view.getMeasuredWidth() + "," + view.getMeasuredHeight());  
  218.             mChildHeight = view.getMeasuredHeight();  
  219.             // 计算每次加载多少个View  
  220.             mCountOneScreen = mScreenWitdh / mChildWidth+2;  
  221.   
  222.             Log.e(TAG, "mCountOneScreen = " + mCountOneScreen  
  223.                     + " ,mChildWidth = " + mChildWidth);  
  224.               
  225.   
  226.         }  
  227.         //初始化第一屏幕的元素  
  228.         initFirstScreenChildren(mCountOneScreen);  
  229.     }  
  230.   
  231.     /** 
  232.      * 加载第一屏的View 
  233.      *  
  234.      * @param mCountOneScreen 
  235.      */  
  236.     public void initFirstScreenChildren(int mCountOneScreen)  
  237.     {  
  238.         mContainer = (LinearLayout) getChildAt(0);  
  239.         mContainer.removeAllViews();  
  240.         mViewPos.clear();  
  241.   
  242.         for (int i = 0; i < mCountOneScreen; i++)  
  243.         {  
  244.             View view = mAdapter.getView(i, null, mContainer);  
  245.             view.setOnClickListener(this);  
  246.             mContainer.addView(view);  
  247.             mViewPos.put(view, i);  
  248.             mCurrentIndex = i;  
  249.         }  
  250.   
  251.         if (mListener != null)  
  252.         {  
  253.             notifyCurrentImgChanged();  
  254.         }  
  255.   
  256.     }  
  257.   
  258.     @Override  
  259.     public boolean onTouchEvent(MotionEvent ev)  
  260.     {  
  261.         switch (ev.getAction())  
  262.         {  
  263.         case MotionEvent.ACTION_MOVE:  
  264. //          Log.e(TAG, getScrollX() + "");  
  265.   
  266.             int scrollX = getScrollX();  
  267.             // 如果当前scrollX为view的宽度,加载下一张,移除第一张  
  268.             if (scrollX >= mChildWidth)  
  269.             {  
  270.                 loadNextImg();  
  271.             }  
  272.             // 如果当前scrollX = 0, 往前设置一张,移除最后一张  
  273.             if (scrollX == 0)  
  274.             {  
  275.                 loadPreImg();  
  276.             }  
  277.             break;  
  278.         }  
  279.         return super.onTouchEvent(ev);  
  280.     }  
  281.   
  282.     @Override  
  283.     public void onClick(View v)  
  284.     {  
  285.         if (mOnClickListener != null)  
  286.         {  
  287.             for (int i = 0; i < mContainer.getChildCount(); i++)  
  288.             {  
  289.                 mContainer.getChildAt(i).setBackgroundColor(Color.WHITE);  
  290.             }  
  291.             mOnClickListener.onClick(v, mViewPos.get(v));  
  292.         }  
  293.     }  
  294.   
  295.     public void setOnItemClickListener(OnItemClickListener mOnClickListener)  
  296.     {  
  297.         this.mOnClickListener = mOnClickListener;  
  298.     }  
  299.   
  300.     public void setCurrentImageChangeListener(  
  301.             CurrentImageChangeListener mListener)  
  302.     {  
  303.         this.mListener = mListener;  
  304.     }  
  305.   
  306. }  

首先,加载第