Click and Top Suspension in RecycleView

First, design objectives and realization of content display

Design goals

  • You can view groups and contacts on the Contacts page
  • The “Contacts” page slides and groups float at the top
  • If you tap a contact on the Contacts page, the current contact is displayed
  • The Address Book page has a clear layout and runs smoothly

Implement content presentation

The watermark is not removed. I hope you will forgive me

Second, detailed ideas and implementation

Layout file

  • You have a RelativeLayout and a RecycleView in the Contacts page, and use include to refer to the group box at the top
  • A LineaLayout in the contact item contains a TextView and references the grouping box at the top with include
  • There’s a TextView in the group box

“Address book” page code:

<? The XML version = "1.0" encoding = "utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/tab03_1" android:layout_width="match_parent" android:layout_height="wrap_content" android:overScrollMode="never" android:scrollbars="none" /> <include layout="@layout/tab03_include_recycle_item" /> </RelativeLayout>Copy the code

Contact page code

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/tab03_include_recycle_item" /> <TextView android:id="@+id/tab03_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="14dp" android:text="@string/app_name" /> </LinearLayout>Copy the code

Group box page code

<? The XML version = "1.0" encoding = "utf-8"? > <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab03_header_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorAccent" Android :padding="10dp" Android :text=" contacts "Android :textColor="@android:color/white" Android :textSize="20sp"> </TextView>Copy the code

RecycleView design

  • The design of the ContactData
  • The design of the ContactAdapter
  • The design of the ContactFragment

(The specific code is attached at the end of the article, and only the ideas and key codes are shown here)

Operation process: When we scroll RecycleView, the scroll listener will set its content according to whether the top floating box of item is the first head and whether there is a head. When clicking item, click listener will display the current content

The design of the ContactData

ContactData contains the group name: group; Contact name: name, and their get and set methods

The design of the ContactAdapter

  • Constructor: Pass in a Context
  • SetContactDataList () : Sets a list of ContactData and assigns values, dynamically updated
  • OnCreateViewHolder () : Sets the View and returns ContactViewHolder
  • OnBindViewHolder () : Sets the top hover to be determined by whether or not the head is the first, and whether or not the head is present; Setting click events
  • GetItemCount () : Returns the length of the list depending on whether it is empty

Sample code for onBindViewHolder() :

public static final int FIRST_STICKY_VIEW = 1; public static final int HAS_STICKY_VIEW = 2; public static final int NONE_STICKY_VIEW = 3; public void onBindViewHolder(@NonNull ContactViewHolder holder, int position) { final String content = mList.get(position).getName(); ContactData stickyData = mList.get(position); holder.tvName.setText(stickyData.getName()); if (position == 0) { holder.tvGroup.setVisibility(View.VISIBLE); holder.tvGroup.setText(stickyData.group); holder.itemView.setTag(FIRST_STICKY_VIEW); } else { if (! TextUtils.equals(stickyData.group, mList.get(position - 1).group)) { holder.tvGroup.setVisibility(View.VISIBLE); holder.tvGroup.setText(stickyData.group); holder.itemView.setTag(HAS_STICKY_VIEW); } else { holder.tvGroup.setVisibility(View.GONE); holder.itemView.setTag(NONE_STICKY_VIEW); } } holder.itemView.setContentDescription(stickyData.group); holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.maketext (mContext, "you click:" + content, toast.length_short).show(); }}); }Copy the code

The design of the ContactFragment

  • Instantiate the View with inflater.inflate
  • InitView () : initialize RecycleView, set adapter, and scrolllisten
  • InitList () : initializes the List, adding data to the List
  • InitData () : initializes mDataList, slicing and adding data from mList to mDataList

Example of initView() code:

private void initView() { RecyclerView recyclerView = view.findViewById(R.id.tab03_1); adapter = new ContactAdapter(getActivity()); final TextView tvGroup = view.findViewById(R.id.tab03_header_view); LinearLayoutManager manager = new LinearLayoutManager(getActivity()); recyclerView.setLayoutManager(manager); recyclerView.setHasFixedSize(true); recyclerView.setAdapter(adapter); adapter.setContactDataList(mDataList); recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); View stickyInfoView = recyclerView.findChildViewUnder( tvGroup.getMeasuredWidth() / 2, 5); if (stickyInfoView ! = null && stickyInfoView.getContentDescription() ! = null) { tvGroup.setText(String.valueOf(stickyInfoView.getContentDescription())); } View transInfoView = recyclerView.findChildViewUnder( tvGroup.getMeasuredWidth() / 2, tvGroup.getMeasuredHeight() + 1); if (transInfoView ! = null && transInfoView.getTag() ! = null) { int transViewStatus = (int) transInfoView.getTag(); int dealtY = transInfoView.getTop() - tvGroup.getMeasuredHeight(); if (transViewStatus == ContactAdapter.HAS_STICKY_VIEW) { if (transInfoView.getTop() > 0) { tvGroup.setTranslationY(dealtY); } else { tvGroup.setTranslationY(0); } } else if (transViewStatus == ContactAdapter.NONE_STICKY_VIEW) { tvGroup.setTranslationY(0); }}}}); }Copy the code

Three,

The difficulty of this project lies in the setting of scroll monitor and how to set the content of item according to whether the top float box of item is the first head and whether it has a head. The change of position should be monitored by scrolling listener first, and then set whether the top floating box of item is the first head and whether there is a head by the change of position, and then set the content of RecycleView by this point.

Inadequacies, hope that the various big man correct.

Gitee source