android - 具有自定义 tablayout 的 ViewPager2

Question

我开始使用 ViewPager2，但我不知道如何使用自定义 tablayout 来自定义页面标题，就像普通的 viewpager 一样。

Answer 1

我找到了一个临时的好办法。

1-对选项卡使用 RecyclerView 并手动处理。

2-将 ViewPager2 用于 fragment 。

public class ViewPagerHelper extends ViewPager2.OnPageChangeCallback implements TabSelectInterface {
    private Activity activity;
    private byte from;
    private RecyclerView recyclerViewTabs;
    private ViewPager2 viewPager2;
    private List<Fragment> fragmentList;
    private List<String> tabList;
    private ViewPagerTabsAdapter viewPagerTabsAdapter;
    private FragmentManager fragmentManager;
    private boolean isLive;
    private LinearLayoutManager linearLayoutManagerTabs;

    public ViewPagerHelper(FragmentManager fragmentManager, Activity activity, byte from, List<Fragment> fragmentList, List<String> tabList, boolean isLive) {
        this.fragmentManager = fragmentManager;
        this.activity = activity;
        this.from = from;
        this.fragmentList = fragmentList;
        this.tabList = tabList;
        this.isLive = isLive;
        setupViewPager();

    }

    private void setupViewPager() {
        recyclerViewTabs = activity.findViewById(R.id.recycle_tabs);
        viewPager2 = activity.findViewById(R.id.viewpager);


        linearLayoutManagerTabs = new LinearLayoutManager(activity, RecyclerView.HORIZONTAL, false);

        recyclerViewTabs.setLayoutManager(linearLayoutManagerTabs);


        setTabsAdapter();
        setFragmentsAdapter();


        viewPager2.registerOnPageChangeCallback(this);


//        viewPager2.setUserInputEnabled(false);
    }


    private void setTabsAdapter() {
        viewPagerTabsAdapter = new ViewPagerTabsAdapter(activity, tabList, isLive, this);
        recyclerViewTabs.setAdapter(viewPagerTabsAdapter);
    }

    private void setFragmentsAdapter() {
        ViewPagerFragmentAdapter viewPagerFragmentAdapter = new ViewPagerFragmentAdapter(fragmentManager, fragmentList);
        viewPager2.setAdapter(viewPagerFragmentAdapter);
    }


    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        System.out.println("onPageScrolled1: " + position);
        System.out.println("onPageScrolled2: " + positionOffset);
        System.out.println("onPageScrolled3: " + positionOffsetPixels);
        super.onPageScrolled(position, positionOffset, positionOffsetPixels);
    }

    @Override
    public void onPageSelected(int position) {
        super.onPageSelected(position);

        Log.e("Selected_Page", String.valueOf(position));
        viewPagerTabsAdapter.setSelectedTab(position);
        linearLayoutManagerTabs.scrollToPositionWithOffset(position, 0);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        super.onPageScrollStateChanged(state);
    }

    @Override
    public void onTabSelected(int position) {
        viewPager2.setCurrentItem(position, true);
    }


    public void animateFirstTab(){
        viewPagerTabsAdapter.animateFirstTab();
    }

和 viewpager2 适配器类

public class ViewPagerFragmentAdapter extends FragmentStateAdapter {

    private List<Fragment> arrayList;

    ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager, List<Fragment> arrayList) {
        super(fragmentManager);
        this.arrayList = arrayList;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return arrayList.get(position);
    }


    @Override
    public int getItemCount() {
        return arrayList.size();
    }


}

recyclerview 标签适配器

public class ViewPagerTabsAdapter extends RecyclerView.Adapter<ViewPagerTabsAdapter.OrderHolder> {
    private Context context;
    private List<String> list;
    private int selectedTab = 0;
    private TabSelectInterface tabSelectInterface;
    private boolean isLive = false;

    private List<Integer> tabsWidth = new ArrayList<>();
    int numberToSpliteWidth = 0;
private boolean animateFirstTab=false;
    ViewPagerTabsAdapter(Context context, List<String> list, boolean isLive, TabSelectInterface tabSelectInterface) {
        this.context = context;
        this.list = list;
        this.isLive = isLive;
        this.tabSelectInterface = tabSelectInterface;
    }

    @NonNull
    @Override
    public OrderHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View rowView = LayoutInflater.from(context).inflate(R.layout.custom_tab, parent, false);
//        final RecyclerView.ViewHolder holder = new RecyclerView.ViewHolder(rowView);

//        if (!tabsWidth.isEmpty()) {
//            int sumWidths = 0;
//            for (Integer w : tabsWidth) {
//                sumWidths += w;
//            }
//
//            //no scroll needed, split the width
//            if (sumWidths < parent.getWidth()) {
//
//                System.out.println("THEWIDTHIS: " + viewType);
//                int newWidth = parent.getWidth() / list.size();
//                if (newWidth > viewType) {
//                    rowView.getLayoutParams().width = newWidth;
//                }
//
//
//            }
//
//        }

        if (!tabsWidth.isEmpty()) {

        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        int newTabMinWidth = displayMetrics.widthPixels / list.size();
        System.out.println("THEtabMinWidth: " + newTabMinWidth);
        if (list.size() <= 4) {
//            rowView.setMinimumWidth(tabMinWidth - 25);
            if (newTabMinWidth > viewType) {
                rowView.getLayoutParams().width = newTabMinWidth;
            }
        } else {
//            rowView.setMinimumWidth(tabMinWidth + 32);
            if (newTabMinWidth > viewType) {
                rowView.getLayoutParams().width = (int) (newTabMinWidth + context.getResources().getDimension(R.dimen._9sdp));
            }
        }
        }
        return new OrderHolder(rowView);
    }

    @Override
    public void onBindViewHolder(@NonNull OrderHolder holder, int position) {
        holder.name.setText(list.get(position));
        if (selectedTab == position) {
            holder.name.setTextColor(ContextCompat.getColor(context, R.color.yellow));
            holder.selectedView.setVisibility(View.VISIBLE);
        } else {
            holder.name.setTextColor(ContextCompat.getColor(context, R.color.font2));
            holder.selectedView.setVisibility(View.INVISIBLE);
        }

        if (holder.name.getText().toString().equals("الفيديو")) {
//
            if (isLive) {
                Glide.with(context).asGif().load(R.drawable.live).into(holder.imageView);
                holder.imgframe.setVisibility(View.VISIBLE);
            } else {
                holder.imgframe.setVisibility(View.GONE);

            }
        } else {
            holder.imgframe.setVisibility(View.GONE);

        }


        if (animateFirstTab){

            Animation a = AnimationUtils.loadAnimation(context, R.anim.scale);
            a.reset();
            holder.name.clearAnimation();
            holder.name.startAnimation(a);
            animateFirstTab=false;




        }

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                tabSelectInterface.onTabSelected(holder.getAdapterPosition());
            }
        });

        if (tabsWidth.isEmpty()) {

            final ViewTreeObserver observer = holder.itemView.getViewTreeObserver();
            observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    holder.itemView.getViewTreeObserver().removeOnGlobalLayoutListener(this);

//                    int containerWidth = holder.itemView.getWidth();
//                    int containerHeight = holder.itemView.getHeight();
//                    float x = containerWidth - Float.parseFloat(model.getXpoints(o)) / 100 * containerWidth;
//                    float y = containerHeight - Float.parseFloat(model.getYpoints(o)) / 100 * containerHeight;
//                    Log.e("measuredWidth", "" + containerHeight + "" + containerWidth);
//                    Log.e("getPointX", "" + model.getXpoints(o) + "" + model.getYpoints(o));
//                    Log.e("x", "x" + x + "y" + y);
//
//                    h.tag.setX(x);
//                    h.tag.setY(y);
//                    h.tag.requestLayout();
                    System.out.println("THEWIDTHIS2: " + holder.itemView.getWidth());
                    tabsWidth.add(holder.itemView.getWidth());
                    if (position == list.size() - 1) {
                        System.out.println("notifiNOW");
                        notifyDataSetChanged();
                    }
                }
            });


        }




    }


    @Override
    public int getItemViewType(int position) {

        try {
            return tabsWidth.get(position);

        } catch (Exception e) {
//        return super.getItemViewType(position);
            return 0;
        }

    }


    @Override
    public int getItemCount() {
        return list.size();
    }


    void setSelectedTab(int selectedTab) {
        int currentSelectedTab = this.selectedTab;

        if (currentSelectedTab != selectedTab) {
            this.selectedTab = selectedTab;
            notifyItemChanged(currentSelectedTab);
            notifyItemChanged(selectedTab);
        }

    }

    void animateFirstTab() {
    animateFirstTab=true;
    notifyItemChanged(0);

    }


    public class OrderHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        private TextView name;
        private View selectedView;
        private FrameLayout imgframe;
        private ImageView imageView;


        OrderHolder(View itemView) {
            super(itemView);
            name = itemView.findViewById(R.id.textview);
            selectedView = itemView.findViewById(R.id.selected_view);

            imgframe = (FrameLayout) itemView.findViewById(R.id.imgframe);
            imageView = (ImageView) itemView.findViewById(R.id.imageView);

        }

        @Override
        public void onClick(View view) {

        }
    }

在 XML 中使用它

<androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycle_tabs"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:layout_gravity="center_horizontal"
            ads:layout_constraintBottom_toBottomOf="parent"
            ads:layout_constraintEnd_toEndOf="parent"
            ads:layout_constraintStart_toStartOf="parent" />



    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/container"
        android:layout_marginBottom="50dp" />

并使用它。你只需要使用这段代码

  List<Fragment> fragmentList = new ArrayList<>();
            List<String> tabtList = new ArrayList<>();

         tabtList.add(tab_index,"tab_name" );
                fragmentList.add(tab_index, new TabFragment());


  new ViewPagerHelper(getSupportFragmentManager(), MatchProfileActivity.this, VIEWPAGER_TYPE_FROM_MATCHES, fragmentList, tabtList,
                  false);

Hint: not all code needed I put all my code.