之前公司的一个项目需要一个中间图片放大的效果,当时因为项目工期要求比较紧,所以用了gallery实现该功能,可是gallery过渡不够自然,没有viewpager平滑。
现在终于有空儿了,又看了一下网上的相关知识,终于做出了一个完美的中间放大效果,并进行了优化。
实现该功能需要注意两点:
1.需要设置viewpager中的android:clipChildren="false"
2.实现viewpager中view的缩小放大效果
本例采用自定义view方式实现:
public class CoverFlowViewPager extends RelativeLayout implements OnPageSelectListener{
private CoverFlowAdapter mAdapter;
/** * 用于左右滚动 */
private ViewPager mViewPager;
private List<View> mViewList=new ArrayList<>();
private Context mContext;
private OnPageSelectListener listener;
public CoverFlowViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
inflate(context, R.layout.widget_cover_flow, this);
mViewPager = (ViewPager) findViewById(R.id.vp_conver_flow);
init();
}
private void init() {
// 构造适配器,传入数据源
mAdapter = new CoverFlowAdapter(mViewList,getContext());
// 设置选中的回调
mAdapter.setOnPageSelectListener(this);
// 设置适配器
mViewPager.setAdapter(mAdapter);
// 设置滑动的监听,因为adpter实现了滑动回调的接口,所以这里直接设置adpter
mViewPager.addOnPageChangeListener(mAdapter);
// 自己百度 mViewPager.setOffscreenPageLimit(5);
// 设置触摸事件的分发
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// 传递给ViewPager 进行滑动处理
return mViewPager.dispatchTouchEvent(event);
}
});}
public void setViewList(List<View> lists){
if(lists==null){ return;
}
mViewList.clear();
for(View view:lists){
FrameLayout layout = new FrameLayout(getContext());
// 设置padding 值,默认缩小 layout.setPadding(CoverFlowAdapter.sWidthPadding,CoverFlowAdapter.sHeightPadding,CoverFlowAdapter.sWidthPadding,CoverFlowAdapter.sHeightPadding);
layout.addView(view);
mViewList.add(layout);
}
// 刷新数据
mAdapter.notifyDataSetChanged();
}
@Override
public void select(int position) {
if(listener!=null){
listener.select(position);
}
}
public void setOnPageSelectListener(OnPageSelectListener listener) {
this.listener = listener;
}
暴露一个选择位置的接口
public interface OnPageSelectListener {
void select(int position);
}
效果如图:
device-2016-11-06-161655.png