Android控件——HorizontalScrollView使用(一) - Go语言中文社区

Android控件——HorizontalScrollView使用(一)


1. HorizontalScrollView简单使用

Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息;Gallery还可以和ImageSwitcher组件结合使用来实现一个通过缩略图来浏览图片的效果;

但Gallery被谷歌废弃了,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果;但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到不管多少图片都不会OOM(ViewPager内部一直初始化,回收,最多保持3个View)。

使用简单示例
HorizontalScrollView其实是FrameLayout的子类,里面最多只能包含一个直接组件(组件里面还可以嵌套组件),这里选择LinearLayout,方向设置水平。

  • 布局文件 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:background="#AA444444"
        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"/>
    </HorizontalScrollView>
</LinearLayout>

activity_index_gallery_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/id_index_gallery_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/id_index_gallery_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

</LinearLayout>
  • MainActivity.java
public class MainActivity extends AppCompatActivity {

    private LinearLayout mGallery;
    private int[] mImgIds;
    private LayoutInflater mInflater;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        mInflater = LayoutInflater.from(this);
        initData();
        initView();
    }

    private void initData() {
        mImgIds = new int[] { R.drawable.a, R.drawable.b, R.drawable.c,R.drawable.d,
                R.drawable.e,R.drawable.f,R.drawable.g
        };
    }

    private void initView() {
        mGallery = (LinearLayout) findViewById(R.id.id_gallery);

        for (int i = 0; i < mImgIds.length; i++) {
            View view = mInflater.inflate(R.layout.activity_index_gallery_item,
                    mGallery, false);
            ImageView img = (ImageView) view.findViewById(R.id.id_index_gallery_item_image);
            img.setImageResource(mImgIds[i]);
            TextView txt = (TextView) view.findViewById(R.id.id_index_gallery_item_text);
            txt.setText("some info");
            txt.setTextColor(Color.BLACK);
            mGallery.addView(view);
        }
    }
}

2. 自定义HorizontalScrollView

HorizontalScrollView不管里面多少View都是不会回收的,当达到一定量的时候会发生OOM

自定义设计思路

  • 首先根据屏幕大小和Item大小,计算一个屏幕可以加载多少个Item,然后加载该数量的Item。
  • 当用户右滑(从右向左),滑动到一定距离,加载下一张,删除第一张
  • 当用户左滑(从左向右),滑动一定距离,加载上一张,删除最后一张

要实现的效果图如下:
在这里插入图片描述

  • 设置布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/id_content"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher_background" />
    </FrameLayout>

    <com.vivo.wenruan.horizontalscrollviewdemo.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.vivo.wenruan.horizontalscrollviewdemo.MyHorizontalScrollView>

</LinearLayout>
  • 设置数据适配器
public class HorizontalScrollViewAdapter {

    private Context mContext;
    private LayoutInflater mInflate;
    private List<Integer> mDatas;

    public HorizontalScrollViewAdapter(Context context, List<Integer> mDatas) {
        this.mContext = context;
        mInflate = LayoutInflater.from(context);
        this.mDatas = mDatas;
    }

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

    public Object getItem(int positon) {
        return mDatas.get(positon);
    }

    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 = mInflate.inflate(R.layout.activity_index_gallery_item, parent, false);
            viewHolder.mImg = (ImageView) convertView.findViewById(R.id.id_index_gallery_item_image);
            viewHolder.mText = (TextView) convertView.findViewById(R.id.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;
    }
}

  • 自定义HorizontalScrollView类
public class MyHorizontalScrollView extends HorizontalScrollView implements View.OnClickListener {

    private static final String TAG = "MyHorizontalScrollView";

    // 图片滚动时的回调接口
    public interface CurrentImageChangeListener {
        void onCurrentImgChanged(int position, View viewIndicator);
    }

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

    private CurrentImageChangeListener mListener;

    private OnItemClickListener mOnClickListener;
    // HorizontalScrollView中的LinearLayout
    private LinearLayout mContainer;
    //子元素宽度
    private int mChildWidth;
    //子元素高度
    private int mChildHeight;
    //当前最后一张图片的index
    private int mCurrentIndex;
    //当前第一张图片的下标
    private int mFirstIndex;
    //当前第一个View
    private View mFirstView;
    //数据适配器
    private HorizontalScrollViewAdapter mAdapter;
    //每个屏幕最多显示的个数
    private int mCountOneScreen;
    // 屏幕的宽度
    private int mScreenWidth;
    //保存View与位置键值对
    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)
        {
//			mContainer = (LinearLayout) getChildAt(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();

            }
        }
    }

    /**
     * 滑动时的回调
     */
    public 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,
                    View.MeasureSpec.UNSPECIFIED);
            int h = View.MeasureSpec.makeMeasureSpec(0,
                    View.MeasureSpec.UNSPECIFIED);
            view.measure(w, h);
            mChildHeight = view.getMeasuredHeight();
            mChildWidth = view.getMeasuredWidth();
            Log.e(TAG, view.getMeasuredWidth() + "," + view.getMeasuredHeight());
            mChildHeight = view.getMeasuredHeight();
            // 计算每次加载多少个View
            mCountOneScreen = mScreenWidth / mChildWidth+2;

            Log.e(TAG, "mCountOneScreen = " + mCountOneScreen
                    + " ,mChildWidth = " + mChildWidth);


        }
        //判断加载的图片是否小于一个屏幕加载数
        if (mAdapter.getCount() < mCountOneScreen) {
            mCountOneScreen = mAdapter.getCount();
        }
        //初始化第一屏幕的元素
        initFirstScreenChildren(mCountOneScreen);
    }

    /**
     * 加载第一屏的View
     *
     * @param 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
    
                        
                        
版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_43499030/article/details/90182473
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢