Android 仿土巴兔选择效果

1，前两天在群里看到有人在讨论土巴兔的选择装修风格的效果，自己也想实现，果断百度一下，有些好的文章，就花了些时间来分析了下，先看看别人土巴兔原装的功能



2，可以看到，基本上可以使用一个vviewpager来实现，主要技术点一下

　　①android:clipChildren设置为false，意味着不限制子View在其范围内，也就是说子view可以超出父view的范围

　　②通过PageTransformer来实现缩放动画

　　③拦截点击事件的位置来实现点击切换viewpager

来看一下代码，首先看一下布局文件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:id="@+id/page_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:clipChildren="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_main">

<com.wangjitao.tubatudemo.view.ClipViewPager
android:id="@+id/viewPager"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:clipChildren="false"
android:overScrollMode="never" />

</RelativeLayout>

　其中ClipViewPager是一个自定义的viewpager，主要实现了两个功能，一，判断用户点击事件在不在Viewpager中，二，若在，则设置当前页为其

ClipViewPager.java

package com.wangjitao.tubatudemo.view;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
* Created by wangjitao on 2016/4/15.
*/
public class ClipViewPager extends ViewPager{
public ClipViewPager(Context context) {
super(context);
}

public ClipViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}

/**
* 重写点击事件，当用户抬起的时候 判断用户点击的区域是否在viewPager的区域中
* 如果是，在判断是在哪个子view上，然后设置当前页为该view
* @param ev
* @return
*/
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_UP){
View view = viewOfClickOnScreen(ev);
if (view != null){
setCurrentItem(indexOfChild(view));
}
}
return super.dispatchTouchEvent(ev);
}

private View viewOfClickOnScreen(MotionEvent ev) {
int childCount = getChildCount();
int[] location = new int[2];
for (int i = 0; i < childCount; i++) {
View v = getChildAt(i);
v.getLocationOnScreen(location);
int minX = location[0];
int minY = getTop();

int maxX = location[0] + v.getWidth();
int maxY = getBottom();

float x = ev.getX();
float y = ev.getY();

if ((x > minX && x < maxX) && (y > minY && y < maxY)) {
return v;
}
}
return null;
}
}

三，编写自定义的PageTransformer ，来实现当前页切换下一页的控件的缩放问题

ScalePageTransformer.java

package com.wangjitao.tubatudemo.view;

import android.os.Build;
import android.support.v4.view.ViewPager;
import android.view.View;

/**
* Created by wangjitao on 2016/4/15.
*/
public class ScalePageTransformer implements ViewPager.PageTransformer {

public static final float MAX_SCALE = 1.2f ;
public static final float MIN_SCALE = 0.6f ;

/**
* 当处于最中间的view往左边滑动时，它的position值是小于0的，并且是越来越小,它右边的view的position是从1逐渐减小到0的。
* @param page
* @param position
*/
@Override
public void transformPage(View page, float position) {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
page.getParent().requestLayout();
}
if (position < -1) {
position = -1;
} else if (position > 1) {
position = 1;
}

float tempScale = position < 0 ? 1 + position : 1 - position;

float slope = (MAX_SCALE - MIN_SCALE) / 1;
float scaleValue = MIN_SCALE + tempScale * slope;
page.setScaleX(scaleValue);
page.setScaleY(scaleValue);
}
}

　基本上就可以实现了，再贴一下是MainActivity.java和ViewPager的Adapter

　MainActivity.java

package com.wangjitao.tubatudemo;

import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MotionEvent;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;

import com.wangjitao.tubatudemo.adapter.ClipPagerAdapter;
import com.wangjitao.tubatudemo.view.ClipViewPager;
import com.wangjitao.tubatudemo.view.ScalePageTransformer;

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

public class MainActivity extends AppCompatActivity {
private Context mContext = MainActivity.this ;
private ClipViewPager mViewPager ;
private ClipPagerAdapter mClipViewPager ;
private List<Integer> mData ;
private RelativeLayout mRelativeLayout ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Hi Girl", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

initView();
initData();
}

private void initView() {
mViewPager = (ClipViewPager) findViewById(R.id.viewPager) ;

mViewPager.setPageTransformer(true, new ScalePageTransformer());
mRelativeLayout = (RelativeLayout) findViewById(R.id.page_container);

//需要将整个页面的事件分发给ViewPager，不然的话只有ViewPager中间的view能滑动，其他的都不能滑动，这是肯定的，
//因为ViewPager总体布局就是中间那一块大小，其他的子布局都跑到ViewPager外面来了
mRelativeLayout.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return mViewPager.dispatchTouchEvent(event);
}
});

mData = new ArrayList<>();
mClipViewPager = new ClipPagerAdapter(mData,mContext);
mViewPager.setAdapter(mClipViewPager);
}

private void initData() {
mData.add(R.mipmap.style_xiandai);
mData.add(R.mipmap.style_jianyue);
mData.add(R.mipmap.style_oushi);
mData.add(R.mipmap.style_zhongshi);
mData.add(R.mipmap.style_meishi);
mData.add(R.mipmap.style_dzh);
mData.add(R.mipmap.style_dny);
mData.add(R.mipmap.style_rishi);

mViewPager.setOffscreenPageLimit(mData.size());
mClipViewPager.notifyDataSetChanged();
}

}

　　ViewPager的适配器 ClipPagerAdapter.java

package com.wangjitao.tubatudemo.adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

/**
* Created by jh on 2016/4/15.
*/
public class ClipPagerAdapter extends RecyclingPagerAdapter {
private List<Integer> mData ;
private Context mContext ;

public ClipPagerAdapter(List<Integer> mData ,Context mContext ) {
this.mData = mData ;
this.mContext = mContext ;
}
@Override
public View getView(int position, View convertView, ViewGroup container) {
ImageView imageView = null ;
if (convertView == null){
imageView = new ImageView(mContext);
}else {
imageView = (ImageView) convertView ;
}
imageView.setTag(position);
imageView.setImageResource(mData.get(position));
return imageView;
}

@Override
public int getCount() {
return mData.size();
}
}

　　ok ,基本上就完成了 ，看一看效果