自定义横向的ScrollView的开发和用途

在一些项目中，有需求要有横向滑动的控件，而原始的ScrollView和ListView都是竖向的。
有一种常用的方法是在ScrollView里放一个LinearLayout,然后在Activity中循环加入控件更新数据，但这样存在一个问题，那就是它会一次性加载你所要的全部控件，而一旦你的数据过多就会产生内存溢出，所以参考ListView的滑动加载方式，借鉴了http://blog.csdn.net/lmj623565791/article/details/38140505大神的博客内容，自定义了HorizontalScrollView并做了改进。

首先来看看HorizontalScrollView的自定义。
要仿ListView来自定义HorizontalScrollView，首先就要看ListView和ListView的Adapter，ListView是基本控件，而Adapter则用来更新数据和控件。可以看出来这就是设计模式中的适配器模式，所以也要给HorizontalScrollView配上一个适配器，并按照ListView内部调用Adapter那样调用适配器，这样才能实现HorizontalScrollView的数据自动更新和刷新。接下来看看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
{


    public interface CurrentImageChangeListener
    {
        void onCurrentImgChanged(int position, View viewIndicator);
    }


    public interface OnItemClickListener
    {
        void onClick(View view, int pos);
    }

    private CurrentImageChangeListener mListener;

    private OnItemClickListener mOnClickListener;

    private LinearLayout mContainer;


    private int mChildWidth;

    private int mChildHeight;

    private int mCurrentIndex;

    private int mFristIndex;

    private View mFirstView;

    private HorizontalScrollViewAdapter mAdapter;

    private int mCountOneScreen;

    private int mScreenWitdh;



    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;
        }

        scrollTo(0, 0);
        mViewPos.remove(mContainer.getChildAt(0));
        mContainer.removeViewAt(0);


        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)
        {

            int oldViewPos = mContainer.getChildCount() - 1;
            mViewPos.remove(mContainer.getChildAt(oldViewPos));
            mContainer.removeViewAt(oldViewPos);


            View view = mAdapter.getView(index, null, mContainer);
            mViewPos.put(view, index);
            mContainer.addView(view, 0);
            view.setOnClickListener(this);

            scrollTo(mChildWidth, 0);

            mCurrentIndex--;
            mFristIndex--;

            if (mListener != null)
            {
                notifyCurrentImgChanged();

            }
        }
    }


    public void notifyCurrentImgChanged()
    {   
        mListener.onCurrentImgChanged(mFristIndex, mContainer.getChildAt(0));

    }


    public void initDatas(HorizontalScrollViewAdapter mAdapter)
    {
        this.mAdapter = mAdapter;
        mContainer = (LinearLayout) getChildAt(0);

        final View view = mAdapter.getView(0, null, mContainer);
        mContainer.addView(view);


        if (mChildWidth == 0 && mChildHeight == 0)
        {
            int w = MeasureSpec.makeMeasureSpec(0,
                    MeasureSpec.UNSPECIFIED);
            int h = MeasureSpec.makeMeasureSpec(0,
                    MeasureSpec.UNSPECIFIED);
            view.measure(w, h);
            mChildHeight = view.getMeasuredHeight();
            mChildWidth = view.getMeasuredWidth();
            Log.e(TAG, view.getMeasuredWidth() + "," + view.getMeasuredHeight());
            mChildHeight = view.getMeasuredHeight();

            mCountOneScreen = (mScreenWitdh / mChildWidth == 0)?mScreenWitdh / mChildWidth+1:mScreenWitdh / mChildWidth+2;

            if(mCountOneScreen>mAdapter.getCount()){
                mCountOneScreen = mAdapter.getCount();
            }


        }

        initFirstScreenChildren(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:

                int scrollX = getScrollX();

                if (scrollX >= mChildWidth)
                {
                    loadNextImg();
                }

                if (scrollX == 0)
                {
                    loadPreImg();
                }
                break;
        }
        return super.onTouchEvent(ev);
    }

    @Override
    public void onClick(View v)
    {
        if (mOnClickListener != null)
        {

            mOnClickListener.onClick(v, mViewPos.get(v));
        }
    }

    public void setOnItemClickListener(OnItemClickListener mOnClickListener)
    {
        this.mOnClickListener = mOnClickListener;
    }

    public void setCurrentImageChangeListener(
            CurrentImageChangeListener mListener)
    {
        this.mListener = mListener;
    }

}

这里需要注意的地方是mCountOneScreen获得的是整个屏幕所能容纳的view的个数，而我们放置这个控件的时候不一定是整个屏幕，随意要在initDatas里做判断：if(mCountOneScreen>mAdapter.getCount()){mCountOneScreen = mAdapter.getCount();}，否则就会出现size超出限制的问题，还有就是mChildWidth和mChildHeight的不应有等于0这个条件，否则在初始化该控件后，再来刷新这个控件的时候会产生显示内容加载不全，空指针这些问题。

接下来看看适配器：

import java.util.List;
import com.nostra13.universalimageloader.core.ImageLoader;

import android.content.Context;
import android.content.SharedPreferences;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import util.CreateQRImage;


public class HorizontalScrollViewAdapter
{

    private Context mContext;
    private LayoutInflater mInflater;
    private List<QiGoType> list;
    private SharedPreferences sharedPreferences;

    public HorizontalScrollViewAdapter(Context context, List<QiGoType> list)
    {
        this.mContext = context;
        mInflater = LayoutInflater.from(context);
        this.list = list;
    }

    public int getCount()
    {
        return list.size();
    }

    public Object getItem(int position)
    {
        return list.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.item, parent, false);
            viewHolder.pic = (ImageView) convertView.findViewById(R.id.main_pic);
            viewHolder.twocode = (ImageView)convertView.findViewById(R.id.main_twocode);
            viewHolder.formerprice = (TextView) convertView.findViewById(R.id.formerprice);
            viewHolder.nowprice = (TextView)convertView.findViewById(R.id.nowprice);

            convertView.setTag(viewHolder);
        } else
        {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        ImageLoader.getInstance().displayImage(list.get(position).getGoodsimgpath().toString(), viewHolder.pic);
        CreateQRImage weixin = new CreateQRImage(viewHolder.twocode);
        sharedPreferences = mContext.getSharedPreferences("yuangou", MainActivity.MODE_PRIVATE);
        String merchantid = sharedPreferences.getString("merchantid", "");
        String weixinurl = "http://weixin.51yuangou.com/product/detail/"+list.get(position).getUrlobject()+
                "?"+"merchantid="+merchantid+"&"+"eventid="+list.get(position).getEventid();
        weixin.createQRImage(weixinurl);
        viewHolder.formerprice.setText(list.get(position).getBusprice());
        viewHolder.nowprice.setText(list.get(position).getPrice());

        return convertView;
    }

    private class ViewHolder
    {
        ImageView pic;
        ImageView twocode;
        TextView formerprice;
        TextView nowprice;
    }


}

下面是HorizontalScrollView的布局文件：

<com.xiaosong.yuangou.MyHorizontalScrollView
                        android:id="@+id/mhsview"
                        android:layout_width="match_parent"
                        android:layout_height="440dp"
                        android:background="#000000"
                        android:scrollbars="none">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_marginTop="20dp"
                            android:layout_marginBottom="30dp"
                            android:orientation="horizontal"/>
                    </com.xiaosong.yuangou.MyHorizontalScrollView>

这里要注意的地方是ScrollView的继承自FrameLayout的，所以HorizontalScrollView，内部只能有一个直接的view。还有一点是内部的LinearLayout的orientation设置为水平。

MainActivity的内容：

 mhsview = (MyHorizontalScrollView)findViewById(R.id.mhsview);
            mhsview.setFocusable(true);
            adapter = new HorizontalScrollViewAdapter(this,qigolist);
            mhsview.setCurrentImageChangeListener(new MyHorizontalScrollView.CurrentImageChangeListener() {
                @Override
                public void onCurrentImgChanged(int position, View viewIndicator) {

                }
            });
            mhsview.setOnItemClickListener(new MyHorizontalScrollView.OnItemClickListener() {
                @Override
                public void onClick(View view, int pos) {
                    totalqigolist.get(pos);
                    System.out.println("抢购栏点击显示信息：");
                    System.out.println(pos);
                    System.out.println(totalqigolist.get(pos).getUrlobject());
                    System.out.println(totalqigolist.get(pos).getEventid());
                    Map<String, String> qigomap = new LinkedHashMap<String, String>();
                    qigomap.put("goodsid", totalqigolist.get(pos).getUrlobject().toString());
                    qigomap.put("merchantgoodsid", null);
                    qigomap.put("eventid", totalqigolist.get(pos).getEventid().toString());
                    detailinfor(qigomap);
                    mainviewpager.setCurrentItem(PAFE4);
                    backpagelist.add(PAFE4);
                }
            });
            mhsview.initDatas(adapter);
        }else{
            mhsview = (MyHorizontalScrollView)findViewById(R.id.mhsview);
            mhsview.setFocusable(false);
        }

以上就是HorizontalScrollView的全部内容，接下来就看看HorizontalScrollView所能用到的一些场合：

星期的变化：

选择栏：

图片的展示：