简述:
目前公司项目开发过程中,我负责的模块有涉及到一些页面UI需要用到类似Banner图轮播的效果,结合之前在公众号平台看过有类似实现的方式,然后在结合自身项目的需求,做了一些修改,使用到公司项目中来,本文只是做一些总结,积累。
效果图:
效果图本文是利用ViewPager做类似风格的Banner图 。
引入:
compile
com.zhy:magic-viewpager:1.0.1``
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:fitsSystemWindows="true"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:clipChildren="false"
android:layout_centerInParent="true"
android:background="#aadc71ff"
>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:clipChildren="false"
android:layout_height="180dp"
android:layout_gravity="center"
>
</android.support.v4.view.ViewPager>
</FrameLayout>
</RelativeLayout>
说明:
设置了ViewPager外层控件以及ViewPager都设置了Android:clipChildren=”false”。ViewPager的宽度是match_parent,左右设置了60dp的边距,就是为了显示出左右部分的Page.
接下来可以对ViewPager设置Adapter等相关属性
public class MainActivity extends AppCompatActivity {
ViewPager mViewPager ;
private PagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView (){
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
//设置Page间间距
mViewPager.setPageMargin(65);
//设置Page缓存页数值
mViewPager.setOffscreenPageLimit(6);
//给ViewPager加特效(决定动画效果)
mViewPager.setPageTransformer(true, (new AlphaPageTransformer(new ScaleInTransformer())));
mViewPager.setAdapter(mAdapter = new PagerAdapter() {
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_monthly_bills_item, null);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
return 6;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
});
}
}
注意 :
//设置Page间间距
ViewPager.setPageMargin(65);
//设置Page缓存页数值
mViewPager.setOffscreenPageLimit(6);
//给ViewPager加特效(决定动画效果)
mViewPager.setPageTransformer(true, (new AlphaPageTransformer(new ScaleInTransformer())));
网友评论