每次在地鐵上把玩別的應(yīng)用時(shí)，看著別人家的輪播圖總是那么高大上贩耐，滑動(dòng)起來(lái)總是那么銜接完美弧腥，就像別人家的亞索和盲僧總是那么6。我不服潮太，solo管搪，于是當(dāng)即也手動(dòng)寫(xiě)一個(gè)虾攻。
Talk is cheap,show you the code
Talk is cheap,show you the effect：
giphy.gif
功能簡(jiǎn)介：
自定義的一個(gè)BannerView輪播器類(lèi)，實(shí)現(xiàn)可滑動(dòng)指示點(diǎn)更鲁，可調(diào)節(jié)滑動(dòng)速度霎箍；
實(shí)現(xiàn)步驟：
1.BannerView引入布局：viewpager顯示輪播，linearlayout用于添加一排白色（未選中狀態(tài)）小圓點(diǎn)澡为，view用于顯示紅色移動(dòng)小圓點(diǎn)漂坏。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="160dp"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="14dp"
android:layout_alignBottom="@id/viewpager">
<LinearLayout
android:id="@+id/dot_linear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"/>
<View
android:id="@+id/movedot"
android:layout_width="6dp"
android:layout_height="6dp"
android:background="@drawable/dot_focus"/>
</RelativeLayout>
</RelativeLayout>
2.viewpager的pageradapter類(lèi)，每一項(xiàng)為imageview,實(shí)現(xiàn)多張切換媒至。
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class BannerViewpagerAdapter extends PagerAdapter {
private Context context;
private int[] pics;
public BannerViewpagerAdapter(Context context, int[] pics) {
this.context = context;
this.pics = pics;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
/**
* 相當(dāng)于baseadapter的getview
* @param container
* @param position
* @return
*/
@Override
public Object instantiateItem(final ViewGroup container, final int position) {
ImageView imageView = new ImageView(context);
container.addView(imageView);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setImageResource(pics[position%pics.length]);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
Bannerview類(lèi)中：
3.初始化顶别，包括初始化自動(dòng)輪播時(shí)間，圓點(diǎn)直徑塘慕，原點(diǎn)間隙筋夏，圓點(diǎn)之間圓心間距（算偏移量）。params1第一個(gè)點(diǎn)無(wú)左間距图呢，params2其余點(diǎn)有左間距。
private Context context;
private ViewPager viewPager;
public PagerAdapter pagerAdapter;
/** 自動(dòng)輪播時(shí)間間隔 */
private final int DELAY_TIME = 4000;
/** 頁(yè)面滾動(dòng)時(shí)間 */
private final int SCROLL_TIME = 400;
public LinearLayout linearLayout;
private View bannerView;
private int[] pics;
private final int SCROLL_WHAT = 0;
private LinearLayout.LayoutParams params1,params2;
private View moveDot;
/** 相鄰點(diǎn)圓心距離 */
private int dotDistance;
/** 圓點(diǎn)直徑 */
private int dotDiameter;
/** 圓之間間隔空隙 */
private int dotSpace;
public BannerView(Context context,int[] pics,PagerAdapter pagerAdapter,int layout){
this.context = context;
this.pics = pics;
this.pagerAdapter = pagerAdapter;
bannerView = LayoutInflater.from(context).inflate(layout,null);
initView();
event();
}
private void initView() {
linearLayout = bannerView.findViewById(R.id.dot_linear);
viewPager = bannerView.findViewById(R.id.viewpager);
moveDot = bannerView.findViewById(R.id.movedot);
//設(shè)置默認(rèn)viewpager當(dāng)前項(xiàng)
viewPager.setCurrentItem(pics.length*Integer.MAX_VALUE/2);
viewPager.setAdapter(pagerAdapter);
pagerAdapter.notifyDataSetChanged();
handler.sendEmptyMessageDelayed(SCROLL_WHAT, DELAY_TIME);
dotSpace = dp2px(7);
dotDiameter = dp2px(6);
dotDistance = dotDiameter + dotSpace;
params1 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
params1.leftMargin = 0;
params2 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
params2.leftMargin = dotSpace;
setViewPagerDuration();
initDot();
}
4.創(chuàng)建白色小圓點(diǎn)骗随，并添加到linearlayout中蛤织，第一個(gè)無(wú)左邊界，其余加入左邊界鸿染。
/**
* 創(chuàng)建小圓點(diǎn)
*/
private void initDot(){
View dot;
for(int i=0;i<pics.length;i++){
dot = new View(context);
if(i == 0){
dot.setLayoutParams(params1);
dot.setBackgroundResource(R.drawable.dot_unfocus);
}else{
dot.setLayoutParams(params2);
dot.setBackgroundResource(R.drawable.dot_unfocus);
}
linearLayout.addView(dot);
}
}
5.實(shí)現(xiàn)移動(dòng)小紅點(diǎn)指示點(diǎn)：
pageChangeListener的onPageScrolled回調(diào)方法中指蚜，回調(diào)了positionOffset值，即滑動(dòng)當(dāng)前一頁(yè)的偏移百分比涨椒，范圍[0-1]摊鸡。可以根據(jù)實(shí)時(shí)設(shè)置小紅點(diǎn)params.leftMargin達(dá)到移動(dòng)效果蚕冬。那么當(dāng)前左邊距是多少呢免猾。比如滑動(dòng)到第二和第三頁(yè)之間，那么左邊距就是第一個(gè)點(diǎn)和第二個(gè)點(diǎn)的間隔dotDistance加上第二和第三點(diǎn)之間偏移乘以dotDistance囤热。
滑動(dòng)過(guò)程演示
private void event(){
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) moveDot.getLayoutParams();
//取余猎提，不然會(huì)一直往右移動(dòng)
int dotPos = position % pics.length;
//dotDistance圓心間距
params.leftMargin = (int) (dotDistance * dotPos + dotDistance * positionOffset);
moveDot.setLayoutParams(params);
}
@Override
public void onPageSelected(int i) {
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
6.實(shí)現(xiàn)自設(shè)置滾動(dòng)速度：
要設(shè)置滾動(dòng)，滾動(dòng)事件來(lái)自于viewPager.setCurrentItem()旁蔼，那么順藤摸瓜锨苏，點(diǎn)進(jìn)setCurrentItem往上找：
/**
* Set the currently selected page. If the ViewPager has already been through its first
* layout with its current adapter there will be a smooth animated transition between
* the current item and the specified item.
*
* @param item Item index to select
*/
public void setCurrentItem(int item) {
mPopulatePending = false;
setCurrentItemInternal(item, !mFirstLayout, false);
}
實(shí)現(xiàn)來(lái)自setCurrentItemInternal()，點(diǎn)進(jìn)去繼續(xù)棺聊，來(lái)到了ViewPager類(lèi)中伞租。從setCurrentItemInternal() -> scrollToItem() -> smoothScrollTo()，里面最終是由mScroller.startScroll(sx, sy, dx, dy, duration)實(shí)現(xiàn)了滾動(dòng)限佩。所以我們要改變duration這個(gè)值葵诈，一不做二不休，采用偷梁換柱，自己Scroller類(lèi)驯击，覆寫(xiě)startScroll()方法烁兰，傳入自己的duration。mScroller是Viewpager的一個(gè)成員變量徊都，那就用反射替用自己scroller換掉原有的mScroller沪斟。
void setCurrentItemInternal(int item, boolean smoothScroll, boolean always) {
setCurrentItemInternal(item, smoothScroll, always, 0);
}
void setCurrentItemInternal(int item, boolean smoothScroll, boolean always, int velocity) {
if (mAdapter == null || mAdapter.getCount() <= 0) {
setScrollingCacheEnabled(false);
return;
}
if (!always && mCurItem == item && mItems.size() != 0) {
setScrollingCacheEnabled(false);
return;
}
if (item < 0) {
item = 0;
} else if (item >= mAdapter.getCount()) {
item = mAdapter.getCount() - 1;
}
final int pageLimit = mOffscreenPageLimit;
if (item > (mCurItem + pageLimit) || item < (mCurItem - pageLimit)) {
// We are doing a jump by more than one page. To avoid
// glitches, we want to keep all current pages in the view
// until the scroll ends.
for (int i = 0; i < mItems.size(); i++) {
mItems.get(i).scrolling = true;
}
}
final boolean dispatchSelected = mCurItem != item;
if (mFirstLayout) {
// We don't have any idea how big we are yet and shouldn't have any pages either.
// Just set things up and let the pending layout handle things.
mCurItem = item;
if (dispatchSelected) {
dispatchOnPageSelected(item);
}
requestLayout();
} else {
populate(item);
scrollToItem(item, smoothScroll, velocity, dispatchSelected);
}
}
private void scrollToItem(int item, boolean smoothScroll, int velocity,
boolean dispatchSelected) {
final ItemInfo curInfo = infoForPosition(item);
int destX = 0;
if (curInfo != null) {
final int width = getClientWidth();
destX = (int) (width * Math.max(mFirstOffset,
Math.min(curInfo.offset, mLastOffset)));
}
if (smoothScroll) {
smoothScrollTo(destX, 0, velocity);
if (dispatchSelected) {
dispatchOnPageSelected(item);
}
} else {
if (dispatchSelected) {
dispatchOnPageSelected(item);
}
completeScroll(false);
scrollTo(destX, 0);
pageScrolled(destX);
}
}
7.創(chuàng)建Scroller傳入duration覆寫(xiě)startScroll，通過(guò)反射取得mScroller屬性重設(shè)mScroller暇矫。
private void setViewPagerDuration(){
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
field.set(viewPager,getScroller(SCROLL_TIME));
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
private Scroller getScroller(final int smoothDuration){
Scroller scroller = new Scroller(context,new AccelerateInterpolator()){
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, smoothDuration);
}
};
return scroller;
}
好了主之，大功告成。完整Bannerview類(lèi)：
blic class BannerView {
private Context context;
private ViewPager viewPager;
public PagerAdapter pagerAdapter;
/** 自動(dòng)輪播時(shí)間間隔 */
private final int DELAY_TIME = 4000;
/** 頁(yè)面滾動(dòng)時(shí)間 */
private final int SCROLL_TIME = 400;
public LinearLayout linearLayout;
private View bannerView;
private int[] pics;
private final int SCROLL_WHAT = 0;
private LinearLayout.LayoutParams params1,params2;
private View moveDot;
/** 相鄰點(diǎn)圓心距離 */
private int dotDistance;
/** 圓點(diǎn)直徑 */
private int dotDiameter;
/** 圓之間間隔空隙 */
private int dotSpace;
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
handler.sendEmptyMessageDelayed(SCROLL_WHAT,DELAY_TIME);
}
};
public BannerView(Context context,int[] pics,PagerAdapter pagerAdapter,int layout){
this.context = context;
this.pics = pics;
this.pagerAdapter = pagerAdapter;
bannerView = LayoutInflater.from(context).inflate(layout,null);
initView();
event();
}
private void initView() {
linearLayout = bannerView.findViewById(R.id.dot_linear);
viewPager = bannerView.findViewById(R.id.viewpager);
moveDot = bannerView.findViewById(R.id.movedot);
//設(shè)置默認(rèn)viewpager當(dāng)前項(xiàng)
viewPager.setCurrentItem(pics.length*Integer.MAX_VALUE/2);
viewPager.setAdapter(pagerAdapter);
pagerAdapter.notifyDataSetChanged();
handler.sendEmptyMessageDelayed(SCROLL_WHAT, DELAY_TIME);
dotSpace = dp2px(7);
dotDiameter = dp2px(6);
dotDistance = dotDiameter + dotSpace;
params1 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
params1.leftMargin = 0;
params2 = new LinearLayout.LayoutParams(dotDiameter,dotDiameter);
params2.leftMargin = dotSpace;
setViewPagerDuration();
initDot();
}
private void event(){
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) moveDot.getLayoutParams();
//取余李根，不然會(huì)一直往右移動(dòng)
int dotPos = position % pics.length;
params.leftMargin = (int) (dotDistance * dotPos + dotDistance * positionOffset);
moveDot.setLayoutParams(params);
}
@Override
public void onPageSelected(int i) {
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
/**
* 創(chuàng)建小圓點(diǎn)
*/
private void initDot(){
View dot;
for(int i=0;i<pics.length;i++){
dot = new View(context);
if(i == 0){
dot.setLayoutParams(params1);
dot.setBackgroundResource(R.drawable.dot_unfocus);
}else{
dot.setLayoutParams(params2);
dot.setBackgroundResource(R.drawable.dot_unfocus);
}
linearLayout.addView(dot);
}
}
private void setViewPagerDuration(){
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
field.set(viewPager,getScroller(SCROLL_TIME));
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
private Scroller getScroller(final int smoothDuration){
Scroller scroller = new Scroller(context,new AccelerateInterpolator()){
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, smoothDuration);
}
};
return scroller;
}
public View getBannerView(){
return bannerView;
}
private int dp2px(int dp){
return (int) (context.getResources().getDisplayMetrics().density*dp + 0.5);
}
}
MainActivity類(lèi)：
public class MainActivity extends AppCompatActivity {
private BannerView bannerView;
private BannerViewpagerAdapter pagerAdapter;
private RelativeLayout rlBanner;
private int[] pics = new int[]{R.mipmap.banner1,R.mipmap.banner2,R.mipmap.banner3,R.mipmap.banner4};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
rlBanner = (RelativeLayout) findViewById(R.id.rl_banner);
pagerAdapter = new BannerViewpagerAdapter(getApplicationContext(),pics);
bannerView = new BannerView(getApplicationContext(),pics,pagerAdapter,R.layout.customviewpager);
//將bannerview添加到需引入控件即可
rlBanner.addView(bannerView.getBannerView());
}
}
重要的是想到找到滑動(dòng)偏移和設(shè)置時(shí)間的辦法槽奕，在實(shí)際做項(xiàng)目中，辦法總比困難多房轿。1000個(gè)讀者就有1000個(gè)林黛玉粤攒，那么1000個(gè)程序猿就有1000個(gè)方法。
