码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2016-03-26 07:05:06      阅读：294      评论：0      收藏：0      [点我收藏+]

标签：

看下最后的效果图：

技术分享

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

1、首先看布局文件：

[html] view plain copy
 技术分享技术分享
  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
 技术分享技术分享
  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
 技术分享技术分享
  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
 技术分享技术分享
  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(0, 0);  
  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(0, null, 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. }  

首先，加载第一个Item，根据item的宽计算当前屏幕可以加载多少张图片，然后初始化第一屏的图片，接下来就是从写onTouchEvent，在其中监听用户的ACTION_MOVE，然后根据移动的距离加载前一张或者后一张，同时动态移除不可见的View，回收内存~~~~

代码中有个Map专门存储View和posion的，主要是为了给点击回调提供当前的View的位置，有点类似：Android 自定义 ViewPager 打造千变万化的图片切换效果里面的Map的巧妙用法~~

是不是完全实现了ViewPager和HorizontalScrollView的合体~~~HorizontalScrollView的效果，ViewPager的特性~~~~

最后贴一下旋转屏幕后的效果图：

技术分享

可以看出，不仅是做相册，还是图片轮播想过都是刚刚的！


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

标签：

原文地址：http://blog.csdn.net/qq_32521313/article/details/50978366
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！