2. 程式人生 > >安卓專案實戰之ViewPager+RecycleView實現首頁分頁的導航選單

安卓專案實戰之ViewPager+RecycleView實現首頁分頁的導航選單

阿新 • • 發佈：2019-01-07

效果圖

用過美團和餓了麼的app的童鞋應該清楚這一功能。首頁選單可以分頁切換，類似我們的banner廣告切換效果，只不過只能手動切換。所以整個分頁效果，我們可以採用Viewpager實現，裡面的選單項我們則可以採用RecyclerView實現，動態改變裡面的選單項，所以今天我們這個首頁分頁選單效果，可以決定採用ViewPager+RecyclerView實現，效果如下：
在這裡插入圖片描述
轉載自:https://github.com/xiaohaibin/MeiTuanCategary

開始實現

1.首頁佈局檔案，程式碼如下，其中IndicatorView是自己自定義的小圓點指示器控制元件，也可以使用ViewPagerIndicator庫來實現。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:id="@+id/home_entrance"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/main_home_entrance_vp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <com.stx.xhb.meituancategorydemo.widget.IndicatorView
        android:id="@+id/main_home_entrance_indicator"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:layout_marginLeft="16dp"
        android:layout_gravity="bottom"
        android:layout_marginRight="16dp"
        app:gravity="0"
        app:indicatorColor="#668b8989"
        app:indicatorColorSelected="#FF5722"
        app:indicatorWidth="6"/>

</LinearLayout>

2.由於我們分頁效果是以ViewPager實現的，所以我們要建立一個ViewPager的介面卡，CagegoryViewPagerAdapter.Class

public class CagegoryViewPagerAdapter extends PagerAdapter {

    private List<View> mViewList;
    public CagegoryViewPagerAdapter(List<View> mViewList) {
        this.mViewList = mViewList;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return (mViewList.get(position));
    }

    @Override
    public int getCount() {
        if (mViewList == null)
            return 0;
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
}

3.從上面的介面卡我們可以看到泛型為View，也就是每一個ViewPager頁面其實都是一個View例項，並且這個View的佈局也很簡單，僅僅包含一個RecycleView而已，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView 
    xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"/>

4.接下來就是RecyclerView的選單項的佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="6dp">

        <ImageView
            android:id="@+id/entrance_image"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:scaleType="fitCenter"/>

        <TextView
            android:id="@+id/entrance_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:singleLine="true"
            android:textColor="#80000000"
            android:textSize="12dp"/>
    </LinearLayout>

  // 此處View的作用是選單點選時的背景變化效果
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/selector_trans_divider"/>

</FrameLayout>

selector_trans_divider.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"><color android:color="#20000000" />
    </item>
    <item android:state_pressed="false"><color android:color="@android:color/transparent" />
    </item>

</selector>

5.由於我們的選單項有一個icon和名稱name，為了方便管理，我們可以建立一個選單項實體類ModelHomeEntrance.class

public class ModelHomeEntrance {
    private String name = "";
    private int image;

    public ModelHomeEntrance(String name, int image) {
        this.image = image;
        this.name = name;
    }


    public int getImage() {
        return image;
    }

    public String getName() {
        return name;
    }
}

6.建立一個RecyclerView的選單項列表介面卡，EntranceAdapter.Class

public class EntranceAdapter extends RecyclerView.Adapter<EntranceAdapter.EntranceViewHolder> {

    private List<ModelHomeEntrance> mDatas;

    /**
     * 頁數下標,從0開始(通俗講第幾頁)
     */
    private int mIndex;

    /**
     * 每頁顯示最大條目個數
     */
    private int mPageSize;

    private Context mContext;

    private final LayoutInflater mLayoutInflater;

    private List<ModelHomeEntrance> homeEntrances;

    public EntranceAdapter(Context context, List<ModelHomeEntrance> datas, int index, int pageSize) {
        this.mContext = context;
        this.homeEntrances = datas;
        mPageSize = pageSize;
        mDatas = datas;
        mIndex = index;
        mLayoutInflater = LayoutInflater.from(context);

    }

    @Override
    public EntranceViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new EntranceViewHolder(mLayoutInflater.inflate(R.layout.item_home_entrance, null));
    }

    @Override
    public void onBindViewHolder(EntranceViewHolder holder, final int position) {
        /**
         * 在給View繫結顯示的資料時，計算正確的position = position + mIndex * mPageSize，
         */
        final int pos = position + mIndex * mPageSize;
        holder.entranceNameTextView.setText(homeEntrances.get(pos).getName());
        holder.entranceIconImageView.setImageResource(homeEntrances.get(pos).getImage());
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ModelHomeEntrance entrance = homeEntrances.get(pos);
                // TODO: 2017/5/24 點選事件
            }
        });
    }

    @Override
    public int getItemCount() {
        return mDatas.size() > (mIndex + 1) * mPageSize ? mPageSize : (mDatas.size() - mIndex * mPageSize);
    }

    @Override
    public long getItemId(int position) {
        return position + mIndex * mPageSize;
    }

    class EntranceViewHolder extends RecyclerView.ViewHolder {

        private TextView entranceNameTextView;
        private ImageView entranceIconImageView;

        public EntranceViewHolder(View itemView) {
            super(itemView);
            entranceIconImageView = (ImageView) itemView.findViewById(R.id.entrance_image);
            entranceNameTextView = (TextView) itemView.findViewById(R.id.entrance_name);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 4.0f));
            itemView.setLayoutParams(layoutParams);
        }
    }
}

7.最後就是我們的MainActivity的程式碼實現了，我們整體的思路其實就是需要根據首頁選單項的資料來源進行分頁顯示，首頁確定單頁選單顯示數量，總數除以單頁顯示數量取整就是顯示頁數，我們再根據頁數來建立RecyclerView將其新增到ViewPager的介面卡中，下面就讓我們一起來看看具體是如何的。

public class MainActivity extends AppCompatActivity {
    public static final int HOME_ENTRANCE_PAGE_SIZE = 10;//首頁選單單頁顯示數量
    private ViewPager entranceViewPager;
    private LinearLayout homeEntranceLayout;
    private List<ModelHomeEntrance> homeEntrances;
    private IndicatorView entranceIndicatorView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
        init();
    }


    private void initView() {
        homeEntranceLayout = (LinearLayout) findViewById(R.id.home_entrance);
        entranceViewPager = (ViewPager) findViewById(R.id.main_home_entrance_vp);
        entranceIndicatorView = (IndicatorView) findViewById(R.id.main_home_entrance_indicator);
    }


    private void initData() {
        homeEntrances = new ArrayList<>();
        homeEntrances.add(new ModelHomeEntrance("美食", R.mipmap.ic_category_0));
        homeEntrances.add(new ModelHomeEntrance("電影", R.mipmap.ic_category_1));
        homeEntrances.add(new ModelHomeEntrance("酒店住宿", R.mipmap.ic_category_2));
        homeEntrances.add(new ModelHomeEntrance("生活服務", R.mipmap.ic_category_3));
        homeEntrances.add(new ModelHomeEntrance("KTV", R.mipmap.ic_category_4));
        homeEntrances.add(new ModelHomeEntrance("旅遊", R.mipmap.ic_category_5));
        homeEntrances.add(new ModelHomeEntrance("學習培訓", R.mipmap.ic_category_6));
        homeEntrances.add(new ModelHomeEntrance("汽車服務", R.mipmap.ic_category_7));
        homeEntrances.add(new ModelHomeEntrance("攝影寫真", R.mipmap.ic_category_8));
        homeEntrances.add(new ModelHomeEntrance("休閒娛樂", R.mipmap.ic_category_10));
        homeEntrances.add(new ModelHomeEntrance("麗人", R.mipmap.ic_category_11));
        homeEntrances.add(new ModelHomeEntrance("運動健身", R.mipmap.ic_category_12));
        homeEntrances.add(new ModelHomeEntrance("大保健", R.mipmap.ic_category_13));
        homeEntrances.add(new ModelHomeEntrance("團購", R.mipmap.ic_category_14));
        homeEntrances.add(new ModelHomeEntrance("景點", R.mipmap.ic_category_16));
        homeEntrances.add(new ModelHomeEntrance("全部分類", R.mipmap.ic_category_15));
    }

    private void init() {
        LinearLayout.LayoutParams layoutParams12 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 2.0f));

        //首頁選單分頁
        FrameLayout.LayoutParams entrancelayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 2.0f + 70));
        homeEntranceLayout.setLayoutParams(entrancelayoutParams);
        entranceViewPager.setLayoutParams(layoutParams12);
        LayoutInflater inflater = LayoutInflater.from(this);
        //將RecyclerView放至ViewPager中：
        int pageSize = HOME_ENTRANCE_PAGE_SIZE;
        //一共的頁數等於 總數/每頁數量，並取整。
        int pageCount = (int) Math.ceil(homeEntrances.size() * 1.0 / pageSize);
        List<View> viewList = new ArrayList<View>();
        for (int index = 0; index < pageCount; index++) {
            //每個頁面都是inflate出一個新例項
            RecyclerView recyclerView = (RecyclerView) inflater.inflate(R.layout.item_home_entrance_vp, entranceViewPager, false);
            recyclerView.setLayoutParams(layoutParams12);
            recyclerView.setLayoutManager(new GridLayoutManager(MainActivity.this, 5));
            EntranceAdapter entranceAdapter = new EntranceAdapter(MainActivity.this, homeEntrances, index, HOME_ENTRANCE_PAGE_SIZE);
            recyclerView.setAdapter(entranceAdapter);
            viewList.add(recyclerView);
        }
        CagegoryViewPagerAdapter adapter = new CagegoryViewPagerAdapter(viewList);
        entranceViewPager.setAdapter(adapter);
        entranceIndicatorView.setIndicatorCount(entranceViewPager.getAdapter().getCount());
        entranceIndicatorView.setCurrentIndicator(entranceViewPager.getCurrentItem());
        entranceViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                entranceIndicatorView.setCurrentIndicator(position);
            }
        });
    }
}

8.封裝的指示器類：

public class IndicatorView extends View {

    private int indicatorColor = Color.rgb(0, 0, 0);
    private int indicatorColorSelected = Color.rgb(0, 0, 0);
    private int indicatorWidth = 0;
    private int gravity = 0;

    private int indicatorCount = 0;
    private int currentIndicator = 0;

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0x12) {
                invalidate();
            }
        }
    };

    public IndicatorView(Context context) {
        super(context);
    }

    public IndicatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (attrs != null) {
            TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.IndicatorView);
            indicatorColor = typedArray.getColor(R.styleable.IndicatorView_indicatorColor, Color.rgb(0, 0, 0));
            indicatorColorSelected = typedArray.getColor(R.styleable.IndicatorView_indicatorColorSelected, Color.rgb(0, 0, 0));
            indicatorWidth = ScreenUtil.dip2px(typedArray.getInt(R.styleable.IndicatorView_indicatorWidth, 0));
            gravity = typedArray.getInt(R.styleable.IndicatorView_gravity, 0);
            typedArray.recycle();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int viewWidth = getWidth();
        int viewHeight = getHeight();
        int totalWidth = indicatorWidth * (2 * indicatorCount - 1);

        Paint paint = new Paint();
        paint.setAntiAlias(true);

        if (indicatorCount > 0) {
            for (int i = 0; i < indicatorCount; i++) {
                if (i == currentIndicator) {
                    paint.setColor(indicatorColorSelected);
                } else {
                    paint.setColor(indicatorColor);
                }
                int left = (viewWidth - totalWidth) / 2 + (i * 2 * indicatorWidth);
                switch (gravity) {

                    case 0:
                        left = (viewWidth - totalWidth) / 2 + (i * 2 * indicatorWidth);
                        break;

                    case 1:
                        left = i * 2 * indicatorWidth;
                        break;

                    case 2:
                        left = viewWidth - totalWidth + (i * 2 * indicatorWidth);
                        break;

                }
                int top = (viewHeight - indicatorWidth) / 2;
                int right = left + indicatorWidth;
                int bottom = top + indicatorWidth;
                RectF rectF = new RectF(left, top, right, bottom);
                canvas.drawOval(rectF, paint);
            }
        }
    }

    public void setIndicatorCount(int indicatorCount) {
        this.indicatorCount = indicatorCount;
    }

    public void setCurrentIndicator(int currentIndicator) {
        this.currentIndicator = currentIndicator;
        handler.sendEmptyMessage(0x12);
    }
}

自定義控制元件的自定義屬性，在values目錄下建立attrs.xml檔案，內容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="IndicatorView">
        <attr name="indicatorColor" format="color"/>
        <attr name="indicatorColorSelected" format="color"/>
        <attr name="indicatorWidth" format="integer"/>
        <attr name="gravity" format="integer"/>
    </declare-styleable>
</resources>

9.工具類ScreenUtil

public class ScreenUtil {

    static double scale;
    static int screenWidth = 0, screenHeight = 0;

    public static void init(Context context) {
        scale = context.getResources().getDisplayMetrics().density;
        screenWidth = context.getResources().getDisplayMetrics().widthPixels;
        screenHeight = context.getResources().getDisplayMetrics().heightPixels;
    }

    public static int dip2px(float dipValue) {
        return (int) (dipValue * scale + 0.5f);
    }

    public static int px2dip(float pxValue) {
        return (int) (pxValue / scale + 0.5f);
    }

    public static int px2sp(float pxValue) {
        return (int) (pxValue / scale + 0.5f);
    }

    public static int getScreenHeight() {
        return screenHeight;
    }

    public static int getScreenWidth() {
        return screenWidth;
    }
}

10.工具類的使用：首先在MyApplication中做初始化：

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        ScreenUtil.init(this);
    }
}

相關推薦

安卓專案實戰之ViewPager+RecycleView實現首頁分頁的導航選單

效果圖 用過美團和餓了麼的app的童鞋應該清楚這一功能。首頁選單可以分頁切換，類似我們的banner廣告切換效果，只不過只能手動切換。所以整個分頁效果，我們可以採用Viewpager實現，裡面的選單項我們則可以採用RecyclerView實現，動態改變裡面的選單

安卓專案實戰之設定Activity跳轉動畫的5種實現方式

前言 在介紹activity的切換動畫之前我們先來說明一下實現切換activity的兩種方式： 1，呼叫startActivity方法啟動一個新的Activity並跳轉其頁面 2，呼叫finish方法銷燬當前的Activity返回上一個Activity介面 當呼叫startActiv

安卓專案實戰之強大的網路請求框架okGo使用詳解（一）：實現get，post基本網路請求，下載上傳進度監聽以及對Callback自定義的深入理解

1.新增依賴 //必須使用 compile 'com.lzy.net:okgo:3.0.4' //以下三個選擇新增，okrx和okrx2不能同時使用，一般選擇新增最新的rx2支援即可 compile 'com.lzy.net:okrx:1.0.2' compile 'com.lzy

安卓專案實戰之CoordinatorLayout實現頁面特效（一）

效果圖如下： material design控制元件簡介： 轉載自：https://blog.csdn.net/gitzzp/article/details/52573068 CoordinatorLayout CoordinatorLayout：協調者佈局。它是support

安卓專案實戰之ByeBurger一句程式碼實現標題欄、導航欄滑動隱藏

簡介 效果圖 內容View可為：ViewPager中巢狀RecycleView 內容View可為：NestedScrollView包裹TextView 內容View可為：NestedScrollView包裹WebView 如何使用 1.在project的

安卓專案實戰之沉浸式狀態列的實現

工具類： public class StatusBarUtil { /** * 給activity的狀態列設定顏色 * * @param activity * @param color */ p

安卓專案實戰之關於獲取SD卡指定路徑和檔案的講解

前言 當我們將手機連線到電腦上時，我們發現在SD卡的根目錄下生成了成百上千的由各種應用程式建立的資料夾，導致我們也不知道哪個資料夾是用來幹嘛的，這正因為這樣安卓開發人員經常受到使用者的吐槽。 的確作為一個安卓開發者，我們的確不應該將我們應用的資料直接存到SD卡的根目錄下，這樣當手機安

安卓專案實戰之Activity啟動過程中動態獲取元件寬高的3種方式

前言 有時候我們需要在Activity啟動的時候獲取某一元件的寬或者是高用於動態的更改UI佈局，但是這時候我們直接通過getWidth和getHeight方法獲取是有問題的，如下： 我們在Activity的onCreate方法中呼叫如下的方法來獲取元件的寬高： /** * 在onC

安卓專案實戰之如何debug執行具有release簽名的apk

需求分析 眾所周知，Android的安裝包有測試包（debug版本）和正式包（release版本）之分，一般我們測試時安裝的debug版本預設採用的簽名都是系統幫我們提供的debug.keystore簽名檔案，該檔案位於C:\Users\Administrator.android目錄

安卓專案實戰之強大的網路請求框架okGo使用詳解（六）：擴充套件專案okServer，更強大的下載上傳功能，支援斷點和多工管理

OkGo與OkDownload的區別就是，OkGo只是簡單的做一個下載功能，不具備斷點下載，暫停等操作，但是這在很多時候已經能滿足需要了。 而有些app需要有一個下載列表的功能，就像迅雷下載一樣，每個下載任務可以暫停，可以繼續，可以重新下載，可以有下載優先順序，這時候OkDownload就有

安卓專案實戰之強大的網路請求框架okGo使用詳解（五）：擴充套件專案okRx，完美結合RxJava

前言 在第一篇講解okGo框架新增依賴支援時，還記得我們額外新增的兩個依賴嗎，一個okRx和一個okServer，這兩個均是基於okGo框架的擴充套件專案，其中okRx可以使請求結合RxJava一起使用，而okServer則提供了強大的下載上傳功能，如斷點支援，多工管理等，本篇我們主要講

安卓專案實戰之強大的網路請求框架okGo使用詳解（四）：Cookie的管理

Cookie概念相關 具體來說cookie機制採用的是在客戶端保持狀態的方案，而session機制採用的是在伺服器端保持狀態的方案。同時我們也看到，由於採用伺服器端保持狀態的方案在客戶端也需要儲存一個標識，所以session機制是需要藉助於cookie機制來達到儲存標識的目的，所謂ses

安卓專案實戰之強大的網路請求框架okGo使用詳解（三）：快取的使用

相關實體類必須實現序列化介面 使用快取前，必須讓涉及到快取javaBean物件實現Serializable介面，否者會報NotSerializableException。因為快取的原理是將物件序列化後直接寫入資料庫中，如果不實現Serializable介面，會導致物件無法序列化，進而無法

安卓專案實戰之強大的網路請求框架okGo使用詳解（二）：深入理解Callback之自定義JsonCallback

前言 JSON是一種取代XML的資料結構,和xml相比,它更小巧但描述能力卻不差,由於它的小巧所以網路傳輸資料將減少更多流量從而加快了傳輸速度，目前客戶端伺服器返回的資料大多都是基於這種格式的，相應的我們瞭解的關於json的解析工具主要有兩個：Gson（Google官方出的）和fas

安卓專案實戰之APP版本升級更新，適配安卓7.0

前言 APP的版本升級主要分為兩種方式： 1.應用市場升級 2.應用內升級 而應用內升級的方式是目前大多數APP採用的升級更新方式。 應用內升級的模式 按照不同的業務需求又可以分為兩種： 1，強制性更新 如果APP有更新，那麼則彈出更新提示對話方塊，並且

安卓專案實戰之Glide 3高手養成（三）：Glide的回撥與監聽

前言 通過前面兩篇的講解，我們對於Glide的一些使用都有了基本瞭解，知道了使用Glide載入圖片只需要一行程式碼即可： Glide.with(this).load(url).into(imageView); 而在這一行程式碼的背後，Glide幫我們執行了成千上萬行的邏輯。

安卓專案實戰之Glide 3高手養成（二）：Glide強大的圖片變換功能

使用Glide時普遍會遇到的一個問題，如何解決？ 首先我們嘗試使用Glide來載入一張圖片，圖片URL地址是：https://www.baidu.com/img/bd_logo1.png 這是百度首頁logo的一張圖片，圖片尺寸是540*258畫素。 接下來我們編寫一個非常簡單的佈局檔案

安卓專案實戰之Glide 3高手養成（一）：Glide的基本使用

前言 現在Android上的圖片載入框架非常成熟，從最早的老牌圖片載入框架UniversalImageLoader，到後來Google推出的Volley，再到後來的新興軍Glide和Picasso，當然還有Facebook的Fresco。每一個都非常穩定，功能也都十分強大。但是它們的使用

安卓專案實戰之記憶體洩漏檢測神器LeakCanary

為什麼會產生記憶體洩漏？ Java記憶體洩漏指的是程序中某些物件（垃圾物件）已經沒有使用價值了，但有另外一個正在使用的物件持有它的引用，從而導致它不能回收停留在堆記憶體中，這就產生了記憶體洩漏。無用的物件佔據著記憶體空間，使得實際可使用記憶體變小，形象地說法就是記憶體洩漏了。 記憶體

安卓專案實戰之：最實用的載入中、無網路、無資料、出錯四種情況切換庫的使用總結

效果圖 錄出來的效果不是很好，真機上展示效果還算完美。 如圖所示該效果的實現依賴三個庫： 1，頂部Tab導航：比TabLayout功能更強大的FlycoTabLayout，具體使用檢視本人之前部落格：安卓專案實戰之：FlycoTabLayout和FlycoRoundView的介紹及