如何在RecyclerView选中项下方添加线型页面指示器

Got it, let's break down how to add that linear indicator below your selected RecyclerView item—this is a super common UI pattern, and it’ll fit right into your existing setup. Here's a step-by-step implementation:

1. Update your layout to include the indicator #

First, modify your fragment's layout to add a narrow horizontal view that acts as the selection indicator. Place it directly below your RecyclerView:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/filterRecycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"/>

    <!-- Selection indicator -->
    <View
        android:id="@+id/indicatorView"
        android:layout_width="wrap_content"
        android:layout_height="3dp"
        android:background="@color/your_accent_color"
        android:layout_below="@id/filterRecycler"
        android:layout_marginTop="4dp"/>
</RelativeLayout>

2. Modify your Adapter to track selection state #

Update your FilterByAdapter to keep track of the selected position, apply visual changes to the selected item, and store item dimensions needed for the indicator:

public class FilterByAdapter extends RecyclerView.Adapter<FilterByAdapter.ViewHolder> {
    private Context context;
    private List<FilterCategories> categories;
    private int selectedPosition = 0; // Default to first item
    private int[] itemWidths; // Store each item's width for indicator sizing

    public FilterByAdapter(Context context, List<FilterCategories> categories) {
        this.context = context;
        this.categories = categories;
        itemWidths = new int[categories.size()];
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.your_item_layout, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        FilterCategories category = categories.get(position);
        holder.title.setText(category.getTitle());
        holder.icon.setImageResource(category.getIconRes());

        // Apply selected/unselected styles
        if (position == selectedPosition) {
            holder.icon.setColorFilter(ContextCompat.getColor(context, R.color.your_accent_color));
            holder.title.setTextColor(ContextCompat.getColor(context, R.color.your_accent_color));
        } else {
            holder.icon.setColorFilter(ContextCompat.getColor(context, R.color.unselected_gray));
            holder.title.setTextColor(ContextCompat.getColor(context, R.color.unselected_gray));
        }

        // Measure and store item width once it's laid out
        holder.itemView.post(() -> itemWidths[position] = holder.itemView.getWidth());
    }

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

    // Update selected position and refresh the adapter
    public void setSelectedPosition(int position) {
        selectedPosition = position;
        notifyDataSetChanged();
    }

    // Get width of the selected item
    public int getSelectedItemWidth() {
        return itemWidths[selectedPosition];
    }

    // Get left position of the selected item
    public int getSelectedItemLeft() {
        RecyclerView.ViewHolder holder = ((RecyclerView) ((ViewGroup) context).findViewById(R.id.filterRecycler))
                .findViewHolderForAdapterPosition(selectedPosition);
        return holder != null ? holder.itemView.getLeft() : 0;
    }

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        TextView title;
        ImageView icon;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.category_title);
            icon = itemView.findViewById(R.id.category_icon);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View v) {
            int position = getAdapterPosition();
            if (position != RecyclerView.NO_POSITION) {
                setSelectedPosition(position);
                // Trigger callback to fragment
                if (onItemClickListener != null) {
                    onItemClickListener.onItemClick(position);
                }
            }
        }
    }

    // Click listener interface for fragment communication
    private OnItemClickListener onItemClickListener;
    public interface OnItemClickListener {
        void onItemClick(int position);
    }
    public void setOnItemClickListener(OnItemClickListener listener) {
        this.onItemClickListener = listener;
    }
}

3. Handle indicator movement in your Fragment #

In your fragment, set up the adapter's click listener, switch fragments as before, and add smooth animation for the indicator:

public class YourFragment extends Fragment {
    private RecyclerView filterRecycler;
    private FilterByAdapter filterByAdapter;
    private View indicatorView;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.your_fragment_layout, container, false);
        filterRecycler = view.findViewById(R.id.filterRecycler);
        indicatorView = view.findViewById(R.id.indicatorView);

        // Initialize your category data and adapter
        List<FilterCategories> filterCategories = new ArrayList<>();
        filterCategories.add(new FilterCategories("Home", R.drawable.filter_price_gray, 0));
        filterCategories.add(new FilterCategories("Contacts", R.drawable.filter_store_gray, 0));
        filterCategories.add(new FilterCategories("Profile", R.drawable.filter_style_gray, 0));
        filterByAdapter = new FilterByAdapter(getContext(), filterCategories);
        filterRecycler.setLayoutManager(new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false));
        filterRecycler.setAdapter(filterByAdapter);

        // Set initial indicator position after layout
        filterRecycler.post(() -> updateIndicatorPosition(0));

        // Handle item clicks
        filterByAdapter.setOnItemClickListener(position -> {
            switchToTargetFragment(position);
            updateIndicatorPosition(position);
        });

        return view;
    }

    // Animate indicator to selected item position
    private void updateIndicatorPosition(int position) {
        int itemLeft = filterByAdapter.getSelectedItemLeft();
        int itemWidth = filterByAdapter.getSelectedItemWidth();

        // Smooth animation for position and width
        ObjectAnimator translateAnim = ObjectAnimator.ofFloat(indicatorView, "translationX", itemLeft);
        ObjectAnimator widthAnim = ObjectAnimator.ofInt(indicatorView, "width", itemWidth);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(translateAnim, widthAnim);
        animatorSet.setDuration(300); // Adjust speed as needed
        animatorSet.start();
    }

    // Your existing fragment switching logic
    private void switchToTargetFragment(int position) {
        Fragment targetFragment = switch (position) {
            case 0 -> new HomeFragment();
            case 1 -> new ContactsFragment();
            case 2 -> new ProfileFragment();
            default -> null;
        };

        if (targetFragment != null) {
            getParentFragmentManager().beginTransaction()
                    .replace(R.id.fragment_container, targetFragment)
                    .commit();
        }
    }
}

Extra Tips #

• If your item layout has padding, adjust the indicator width to match the content (e.g., text/icon width) instead of the full item width for a tighter look.
• If you want to sync the indicator with RecyclerView scrolling, add an OnScrollListener to detect when items enter the center of the screen and update the selected position.
• Extract colors and dimensions (like indicator height, animation duration) to colors.xml and dimens.xml for easier theme customization.

内容的提问来源于stack exchange，提问作者I'm Coder