banner图需求
- 中间图片要大
- 两边要显示一部分
- 无限滚动
首页代码 MainActivity
package com.m.live.myapplication;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager vp;
private List<Integer> images=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp = (ViewPager) findViewById(R.id.vp);
//下面的abc是自己随弄的几张图片,同志们可以自己传随便定义图片来源
images.add(R.drawable.a);
images.add(R.drawable.b);
images.add(R.drawable.c);
vp.setOffscreenPageLimit(3);
int pagerWidth = (int) (getResources().getDisplayMetrics().widthPixels * 3.0f / 5.0f);
ViewGroup.LayoutParams lp = vp.getLayoutParams();
if (lp == null) {
lp = new ViewGroup.LayoutParams(pagerWidth, ViewGroup.LayoutParams.MATCH_PARENT);
} else {
lp.width = pagerWidth;
}
vp.setLayoutParams(lp);
//setPageMargin表示设置图片之间的间距 activity_horizontal_margin 自己定义在dimen文件中即可
vp.setPageMargin(getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin));
vp.setPageTransformer(true,new MyGallyPageTransformer());
vp.setAdapter(new MyViewpagerAdapter(images,this));
vp.setCurrentItem(2000);
}
}
复制代码
viewpager的adapter MyViewpagerAdapter
package com.m.live.myapplication;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
public class MyViewpagerAdapter extends PagerAdapter {
private List<Integer> images;
private Context context;
public MyViewpagerAdapter(List<Integer> images, Context context) {
this.context=context;
this.images=images;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView vp_iv= new ImageView(context);
vp_iv.setImageResource(images.get(position%images.size()));
container.addView(vp_iv);
return vp_iv;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
复制代码
转换器 MyGallyPageTransformer
package com.m.live.myapplication;
import android.support.v4.view.ViewPager;
import android.view.View;
public class MyGallyPageTransformer implements ViewPager.PageTransformer {
private static final float min_scale = 0.85f;
@Override
public void transformPage(View page, float position) {
float scaleFactor = Math.max(min_scale, 1 - Math.abs(position));
if (position < -1) {
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else if (position < 0) {
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else if (position >= 0 && position < 1) {
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else if (position >= 1) {
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
}
}
}
复制代码
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:clipChildren="false"
android:layerType="software">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="300dp"
android:layout_height="220dp"
android:layout_gravity="center"
android:clipChildren="false"
>
</android.support.v4.view.ViewPager>
</LinearLayout>
复制代码
就是这么简单。
效果图
原文: blog.csdn.net/wywanwxn/ar…
注:
上面例子在实践过程中发现无法修复bug,是因为在MyGallyPageTransformer中缩放两边大小时,同时也对两边与中间之间的空间进行了加大,而且缩放值越小,则中间图片距离左右两边图片之间的空白越大。这样非常不利于自己设定view左右两边间距。对两边缩放大小也有局限性。
复制代码
新:
用RecyclerView实现无限轮播图,有普通版和3d版
这是后来发现的一个新的利用RecyclerView来实现的轮播效果,
靠谱的:
我最后决定使用的banner库!