Android兩種方式實現(xiàn)橫向滾動圖標+指示器

啊哈,先上應(yīng)用效果圖,符合你的需求,你再繼續(xù)看這篇博文哈~

類型1 :RecyclerView實現(xiàn)非分頁效果的左右滑動
類型2 :ViewPager+RecyclerView實現(xiàn)分頁效果的左右滑動

20200428102813654.gif

GitHub地址 : https://github.com/xiaoyaomeng/TopicView/tree/master

類型1:RecyclerView實現(xiàn)非分頁效果的左右滑動

private void initTypeRecyclerView(int rowNum) {
        final RecyclerView topicRecyclerView = findViewById(R.id.topicRecyclerView);
        final View mIndicatorLayout = findViewById(R.id.parent_layout);
        final View mIndicatorView = findViewById(R.id.main_line);

        TopicAdapter topicAdapter = new TopicAdapter(getApplicationContext(), mTopicData);
        topicAdapter.setOnItemClickListener(this);

        topicRecyclerView.setAdapter(topicAdapter);
        GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(), rowNum);
        gridLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

        topicRecyclerView.setLayoutManager(gridLayoutManager);
        topicRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);

            }

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                //當前RcyclerView顯示區(qū)域的高度。水平列表屏幕從左側(cè)到右側(cè)顯示范圍
                int extent = recyclerView.computeHorizontalScrollExtent();

                //整體的高度,注意是整體,包括在顯示區(qū)域之外的。
                int range = recyclerView.computeHorizontalScrollRange();

                //已經(jīng)滾動的距離,為0時表示已處于頂部。
                int offset = recyclerView.computeHorizontalScrollOffset();

                //計算出溢出部分的寬度,即屏幕外剩下的寬度
                float maxEndX = range - extent;

                //計算比例
                float proportion = offset / maxEndX;

                int layoutWidth = mIndicatorLayout.getWidth();
                int indicatorViewWidth = mIndicatorView.getWidth();

                //可滑動的距離
                int scrollableDistance = layoutWidth - indicatorViewWidth;

                //設(shè)置滾動條移動
                mIndicatorView.setTranslationX(scrollableDistance * proportion);
            }
        });

    }

類型2 :ViewPager+RecyclerView實現(xiàn)分頁效果的左右滑動

private void initTypeViewPager(int rowNum, int columnNum) {
        final ViewPager topicViewPager = findViewById(R.id.topicViewPager);
        final MagicIndicator topicIndicator = findViewById(R.id.topicIndicator);
        //1.根據(jù)數(shù)據(jù)的多少來分頁,每頁的數(shù)據(jù)為rw
        int singlePageDatasNum = rowNum * columnNum; //每個單頁包含的數(shù)據(jù)量:2*4=8;
        int pageNum = mTopicData.size() / singlePageDatasNum;//算出有幾頁菜單:20%8 = 3;
        if (mTopicData.size() % singlePageDatasNum > 0) pageNum++;//如果取模大于0,就還要多一頁出來,放剩下的不滿項
        ArrayList<RecyclerView> mList = new ArrayList<>();
        for (int i = 0; i < pageNum; i++) {
            RecyclerView recyclerView = new RecyclerView(getApplicationContext());
            GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(), columnNum);
            recyclerView.setLayoutManager(gridLayoutManager);
            int fromIndex = i * singlePageDatasNum;
            int toIndex = (i + 1) * singlePageDatasNum;
            if (toIndex > mTopicData.size()) toIndex = mTopicData.size();
            //a.截取每個頁面包含數(shù)據(jù)
            ArrayList<TopicBean> menuItems = new ArrayList<TopicBean>(mTopicData.subList(fromIndex, toIndex));
            //b.設(shè)置每個頁面的適配器數(shù)據(jù)
            TopicAdapter menuAdapter = new TopicAdapter(getApplicationContext(), menuItems);
            menuAdapter.setOnItemClickListener(this);
            //c.綁定適配器,并添加到list
            recyclerView.setAdapter(menuAdapter);
            mList.add(recyclerView);
        }
        //2.ViewPager的適配器
        HomeTopicPagerAdapter menuViewPagerAdapter = new HomeTopicPagerAdapter(mList);
        topicViewPager.setAdapter(menuViewPagerAdapter);
        //3.動態(tài)設(shè)置ViewPager的高度,并加載所有頁面
        int height = dp2px(getApplicationContext(), 76.0f);//這里的80為MainMenuAdapter中布局文件高度
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, mTopicData.size() <= columnNum ? height : height * rowNum);
        topicViewPager.setLayoutParams(layoutParams);
        topicViewPager.setOffscreenPageLimit(pageNum - 1);

        //4.創(chuàng)建指示器
        CommonNavigator commonNavigator = new CommonNavigator(getApplicationContext());
        commonNavigator.setAdjustMode(true);
        final int finalPageNum = pageNum;

        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return finalPageNum;
            }

            @Override
            public IPagerTitleView getTitleView(Context context, int index) {
                return new DummyPagerTitleView(context);
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                LinePagerIndicator indicator = new LinePagerIndicator(context);
                indicator.setMode(LinePagerIndicator.MODE_EXACTLY);
                indicator.setLineHeight(UIUtil.dip2px(context, 3));//就是指示器的高
                indicator.setLineWidth(UIUtil.dip2px(context, 66 / finalPageNum));//就是指示器的寬度,然后通過頁數(shù)來評分
                indicator.setRoundRadius(UIUtil.dip2px(context, 3));
                indicator.setStartInterpolator(new AccelerateInterpolator());
                indicator.setEndInterpolator(new DecelerateInterpolator(3));
                indicator.setColors(ContextCompat.getColor(context, R.color.colorAccent));
                return indicator;
            }
        });
        //5.配置指示器,并和ViewPager產(chǎn)生綁定
        topicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(topicIndicator, topicViewPager);
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容