ViewPager實現翻頁效果&導航點

代碼下載:https://jww.lanzous.com/i37TMos71uf or: https://download.csdn.net/download/xia_yanbing/18370851

0. 效果演示

1. 基礎實現

三步走：

0.新建ViewPager 1.創建適配器 2.設置數據適配器

1.1 新建ViewPager視圖

1.2 創建適配器

private class myAdapter extends PagerAdapter {// 這四個方法需要被重寫@Overridepublic int getCount() {return wxs.length;}@Overridepublic boolean isViewFromObject(@NonNull View view, @NonNull Object object) {return view == object;}@NonNull@Overridepublic Object instantiateItem(@NonNull ViewGroup container, int position) {// 1. 將數據添加到布局文件中container.addView(list.get(position));// 2. 數據返回return list.get(position);}@Overridepublic void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {// 移除劃過的的視圖container.removeView(list.get(position));} }

1.3 綁定數據到適配器

ViewPager vp = (ViewPager) findViewById(R.id.vp); vp.setAdapter(new myAdapter());

備注：ViewPager中存放視圖。

List<ImageView> list = new ArrayList<>();for (int wx : wxs) {ImageView imageView = new ImageView(mContext);// setBackgroundResource 會自動填充滿父容器imageView.setBackgroundResource(wx);// imageView.setImageResource(wx);// setImageResource不會// 添加到視圖中list.add(imageView); }

對，使用ViewPager就這么簡單，這樣圖1的翻頁效果就實現了。

2. 代碼優化（添加導航點）

上面的代碼是實現了手勢換頁，但是導航點還有沒有實現。

步驟：

創建xml文件（導航點）

加載導航點

設置addOnPageChangeListener監聽器

2.1 創建導航點

首先，我們要在drawable文件中創建導航點，就是手動畫一個。

drawble 右擊新建 — > new Reasouse xml

page_off.xml創建過程，與之類似。

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="#ddd" /><sizeandroid:width="10dp"android:height="10dp" /> </shape>

2.2 加載導航點

首先在布局文件中，添加一個線性布局，用于存放導航點

然后在MainActivity中運行這段代碼。

mContext = MainActivity.this; layout = (LinearLayout) findViewById(R.id.layout);// 加載導航點 for (int i = 0; i < wxs.length; i++) {ImageView imageView = new ImageView(mContext);imageView.setImageResource(R.drawable.page_off);// layout指的是線性布局文件layout.addView(imageView); }

2.3 設置addOnPageChangeListener監聽器

// 需要重寫頁面切換事件（添加下標點） vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {// 當頁面滾動了觸發for (int i = 0; i < wxs.length; i++) {ImageView imageView = (ImageView) layout.getChildAt(i);if (i == position) {// 點亮imageView.setImageResource(R.drawable.page_on);} else {imageView.setImageResource(R.drawable.page_off);}}}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {} });

2.4 運行效果

3. 添加自動換頁機制

通過添加handler來進行自動換頁。

Handler handler = new Handler(){@Overridepublic void handleMessage(@NonNull Message msg) {// 添加處理消息通知的代碼if (msg.what == 1){// 如何到了最后一頁，就跳轉回第一頁if (vp.getCurrentItem() == wxs.length-1){vp.setCurrentItem(0);}else{// 跳轉到下一頁內容vp.setCurrentItem(vp.getCurrentItem()+1);}}handler.sendEmptyMessageDelayed(1,2000);} };

之后，只要再onCreate的時候，調用一次就可以了。

handler.sendEmptyMessageDelayed(1,2000);

運行效果：

整個過程中，我手沒有進行任何操作，全部是它自動完成的換頁。

但是，這個體驗并不好，我們應該當手動滑動的時候，停止自動滑動。

需要在addOnPageChangeListener 里面的onPageScrollStateChanged添加以下代碼：

@Override public void onPageScrollStateChanged(int state) {// 配置當手動滑動的時候，停止自動滑動if (state == ViewPager.SCROLL_STATE_DRAGGING){handler.removeCallbacksAndMessages(null);}// 當空閑時，會再次開始自動滑動if (state == ViewPager.SCROLL_STATE_IDLE){// 清空消息隊列handler.removeCallbacksAndMessages(null);handler.sendEmptyMessageDelayed(1,2000);} }

此時，當我們進行手動滑動的時候，自動滑動就會停止。

補充：設置導航點的左右間隙，可以通過下面的代碼來實現。

// 加載導航點 for (int i = 0; i < wxs.length; i++) {ImageView imageView = new ImageView(mContext);imageView.setImageResource(R.drawable.page_off);// 必須通過 LinearLayout.LayoutParamsLinearLayout.LayoutParams lp = newLinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);//設置小圓點的間距lp.setMargins(4, 0, 4, 0);layout.addView(imageView, lp); }

總結

以上是生活随笔為你收集整理的ViewPager实现翻页效果导航点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。