要做类似这样的效果:(京东---京东超市---休闲零食)
做出来是这样的:
接下来直接上代码
页面布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:orientation="vertical"
tools:context=".MainActivity">
<!--android:clipChildren="false"-->
<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:clipToPadding="false"
android:paddingRight="24dp">
<!--android:layout_marginRight="24dp"-->
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="7">
</RelativeLayout>
</LinearLayout>
这里注意
clipToPadding这个属性 用法和原因请自行百度
clipChildren属性也请自行百度 这里两个属性用一个就行了
然后Activity
package com.huaxia.mytestviewpager;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.huaxia.mytestviewpager.adapter.MyViewPagerAdapter;
import com.huaxia.mytestviewpager.widget.MyPagerTransformer;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ViewPager main_viewpager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
main_viewpager = (ViewPager) findViewById(R.id.main_viewpager);
ArrayList<Integer> imageViews = new ArrayList<>();
imageViews.add(Color.parseColor("#FF0000"));
imageViews.add(Color.parseColor("#00FF00"));
imageViews.add(Color.parseColor("#0000FF"));
imageViews.add(Color.parseColor("#FFFF00"));
imageViews.add(Color.parseColor("#00FFFF"));
imageViews.add(Color.parseColor("#FF00FF"));
initViewPager(imageViews);
}
private void initViewPager(ArrayList<Integer> imageViews) {
main_viewpager.setOffscreenPageLimit(5);
main_viewpager.setPageTransformer(false, new MyPagerTransformer());
MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(this);
main_viewpager.setAdapter(myViewPagerAdapter);
myViewPagerAdapter.setList(imageViews);
}
}
然后继承的ViewPagerAdapter
package com.huaxia.mytestviewpager.adapter;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.ArrayList;
/**
* @Author:JiaoHaoKang
* @E-mail:hkwaner@163.com
* @Date:2019/6/18
* @Description:
*/
public class MyViewPagerAdapter extends PagerAdapter {
private Context context;
private ArrayList<Integer> list = new ArrayList<>();
public MyViewPagerAdapter(Context context) {
this.context = context;
}
public void setList(ArrayList<Integer> list) {
this.list = list;
notifyDataSetChanged();
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
return view == o;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setBackgroundColor(list.get(position % list.size()));
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
}
然后继承的PageTransformer
package com.huaxia.mytestviewpager.widget;
import android.os.Build;
import android.support.annotation.NonNull;
import android.support.annotation.RequiresApi;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
/**
* @Author:JiaoHaoKang
* @E-mail:hkwaner@163.com
* @Date:2019/6/18
* @Description:
*/
public class MyPagerTransformer implements ViewPager.PageTransformer {
/*private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) {
view.setAlpha(0);
} else if (position <= 1) {
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageHeight * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else {
view.setAlpha(0);
}
}
*/
/*
private static final float ROT_MAX=20.0f;
private float mRot;
@Override
public void transformPage(View view, float position) {
if (position<-1){
view.setRotation(0);
}else if (position<=1){
// if (position<0){
// mRot=(ROT_MAX*position);
// view.setPivotX();
// view.setPivotX(view.getMeasuredWidth()*0.5f);
// view.setPivotY(view.getMeasuredHeight());
// view.setRotation(mRot);
// }else {
mRot=(ROT_MAX*position);
view.setPivotX(view.getMeasuredWidth()*0.5f);
view.setPivotY(view.getMeasuredHeight());
view.setRotation(mRot);
// }
}else{
view.setRotation(0);
}
}
*/
/* private static final float MIN_SCALE=0.75f;
@Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position<-1){
view.setAlpha(0);
}else if(position<=0){
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
}else if (position<=1){
view.setAlpha(1-position);
view.setTranslationX(pageWidth*-position);
float scaleFactor=MIN_SCALE+(1-MIN_SCALE)*(1-Math.abs(position));
view.setScaleY(scaleFactor);
view.setScaleY(scaleFactor);
}else{
view.setAlpha(0);
}
}
*/
private float interval = 24;//间距
/**
* @param view
* @param v ? 玄学算数动不得
*/
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public void transformPage(@NonNull View view, float v) {
int width = view.getWidth();
if (v <= -1) {
// 第负一張
//具体实现,此时page在界面的左边并且已经不显示在当前界面
view.setTranslationX(-width + -width);
view.setTranslationZ(0);
} else if (v <= 0) {
//具体实现,此时page正从中间往左侧移动 第一張
view.setTranslationX(0); //水平位移
view.setTranslationZ(4 + v); //浮动
view.setScaleY((float) -((float) 1 - -0.1 * (v))); //垂直缩放
view.setScaleX(1);
} else if (v <= 1) {
//具体实现,此时page正从右侧往中间移动 第二張
//Math.negateExact
view.setTranslationX(-width * (v - 1) - width + interval + ((v - 1) * interval));
view.setTranslationZ(2 + v);
view.setScaleY((float) ((float) 0.9 - -0.1 * (1 - v)));
float scaleX = view.getScaleX();
//view.setScaleX((float) ((float) 1 - -0.1 * (1 - v))); //和布局上 android:clipToPadding="false"冲突???
} else if (v <= 2) {
// 第三張
view.setTranslationX((-width) * (v - 2) - width + -width + interval + interval + ((v - 2) * interval));
view.setTranslationZ(0 + v);
view.setScaleY((float) ((float) 0.8 - -0.1 * (2 - v)));
} else if (v <= 3) {
// 第四张
view.setTranslationX((-width) * (v - 3) - width + -width + -width + interval + interval + interval + ((v - 3) * interval));
view.setTranslationZ((-3 + v));
view.setScaleY((float) ((float) 0.7 - -0.1 * (3 - v)));
} else {
//具体实现,此时page在界面的右边并且已经不显示在当前界面
view.setTranslationX(width);
view.setTranslationZ(0);
}
}
}
这个PageTransformer里面注释了还有从别的地方复制来的一些特效具体路径忘了所以不放链接了
最后可能是存在一个Bug 就是注释的:
view.setScaleX((float) ((float) 1 - -0.1 * (1 - v))); //和布局上 android:clipToPadding="false"冲突???
这行 这里用view.setScaleX的话回和clipToPadding和clipChildren这两个属性有冲突 指着两个属性失效 现在也不找原因了等闲的时候再找吧 , 如果有大佬知道原因 欢迎评论留言.
--2019年6月21日 11:40:32