自定义HorizontalScrollView

传承者（Inheritors）打造共同进步生态圈！！！

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

对图片底部布局activity_index_gallery-item

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="120dp"
    android:background="@android:color/white"
    android:layout_height="120dp">
<ImageView
    android:id="@+id/index_gallery_item_image"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_margin="5dp"
    android:scaleType="centerCrop"
    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/index_gallery_item_text"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/index_gallery_item_image"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:textColor="#ff0000"
        android:textSize="12dp"
        />
</RelativeLayout>

HorizontalScrollViewAdapter

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.index_gallery_item_image);
            viewHolder.mText = (TextView) convertView.findViewById(R.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;
    }


}

activity_main2

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.administrator.testapplication.Main2Activity">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <ImageView
            android:id="@+id/id_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher"
            />
    </FrameLayout>
    <com.example.administrator.testapplication.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.administrator.testapplication.MyHorizontalScrollView>
</LinearLayout>

MyHorizontalScrollView

public class MyHorizontalScrollView extends HorizontalScrollView implements View.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;

    /**
     * HorizontalListView中的LinearLayout
     */
    private LinearLayout mContainer;

    private int mChildWidth,mChildHeight;//子元素的宽度.高度

    private int mCurrentIndex,mFirstIndex;//当前最后一张图片的index，当前第一张图片的下标

    private View mFirstView;//当前第一个View

    private HorizontalScrollViewAdapter mAdapter;//数据适配器

    private int mCountOneScreen;//每个屏幕最多显示的个数

    private int mScreenWidth;//屏幕的宽度

    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);
        mScreenWidth = 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);

        //当前第一张图片小标
        mFirstIndex++;
        //如果设置了滚动监听则触发
        if(mListener != null){
            notifyCurrentImgChanged();

        }
    }

    /**
     * 加载前一张图片
     */
    protected void loadPreImg(){
        //如果当前已经是第一张，则返回
        if(mFirstIndex == 0){
            return;
        }
        //获得当前应该显示为第一张图片的下标
        int index = mCurrentIndex - mCountOneScreen;
        if(index >= 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--;
            mFirstIndex--;
            //回调
            if(mListener != null){
                notifyCurrentImgChanged();
            }
        }

    }

    /**
     * 滑动时的回调
     */
    private void notifyCurrentImgChanged() {
        //先清除所有的背景色，点击时会设置为蓝色
        for (int i = 0; i < mContainer.getChildCount(); i++) {
            mContainer.getChildAt(i).setBackgroundColor(Color.WHITE);
        }
        mListener.onCurrentImgChanged(mFirstIndex,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, MeasureSpec.UNSPECIFIED);
            int h = View.MeasureSpec.makeMeasureSpec(0,MeasureSpec.UNSPECIFIED);

            view.measure(w,h);
            mChildHeight = view.getMeasuredHeight();
            mChildWidth = view.getMeasuredWidth();

            //计算每次加载多少个View
          //  mCountOneScreen = (mScreenWidth/mChildWidth == 0)?mScreenWidth/mChildWidth+1:mScreenWidth/mChildWidth+2;
            mCountOneScreen = mScreenWidth / mChildWidth+2;
        }
        //初始化第一屏幕的元素
        initFirstScreenChildren(mCountOneScreen);

    }

    /**
     * 加载第一屏的view
     * @param mCountOneScreen
     */
    private 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();
                //如果当前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  setmCurrentImageChangeListener( CurrentImageChangeListener mListener){
        this.mListener = mListener;
    }






}

Main

public class Main2Activity extends Activity {
private MyHorizontalScrollView mHorizontalScrollView;
    private HorizontalScrollViewAdapter mAdapter;
    private ImageView mImg;
    private List<Integer> mDatas = new ArrayList<>(Arrays.asList(R.mipmap.a,
            R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e,R.mipmap.f,R.mipmap.g,
            R.mipmap.h,R.mipmap.l));
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main2);

        mImg = (ImageView) findViewById(R.id.id_content);
        mHorizontalScrollView = (MyHorizontalScrollView) findViewById(R.id.id_horizontalScrollView);
        mAdapter = new HorizontalScrollViewAdapter(this,mDatas);
        //添加回滚回调
        mHorizontalScrollView.setmCurrentImageChangeListener(new MyHorizontalScrollView.CurrentImageChangeListener() {
            @Override
            public void onCurrentImgChanged(int position, View viewIndicator) {
                mImg.setImageResource(mDatas.get(position));
                viewIndicator.setBackgroundColor(Color.parseColor("#aa024da4"));
            }
        });

        //添加点击回调
        mHorizontalScrollView.setOnItemClickListener(new MyHorizontalScrollView.OnItemClickListener() {
            @Override
            public void onClick(View view, int pos) {
                mImg.setImageResource(mDatas.get(pos));
                view.setBackgroundColor(Color.parseColor("#aa024da4"));
            }
        });

        //设置适配器
        mHorizontalScrollView.initDatas(mAdapter);


    }
}