Android使用HorizontalScrollView实现水平滚动
HorizontalScrollView 和 ScrollView 都是由 FrameLayout 派生出来的。它们就是一个用于为普通组件添加滚动条的组件。且 HorizontalScrollView 和 ScrollView 里面最多只能包含一个组件(当然组件里面还可以嵌套组件)。它们不同的是 HorizontalScrollView 用于添加水平滚动,而 ScrollView 用于添加垂直滚动。
突然间想到 做一个屏幕下方水平滑动,屏幕上方并作出相应的反应的效果。只是在下方滚动时,屏幕上方没有作出理想的反应,点击事件倒是实现了。最终只能在网上搜索,终于找到了一个。于是作出的效果如下:
只是这个效果还有所缺陷,加载了 13 张图片,在屏幕下方水平滚动到最后一页时,第 9 张的图片并没有在上面的显示出来(原作者的也有这个问题);如果图片的数量小于或者等于 4 张时则不能运行。
本例的难点主要在于 MyHorizontalView 类中,并且还有收集而来的注解。
MainActivity.java :
package com.crazy.horizontalscrollviewtest; import java.io.InputStream; import java.util.ArrayList; import java.util.Arrays; import java.util.List; import com.crazy.horizontalscrollviewtest.MyHorizontalView.CurrentImageChangeListener; import com.crazy.horizontalscrollviewtest.MyHorizontalView.OnItemClickListener; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Color; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { private ImageView mImageView; private MyHorizontalView myHorizontalView; private List<Bitmap> bitmapList; private MyAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { mImageView = (ImageView)findViewById(R.id.imageView); bitmapList = new ArrayList<>(Arrays.asList( readBitMap(this, R.drawable.bricks), readBitMap(this, R.drawable.dog), readBitMap(this, R.drawable.flower), readBitMap(this, R.drawable.grass), readBitMap(this, R.drawable.stones), readBitMap(this, R.drawable.wood), readBitMap(this, R.drawable.bg_01), readBitMap(this, R.drawable.bg_02), readBitMap(this, R.drawable.bg_03), readBitMap(this, R.drawable.bg_04), readBitMap(this, R.drawable.bg_05), readBitMap(this, R.drawable.bg_06), readBitMap(this, R.drawable.bg_07) )); myHorizontalView = (MyHorizontalView)findViewById(R.id.my_horizontal); adapter = new MyAdapter(this, bitmapList); //设置适配器 myHorizontalView.initDatas(adapter); //添加滚动回调 myHorizontalView .setCurrentImageChangeListener(new CurrentImageChangeListener() { @Override public void onCurrentImgChanged(int position, View viewIndicator) { Log.e("==============","=============== " + position); mImageView.setImageBitmap(bitmapList.get(position)); viewIndicator.setBackgroundColor(Color.parseColor("#AA024DA4")); } }); //添加点击回调 myHorizontalView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(View view, int position) { mImageView.setImageBitmap(bitmapList.get(position)); view.setBackgroundColor(Color.parseColor("#AA024DA4")); } }); } public static Bitmap readBitMap(Context mContext, int resId) { BitmapFactory.Options opt = new BitmapFactory.Options(); opt.inPreferredConfig = Bitmap.Config.RGB_565; opt.inPurgeable = true; opt.inInputShareable = true; InputStream is = mContext.getResources().openRawResource(resId); return BitmapFactory.decodeStream(is, null, opt); } }
MyAdapter 这部分并不是为 AbsListView 和 AbsSpinner 及其子类提供列表项的。它主要用于为 HorizontalScrollView 提供数据。
MyAdapter.java :
package com.crazy.horizontalscrollviewtest; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.graphics.Bitmap; import android.util.Log; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.RelativeLayout; /** * Created by antimage on 2016/1/9. */ public class MyAdapter extends BaseAdapter { private List<Bitmap> bitmapList; private Context mContext; public MyAdapter(Context context, List<Bitmap> bitmapList) { mContext = context; if (bitmapList == null) { bitmapList = new ArrayList<Bitmap>(); } else { this.bitmapList = bitmapList; } } @Override public int getCount() { return bitmapList.size(); } @Override public Object getItem(int position) { return bitmapList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder viewHolder = null; View view = null; // 此处要用相对布局,且与 XML 中的布局相同; // 如果使用线性布局,则显示不完整 RelativeLayout layout; if (convertView == null) { layout = (RelativeLayout) View.inflate(mContext, R.layout.image_item_layout, null); viewHolder = new ViewHolder(); viewHolder.image = (ImageView) layout.findViewById(R.id.top_image); layout.setTag(viewHolder); } else { layout = (RelativeLayout) convertView; view = layout; viewHolder = (ViewHolder) layout.getTag(); Log.e("MyAdapter", "正在检测数据来了没有 "); } Bitmap btm = (Bitmap) getItem(position); viewHolder.image.setImageBitmap(btm); Log.e("MyAdapter", "信息来了哦!"); return layout; } private static class ViewHolder { ImageView image; } }
MyHorizontalView 类主要用于未 MainAcitivity 类提供接口、水平滚动时屏幕上方的反应及相应的点击事件等。该类主要使用了收集而来的代码,并做了相应的调整。
MyHorizontalView.java :
package com.crazy.horizontalscrollviewtest; import java.util.HashMap; import java.util.Map; import android.app.Activity; 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.ViewGroup; import android.widget.HorizontalScrollView; /** * Created by antimage on 2016/1/9. */ public class MyHorizontalView extends HorizontalScrollView implements View.OnClickListener { private String TAG = "MyHorizontalView"; private ViewGroup parent; private int screenWidth; /* 当前最后一张图片的index*/ private int mCurrentIndex; /* 当前第一张图片的下标*/ private int mFristIndex; /* 每屏幕最多显示的个数*/ private int mCountOneScreen; /* 子元素的宽度*/ private int mChildWidth; /* 子元素的高度*/ private int mChildHeight; private MyAdapter mAdapter; private CurrentImageChangeListener mListener; private OnItemClickListener mOnItemClickListener; /** * 图片滚动时的回调接口 */ public interface CurrentImageChangeListener { void onCurrentImgChanged(int position, View viewIndicator); } /** * 点击条目时的回调 */ public interface OnItemClickListener { void onItemClick(View view, int pos); } /* 保存View与位置的键值对 */ private Map<View, Integer> mViewPos = new HashMap<>(); public MyHorizontalView(Context context) { this(context, null); } public MyHorizontalView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyHorizontalView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.setSmoothScrollingEnabled(true); DisplayMetrics metrics = new DisplayMetrics(); // 取得窗口属性 ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(metrics); // 窗口的宽度 (像素) screenWidth = metrics.widthPixels; } /** * 初始化数据,设置数据适配器 */ public void initDatas(MyAdapter mAdapter) { if (getChildCount() == 0) { Log.e(TAG, "必须要有子元素"); } if (getChildCount() == 0 || mAdapter == null) return; this.mAdapter = mAdapter; parent = (ViewGroup) getChildAt(0); // 获得适配器中第一个View final View view = mAdapter.getView(0, null, parent); parent.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, "子组件的宽:" + mChildWidth + ", 子组件的高:" + mChildHeight); // 计算每次加载多少个View mCountOneScreen = screenWidth / mChildWidth + 2; Log.e(TAG, "mCountOneScreen = " + mCountOneScreen + " ,mChildWidth = " + mChildWidth); } //初始化第一屏幕的元素 loadFirstChild(mCountOneScreen); } /** * 加载第一屏的View */ public void loadFirstChild(int mCountOneScreen) { parent.removeAllViews(); mViewPos.clear(); for (int i = 0; i < mCountOneScreen; i++) { View view = mAdapter.getView(i, null, parent); view.setOnClickListener(this); parent.addView(view); mViewPos.put(view, i); mCurrentIndex = i; } if (mListener != null) { notifyCurrentImageChanged(); } } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_MOVE: int scrollX = getScrollX(); // 如果当前scrollX为view的宽度,加载下一张,移除第一张 if (scrollX >= mChildWidth) { loadNextImage(); } // 如果当前scrollX = 0, 往前设置一张,移除最后一张 if (scrollX == 0) { loadPreImage(); } break; } // 这里无论返回值是设置 true 还是 false // HorizontalScrollView都不会滑动 return super.onTouchEvent(event); } /** * 加载下一张图片 */ protected void loadNextImage() { // 数组边界值计算 if (mCurrentIndex == mAdapter.getCount() - 1) { return; } //移除第一张图片,且将水平滚动位置置0(图片有宽度,所以为置0) scrollTo(0, 0); mViewPos.remove(parent.getChildAt(0)); parent.removeViewAt(0); //获取下一张图片,并且设置onClick事件,且加入容器中 View view = mAdapter.getView(++mCurrentIndex, null, parent); Log.e(TAG, "mCurrentIndex ===" + mCurrentIndex); view.setOnClickListener(this); parent.addView(view); mViewPos.put(view, mCurrentIndex); //当前第一张图片小标 mFristIndex++; //如果设置了滚动监听则触发 if (mListener != null) { notifyCurrentImageChanged(); } } /** * 加载前一张图片 */ protected void loadPreImage() { //如果当前已经是第一张,则返回 if (mFristIndex == 0) return; //获得当前应该显示为第一张图片的下标 int index = mCurrentIndex - mCountOneScreen; if (index >= 0) { //移除最后一张 int oldViewPos = parent.getChildCount() - 1; mViewPos.remove(parent.getChildAt(oldViewPos)); parent.removeViewAt(oldViewPos); //将此View放入第一个位置 View view = mAdapter.getView(index, null, parent); mViewPos.put(view, index); parent.addView(view, 0); view.setOnClickListener(this); //水平滚动位置向左移动view的宽度个像素 scrollTo(mChildWidth, 0); //当前位置--,当前第一个显示的下标-- mCurrentIndex--; mFristIndex--; //回调 if (mListener != null) { notifyCurrentImageChanged(); } } } /** * 滑动时的回调 */ public void notifyCurrentImageChanged() { int sum = parent.getChildCount(); for (int i = 0; i < sum; i++) { // 清除所有的背景色,点击时会设置为蓝色 parent.getChildAt(i).setBackgroundColor(Color.WHITE); } mListener.onCurrentImgChanged(mFristIndex, parent.getChildAt(0)); } @Override public void onClick(View v) { if (mOnItemClickListener != null) { int sum = parent.getChildCount(); for (int i = 0; i < sum; i++) { parent.getChildAt(i).setBackgroundColor(Color.WHITE); } mOnItemClickListener.onItemClick(v, mViewPos.get(v)); } } public void setOnItemClickListener(OnItemClickListener mOnClickListener) { this.mOnItemClickListener = mOnClickListener; } public void setCurrentImageChangeListener(CurrentImageChangeListener mListener) { this.mListener = mListener; } }
该类中的很多数据都在 List 集合里面,而集合的下标初始值为 0,与 list.size() 不相等。顾猜测,正是由于这个原因,在 mImageView 显示图片时,不能显示到第 9 张。
在这个类中 计算每次加载多少个 View 时的 mCountOneScreen 计算方法感觉略有问题,从效果图中可以看出,屏幕中能加载 3 张多一点的图片。mCountOneScreen = screenWidth / mChildWidth + 2; 在我的模拟器上计算得出的结果等于 5,也就是为什么不能加载小于等于 4 张图片,如果想要让该屏幕底部上只显示 3 张即一个屏幕也就能显示完。那就不用水平滚动了,那样就感觉使用 HorizontalScrollView 失去了意义。
所用到的布局文件:
content_main.xml :
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="5dp" android:paddingTop="5dp" android:paddingRight="5dp" android:paddingBottom="5dp" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.crazy.horizontalscrollviewtest.MainActivity" tools:showIn="@layout/activity_main"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="380dp" android:scaleType="centerCrop" /> <com.crazy.horizontalscrollviewtest.MyHorizontalView android:id="@+id/my_horizontal" android:layout_below="@id/imageView" android:layout_alignParentBottom="true" android:scrollbars="none" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/linear_layout" android:orientation="horizontal" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> </LinearLayout> </com.crazy.horizontalscrollviewtest.MyHorizontalView> </RelativeLayout>
image_item_layout.xml (主要用于提供水平滚动的图片(屏幕底部)):
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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/top_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:scaleType="centerCrop"/> </RelativeLayout>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。