码迷,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(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. }  

首先,加载第一个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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!