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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
