Android滑动展示图片（一页多图，带小圆点，类似小米市场APP详情页图片展示）

最近公司需求上有个功能，类似小米市场上APP详情页里的图片展示效果，有点像广告位的展示，只是广告位一般都是展示一张，这个要求一个屏幕展示多张，想了一下用ViewPager的话一方面需要控制最后一张图防止拉出空白，另一方面感觉滑动不是很流畅，这个方案就被pass了。最后综合考虑一下就用RecyclerView实现了此功能。先放图大家看看是啥功能吧。



其实只需自定义RecyclerView就可以了，代码贴出如下。

package com.maxi.myrecyclerview.widget;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.RecyclerView.OnScrollListener;
import android.util.AttributeSet;
import android.view.View;

public class MyRecyclerView extends RecyclerView implements OnScrollListener {

/**
* 当向右滑时记录第一个View 向左滑时记录当前屏幕最后一个View(也就是第二个View)
*/
private View mRecordView;

private OnItemScrollChangeListener mItemScrollChangeListener;

public void setOnItemScrollChangeListener(
OnItemScrollChangeListener mItemScrollChangeListener) {
this.mItemScrollChangeListener = mItemScrollChangeListener;
}

public interface OnItemScrollChangeListener {
void onChange(View view, int position);
}

public MyRecyclerView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
this.setOnScrollListener(this);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
mRecordView = getChildAt(0);
if (mItemScrollChangeListener != null) {
mItemScrollChangeListener.onChange(mRecordView,
getChildPosition(mRecordView));
}
}

@Override
public void onScrollStateChanged(int arg0) {
}
@Override
public void onScrolled(int arg0, int arg1) {
View newView = null;
if (arg0 > 1) {				//向右滑动
newView = getChildAt(1);		//记录第二个View也就是当前屏幕最后一个
} else if (arg0 < -1) {		//向左滑动
newView = getChildAt(0);	//记录第一个View也就是当前屏幕第一个
}
if (mItemScrollChangeListener != null) {
if (newView != null && newView != mRecordView) {
mRecordView = newView;
mItemScrollChangeListener.onChange(mRecordView,
getChildPosition(mRecordView));
}
}
}
}

通过判断mRecordView的变化判断小圆点的显示，然后看一下调用方法：

package com.maxi.myrecyclerview;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.Toast;

import com.maxi.myrecyclerview.adapter.GalleryAdapter;
import com.maxi.myrecyclerview.adapter.GalleryAdapter.OnItemClickListener;
import com.maxi.myrecyclerview.widget.MyRecyclerView;
import com.maxi.myrecyclerview.widget.MyRecyclerView.OnItemScrollChangeListener;

public class MainActivity extends Activity {
private MyRecyclerView mRecyclerView;
private GalleryAdapter mAdapter;
private List<Integer> mDatas;
private LinearLayout dotContain;
private List<ImageView> dotViews = new ArrayList<ImageView>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = (MyRecyclerView) findViewById(R.id.id_recyclerview_horizontal);
dotContain = (LinearLayout) findViewById(R.id.dot_contain);
initDatas();
initDot();
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
mRecyclerView.setLayoutManager(linearLayoutManager);
mAdapter = new GalleryAdapter(this, mDatas);
mAdapter.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(View view, int position) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, position + "",
Toast.LENGTH_SHORT).show();
}

});
mRecyclerView.setAdapter(mAdapter);
/*
* 当前记录View的变化，用来判断小圆点的显示
*/
mRecyclerView
.setOnItemScrollChangeListener(new OnItemScrollChangeListener() {

@Override
public void onChange(View view, int position) {
// TODO Auto-generated method stub
for (int i = 0; i < dotViews.size(); i++) {
if (position == i) {
dotViews.get(i).setBackgroundResource(
R.drawable.point_read);
} else {
dotViews.get(i).setBackgroundResource(
R.drawable.point_normal);
}
}
}

});
}

private void initDatas() {
mDatas = new ArrayList<Integer>(Arrays.asList(R.drawable.a1,
R.drawable.a2, R.drawable.a3, R.drawable.a4, R.drawable.a5));
}

private void initDot() {
for (int i = 0; i < mDatas.size(); i++) {
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(0, 0, 10, 0);
ImageView dotView = new ImageView(this);
if (i == 0) {
// 默认选中第一张图片
dotView.setBackgroundResource(R.drawable.point_read);
} else {
// 其他图片都设置未选中状态
dotView.setBackgroundResource(R.drawable.point_normal);
}
dotView.setLayoutParams(layoutParams);
dotView.setScaleType(ScaleType.FIT_XY);
dotViews.add(dotView);
dotContain.addView(dotView);
}
}
}

通过回调传值，获取到当前View的下标position，然后根据它来显示小圆点。

因为发现怎么搜都搜不到类似的源码，所以自己写了一下发上来，希望以后如果需要这种功能的人能做一下参考。（呵呵，估计这种功能很少人需要吧）有更好的建议或意见都留留言哈，共同进步啊！
有疑问或者更好地实现方式的话 请加QQ群：135451435。共同进步！