簡(jiǎn)述:
目前公司項(xiàng)目開(kāi)發(fā)過(guò)程中,我負(fù)責(zé)的模塊有涉及到一些頁(yè)面UI需要用到類似Banner圖輪播的效果的烁,結(jié)合之前在公眾號(hào)平臺(tái)看過(guò)有類似實(shí)現(xiàn)的方式褐耳,然后在結(jié)合自身項(xiàng)目的需求,做了一些修改渴庆,使用到公司項(xiàng)目中來(lái)铃芦,本文只是做一些總結(jié),積累襟雷。
效果圖:
本文是利用ViewPager做類似風(fēng)格的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>
說(shuō)明:
設(shè)置了ViewPager外層控件以及ViewPager都設(shè)置了Android:clipChildren=”false”。ViewPager的寬度是match_parent嗤军,左右設(shè)置了60dp的邊距注盈,就是為了顯示出左右部分的Page.
接下來(lái)可以對(duì)ViewPager設(shè)置Adapter等相關(guān)屬性
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);
//設(shè)置Page間間距
mViewPager.setPageMargin(65);
//設(shè)置Page緩存頁(yè)數(shù)值
mViewPager.setOffscreenPageLimit(6);
//給ViewPager加特效(決定動(dòng)畫(huà)效果)
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;
}
});
}
}
注意 :
//設(shè)置Page間間距
ViewPager.setPageMargin(65);
//設(shè)置Page緩存頁(yè)數(shù)值
mViewPager.setOffscreenPageLimit(6);
//給ViewPager加特效(決定動(dòng)畫(huà)效果)
mViewPager.setPageTransformer(true, (new AlphaPageTransformer(new ScaleInTransformer())));