Comment créer des en-têtes collants dans RecyclerView? (Sans bibliothèque externe)
Je souhaite corriger mes vues d'en-tête en haut de l'écran, comme dans l'image ci-dessous, sans utiliser de bibliothèques externes.
Dans mon cas, je ne veux pas le faire par ordre alphabétique. J'ai deux types de vues différents (en-tête et normal). Je veux seulement fixer en haut, le dernier en-tête.
Ici, je vais expliquer comment faire sans bibliothèque externe. Ce sera un très long post, alors préparez-vous.
Tout d’abord, permettez-moi de reconnaître @ tim.paetz dont le message m’a inspiré pour entreprendre une démarche consistant à mettre en œuvre mes propres en-têtes collants à l’aide de ItemDecorations. J'ai emprunté certaines parties de son code dans mon implémentation.
Comme vous l'avez peut-être déjà expérimenté, si vous tentez de le faire vous-même, il est très difficile de trouver une bonne explication de COMMENT pour le faire avec la technique ItemDecoration. Je veux dire, quelles sont les étapes? Quelle est la logique derrière tout cela? Comment faire en sorte que l'en-tête reste en tête de liste?le faire vous-même avec l'utilisation de ItemDecoration est assez facile.
Conditions initiales
- Votre ensemble de données doit être une
listd'éléments de type différent (pas dans le sens de "types Java", mais dans le sens de types "en-tête/élément"). - Votre liste devrait être déjà triée.
- Chaque élément de la liste doit être d'un certain type - il doit y avoir un élément d'en-tête associé.
- Le tout premier élément de la
listdoit être un élément d'en-tête.
Ici, je fournis le code complet pour mon RecyclerView.ItemDecoration appelé HeaderItemDecoration. Ensuite, j'explique les étapes entreprises en détail.
public class HeaderItemDecoration extends RecyclerView.ItemDecoration {
private StickyHeaderInterface mListener;
private int mStickyHeaderHeight;
public HeaderItemDecoration(RecyclerView recyclerView, @NonNull StickyHeaderInterface listener) {
mListener = listener;
// On Sticky Header Click
recyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
public boolean onInterceptTouchEvent(RecyclerView recyclerView, MotionEvent motionEvent) {
if (motionEvent.getY() <= mStickyHeaderHeight) {
// Handle the clicks on the header here ...
return true;
}
return false;
}
public void onTouchEvent(RecyclerView recyclerView, MotionEvent motionEvent) {
}
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
}
});
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
View topChild = parent.getChildAt(0);
if (Util.isNull(topChild)) {
return;
}
int topChildPosition = parent.getChildAdapterPosition(topChild);
if (topChildPosition == RecyclerView.NO_POSITION) {
return;
}
View currentHeader = getHeaderViewForItem(topChildPosition, parent);
fixLayoutSize(parent, currentHeader);
int contactPoint = currentHeader.getBottom();
View childInContact = getChildInContact(parent, contactPoint);
if (Util.isNull(childInContact)) {
return;
}
if (mListener.isHeader(parent.getChildAdapterPosition(childInContact))) {
moveHeader(c, currentHeader, childInContact);
return;
}
drawHeader(c, currentHeader);
}
private View getHeaderViewForItem(int itemPosition, RecyclerView parent) {
int headerPosition = mListener.getHeaderPositionForItem(itemPosition);
int layoutResId = mListener.getHeaderLayout(headerPosition);
View header = LayoutInflater.from(parent.getContext()).inflate(layoutResId, parent, false);
mListener.bindHeaderData(header, headerPosition);
return header;
}
private void drawHeader(Canvas c, View header) {
c.save();
c.translate(0, 0);
header.draw(c);
c.restore();
}
private void moveHeader(Canvas c, View currentHeader, View nextHeader) {
c.save();
c.translate(0, nextHeader.getTop() - currentHeader.getHeight());
currentHeader.draw(c);
c.restore();
}
private View getChildInContact(RecyclerView parent, int contactPoint) {
View childInContact = null;
for (int i = 0; i < parent.getChildCount(); i++) {
View child = parent.getChildAt(i);
if (child.getBottom() > contactPoint) {
if (child.getTop() <= contactPoint) {
// This child overlaps the contactPoint
childInContact = child;
break;
}
}
}
return childInContact;
}
/**
* Properly measures and layouts the top sticky header.
* @param parent ViewGroup: RecyclerView in this case.
*/
private void fixLayoutSize(ViewGroup parent, View view) {
// Specs for parent (RecyclerView)
int widthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth(), View.MeasureSpec.EXACTLY);
int heightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight(), View.MeasureSpec.UNSPECIFIED);
// Specs for children (headers)
int childWidthSpec = ViewGroup.getChildMeasureSpec(widthSpec, parent.getPaddingLeft() + parent.getPaddingRight(), view.getLayoutParams().width);
int childHeightSpec = ViewGroup.getChildMeasureSpec(heightSpec, parent.getPaddingTop() + parent.getPaddingBottom(), view.getLayoutParams().height);
view.measure(childWidthSpec, childHeightSpec);
view.layout(0, 0, view.getMeasuredWidth(), mStickyHeaderHeight = view.getMeasuredHeight());
}
public interface StickyHeaderInterface {
/**
* This method gets called by {@link HeaderItemDecoration} to fetch the position of the header item in the adapter
* that is used for (represents) item at specified position.
* @param itemPosition int. Adapter's position of the item for which to do the search of the position of the header item.
* @return int. Position of the header item in the adapter.
*/
int getHeaderPositionForItem(int itemPosition);
/**
* This method gets called by {@link HeaderItemDecoration} to get layout resource id for the header item at specified adapter's position.
* @param headerPosition int. Position of the header item in the adapter.
* @return int. Layout resource id.
*/
int getHeaderLayout(int headerPosition);
/**
* This method gets called by {@link HeaderItemDecoration} to setup the header View.
* @param header View. Header to set the data on.
* @param headerPosition int. Position of the header item in the adapter.
*/
void bindHeaderData(View header, int headerPosition);
/**
* This method gets called by {@link HeaderItemDecoration} to verify whether the item represents a header.
* @param itemPosition int.
* @return true, if item at the specified adapter's position represents a header.
*/
boolean isHeader(int itemPosition);
}
}
Logique métier
Alors, comment puis-je le faire coller?
Vous pas. Vous ne pouvez pas créer un élément RecyclerView de votre choix, mais vous devez vous arrêter dessus, à moins que vous ne soyez un gourou de présentations personnalisées et que vous connaissiez plus de 12 000 lignes de code pour une RecyclerView par cœur. Donc, comme cela va toujours avec la conception de l'interface utilisateur, si vous ne pouvez pas faire quelque chose, simulez-le. Vous dessinez simplement l'en-tête au-dessus de tout en utilisant Canvas. Vous devez également savoir quels éléments l'utilisateur peut voir pour le moment. Il se trouve que ItemDecoration peut vous fournir à la fois la Canvas et des informations sur les éléments visibles. Avec cela, voici les étapes de base:
Dans la méthode
onDrawOverdeRecyclerView.ItemDecoration, obtenez le tout premier élément (visible) visible par l'utilisateur.View topChild = parent.getChildAt(0);Déterminez quel en-tête le représente.
int topChildPosition = parent.getChildAdapterPosition(topChild); View currentHeader = getHeaderViewForItem(topChildPosition, parent);Dessinez l'en-tête approprié sur le RecyclerView en utilisant la méthode
drawHeader().
Je souhaite également implémenter le comportement lorsque le nouvel en-tête à venir rencontre le premier: il devrait sembler comme l'en-tête à venir pousse doucement l'en-tête actuel en dehors de la vue et prend sa place.
La même technique consistant à "dessiner par-dessus tout" s'applique ici.
Déterminez quand l'en-tête «bloqué» supérieur rencontre le nouvel en-tête à venir.
View childInContact = getChildInContact(parent, contactPoint);Obtenez ce point de contact (c'est-à-dire le bas de l'en-tête collante de votre tirage et le haut de l'en-tête à venir).
int contactPoint = currentHeader.getBottom();Si l’élément de la liste est en train d’empiéter sur ce "point de contact", redessinez votre en-tête collant de manière à ce que le bas de celui-ci se trouve en haut de l’élément d’intrusion. Vous y parvenez avec la méthode
translate()deCanvas. Il en résulte que le point de départ de l'en-tête supérieure sera hors de la zone visible et qu'il semblera "être expulsé par l'en-tête à venir". Quand il est complètement parti, dessinez la nouvelle en-tête en haut.if (childInContact != null) { if (mListener.isHeader(parent.getChildAdapterPosition(childInContact))) { moveHeader(c, currentHeader, childInContact); } else { drawHeader(c, currentHeader); } }
Le reste est expliqué par des commentaires et des annotations approfondies dans le morceau de code que j'ai fourni.
L'utilisation est simple:
mRecyclerView.addItemDecoration(new HeaderItemDecoration((HeaderItemDecoration.StickyHeaderInterface) mAdapter));
Votre mAdapter doit implémenter StickyHeaderInterface pour que cela fonctionne. L'implémentation dépend des données que vous avez.
Enfin, je fournis ici un gif avec un en-tête semi-transparent, pour que vous puissiez saisir l’idée et voir ce qui se passe sous le capot.
Voici l’illustration du concept "il suffit de tirer le meilleur de tout". Vous pouvez voir qu'il existe deux éléments "en-tête 1" - l'un que nous dessinons et reste au premier plan dans une position bloquée, et l'autre qui provient de l'ensemble de données et se déplace avec tous les éléments restants. L'utilisateur n'en verra pas le fonctionnement interne, car ses en-têtes ne seront pas transparents.
Et voici ce qui se passe dans la phase "repousser":
J'espère que ça a aidé.
Modifier
Voici ma mise en œuvre actuelle de la méthode getHeaderPositionForItem() dans l'adaptateur de RecyclerView:
@Override
public int getHeaderPositionForItem(int itemPosition) {
int headerPosition = 0;
do {
if (this.isHeader(itemPosition)) {
headerPosition = itemPosition;
break;
}
itemPosition -= 1;
} while (itemPosition >= 0);
return headerPosition;
}
Le moyen le plus simple consiste simplement à créer une décoration d’article pour votre RecyclerView.
import Android.graphics.Canvas;
import Android.graphics.Rect;
import Android.support.annotation.NonNull;
import Android.support.v7.widget.RecyclerView;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.TextView;
public class RecyclerSectionItemDecoration extends RecyclerView.ItemDecoration {
private final int headerOffset;
private final boolean sticky;
private final SectionCallback sectionCallback;
private View headerView;
private TextView header;
public RecyclerSectionItemDecoration(int headerHeight, boolean sticky, @NonNull SectionCallback sectionCallback) {
headerOffset = headerHeight;
this.sticky = sticky;
this.sectionCallback = sectionCallback;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
int pos = parent.getChildAdapterPosition(view);
if (sectionCallback.isSection(pos)) {
outRect.top = headerOffset;
}
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c,
parent,
state);
if (headerView == null) {
headerView = inflateHeaderView(parent);
header = (TextView) headerView.findViewById(R.id.list_item_section_text);
fixLayoutSize(headerView,
parent);
}
CharSequence previousHeader = "";
for (int i = 0; i < parent.getChildCount(); i++) {
View child = parent.getChildAt(i);
final int position = parent.getChildAdapterPosition(child);
CharSequence title = sectionCallback.getSectionHeader(position);
header.setText(title);
if (!previousHeader.equals(title) || sectionCallback.isSection(position)) {
drawHeader(c,
child,
headerView);
previousHeader = title;
}
}
}
private void drawHeader(Canvas c, View child, View headerView) {
c.save();
if (sticky) {
c.translate(0,
Math.max(0,
child.getTop() - headerView.getHeight()));
} else {
c.translate(0,
child.getTop() - headerView.getHeight());
}
headerView.draw(c);
c.restore();
}
private View inflateHeaderView(RecyclerView parent) {
return LayoutInflater.from(parent.getContext())
.inflate(R.layout.recycler_section_header,
parent,
false);
}
/**
* Measures the header view to make sure its size is greater than 0 and will be drawn
* https://yoda.entelect.co.za/view/9627/how-to-Android-recyclerview-item-decorations
*/
private void fixLayoutSize(View view, ViewGroup parent) {
int widthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth(),
View.MeasureSpec.EXACTLY);
int heightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight(),
View.MeasureSpec.UNSPECIFIED);
int childWidth = ViewGroup.getChildMeasureSpec(widthSpec,
parent.getPaddingLeft() + parent.getPaddingRight(),
view.getLayoutParams().width);
int childHeight = ViewGroup.getChildMeasureSpec(heightSpec,
parent.getPaddingTop() + parent.getPaddingBottom(),
view.getLayoutParams().height);
view.measure(childWidth,
childHeight);
view.layout(0,
0,
view.getMeasuredWidth(),
view.getMeasuredHeight());
}
public interface SectionCallback {
boolean isSection(int position);
CharSequence getSectionHeader(int position);
}
}
XML pour votre en-tête dans recycler_section_header.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/list_item_section_text"
Android:layout_width="match_parent"
Android:layout_height="@dimen/recycler_section_header_height"
Android:background="@Android:color/black"
Android:paddingLeft="10dp"
Android:paddingRight="10dp"
Android:textColor="@Android:color/white"
Android:textSize="14sp"
/>
Et enfin, pour ajouter la décoration d’article à votre RecyclerView:
RecyclerSectionItemDecoration sectionItemDecoration =
new RecyclerSectionItemDecoration(getResources().getDimensionPixelSize(R.dimen.recycler_section_header_height),
true, // true for sticky, false for not
new RecyclerSectionItemDecoration.SectionCallback() {
@Override
public boolean isSection(int position) {
return position == 0
|| people.get(position)
.getLastName()
.charAt(0) != people.get(position - 1)
.getLastName()
.charAt(0);
}
@Override
public CharSequence getSectionHeader(int position) {
return people.get(position)
.getLastName()
.subSequence(0,
1);
}
});
recyclerView.addItemDecoration(sectionItemDecoration);
Avec cette décoration d’article, vous pouvez créer un en-tête épinglé/collant ou non avec un booléen lors de la création de la décoration d’article.
Vous pouvez trouver un exemple complet de travail sur github: https://github.com/paetztm/recycler_view_headers
J'ai fait ma propre variante de la solution de Sevastyan ci-dessus
class HeaderItemDecoration(recyclerView: RecyclerView, private val listener: StickyHeaderInterface) : RecyclerView.ItemDecoration() {
private val headerContainer = FrameLayout(recyclerView.context)
private var stickyHeaderHeight: Int = 0
private var currentHeader: View? = null
private var currentHeaderPosition = 0
init {
val layout = RelativeLayout(recyclerView.context)
val params = recyclerView.layoutParams
val parent = recyclerView.parent as ViewGroup
val index = parent.indexOfChild(recyclerView)
parent.addView(layout, index, params)
parent.removeView(recyclerView)
layout.addView(recyclerView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
layout.addView(headerContainer, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
}
override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDrawOver(c, parent, state)
val topChild = parent.getChildAt(0) ?: return
val topChildPosition = parent.getChildAdapterPosition(topChild)
if (topChildPosition == RecyclerView.NO_POSITION) {
return
}
val currentHeader = getHeaderViewForItem(topChildPosition, parent)
fixLayoutSize(parent, currentHeader)
val contactPoint = currentHeader.bottom
val childInContact = getChildInContact(parent, contactPoint) ?: return
val nextPosition = parent.getChildAdapterPosition(childInContact)
if (listener.isHeader(nextPosition)) {
moveHeader(currentHeader, childInContact, topChildPosition, nextPosition)
return
}
drawHeader(currentHeader, topChildPosition)
}
private fun getHeaderViewForItem(itemPosition: Int, parent: RecyclerView): View {
val headerPosition = listener.getHeaderPositionForItem(itemPosition)
val layoutResId = listener.getHeaderLayout(headerPosition)
val header = LayoutInflater.from(parent.context).inflate(layoutResId, parent, false)
listener.bindHeaderData(header, headerPosition)
return header
}
private fun drawHeader(header: View, position: Int) {
headerContainer.layoutParams.height = stickyHeaderHeight
setCurrentHeader(header, position)
}
private fun moveHeader(currentHead: View, nextHead: View, currentPos: Int, nextPos: Int) {
val marginTop = nextHead.top - currentHead.height
if (currentHeaderPosition == nextPos && currentPos != nextPos) setCurrentHeader(currentHead, currentPos)
val params = currentHeader?.layoutParams as? MarginLayoutParams ?: return
params.setMargins(0, marginTop, 0, 0)
currentHeader?.layoutParams = params
headerContainer.layoutParams.height = stickyHeaderHeight + marginTop
}
private fun setCurrentHeader(header: View, position: Int) {
currentHeader = header
currentHeaderPosition = position
headerContainer.removeAllViews()
headerContainer.addView(currentHeader)
}
private fun getChildInContact(parent: RecyclerView, contactPoint: Int): View? =
(0 until parent.childCount)
.map { parent.getChildAt(it) }
.firstOrNull { it.bottom > contactPoint && it.top <= contactPoint }
private fun fixLayoutSize(parent: ViewGroup, view: View) {
val widthSpec = View.MeasureSpec.makeMeasureSpec(parent.width, View.MeasureSpec.EXACTLY)
val heightSpec = View.MeasureSpec.makeMeasureSpec(parent.height, View.MeasureSpec.UNSPECIFIED)
val childWidthSpec = ViewGroup.getChildMeasureSpec(widthSpec,
parent.paddingLeft + parent.paddingRight,
view.layoutParams.width)
val childHeightSpec = ViewGroup.getChildMeasureSpec(heightSpec,
parent.paddingTop + parent.paddingBottom,
view.layoutParams.height)
view.measure(childWidthSpec, childHeightSpec)
stickyHeaderHeight = view.measuredHeight
view.layout(0, 0, view.measuredWidth, stickyHeaderHeight)
}
interface StickyHeaderInterface {
fun getHeaderPositionForItem(itemPosition: Int): Int
fun getHeaderLayout(headerPosition: Int): Int
fun bindHeaderData(header: View, headerPosition: Int)
fun isHeader(itemPosition: Int): Boolean
}
}
... et voici l'implémentation de StickyHeaderInterface (je l'ai fait directement dans l'adaptateur de recycleur):
override fun getHeaderPositionForItem(itemPosition: Int): Int =
(itemPosition downTo 0)
.map { Pair(isHeader(it), it) }
.firstOrNull { it.first }?.second ?: RecyclerView.NO_POSITION
override fun getHeaderLayout(headerPosition: Int): Int {
/* ...
return something like R.layout.view_header
or add conditions if you have different headers on different positions
... */
}
override fun bindHeaderData(header: View, headerPosition: Int) {
if (headerPosition == RecyclerView.NO_POSITION) header.layoutParams.height = 0
else /* ...
here you get your header and can change some data on it
... */
}
override fun isHeader(itemPosition: Int): Boolean {
/* ...
here have to be condition for checking - is item on this position header
... */
}
Ainsi, dans ce cas, l'en-tête ne consiste pas simplement à dessiner sur du canevas, mais à afficher avec sélecteur ou ondulation, clicklistener, etc.
Vous pouvez vérifier et prendre l'implémentation de la classe StickyHeaderHelper dans mon FlexibleAdapter project et l'adapter à votre cas d'utilisation.
Mais, je suggère d'utiliser la bibliothèque car elle simplifie et réorganise la manière dont vous implémentez d'habitude les adaptateurs pour RecyclerView: ne réinventez pas la roue.
Je dirais également que n'utilisez pas de bibliothèques Decorators ou obsolètes, ni que les bibliothèques ne font que 1 ou 3 choses, vous devrez fusionner vous-même les implémentations des autres bibliothèques.
Une autre solution, basée sur le listener de défilement. Les conditions initiales sont les mêmes que dans Réponse Sevastyan
RecyclerView recyclerView;
TextView tvTitle; //sticky header view
//... onCreate, initialize, etc...
public void bindList(List<Item> items) { //All data in adapter. Item - just interface for different item types
adapter = new YourAdapter(items);
recyclerView.setAdapter(adapter);
StickyHeaderViewManager<HeaderItem> stickyHeaderViewManager = new StickyHeaderViewManager<>(
tvTitle,
recyclerView,
HeaderItem.class, //HeaderItem - subclass of Item, used to detect headers in list
data -> { // bind function for sticky header view
tvTitle.setText(data.getTitle());
});
stickyHeaderViewManager.attach(items);
}
Mise en page pour ViewHolder et en-tête collant.
item_header.xml
<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/tv_title"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"/>
Mise en page pour RecyclerView
<FrameLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<Android.support.v7.widget.RecyclerView
Android:id="@+id/recycler_view"
Android:layout_width="match_parent"
Android:layout_height="match_parent"/>
<!--it can be any view, but order important, draw over recyclerView-->
<include
layout="@layout/item_header"/>
</FrameLayout>
Classe pour HeaderItem.
public class HeaderItem implements Item {
private String title;
public HeaderItem(String title) {
this.title = title;
}
public String getTitle() {
return title;
}
}
C'est tout usage. L'implémentation de l'adaptateur, ViewHolder et d'autres éléments ne nous intéresse pas.
public class StickyHeaderViewManager<T> {
@Nonnull
private View headerView;
@Nonnull
private RecyclerView recyclerView;
@Nonnull
private StickyHeaderViewWrapper<T> viewWrapper;
@Nonnull
private Class<T> headerDataClass;
private List<?> items;
public StickyHeaderViewManager(@Nonnull View headerView,
@Nonnull RecyclerView recyclerView,
@Nonnull Class<T> headerDataClass,
@Nonnull StickyHeaderViewWrapper<T> viewWrapper) {
this.headerView = headerView;
this.viewWrapper = viewWrapper;
this.recyclerView = recyclerView;
this.headerDataClass = headerDataClass;
}
public void attach(@Nonnull List<?> items) {
this.items = items;
if (ViewCompat.isLaidOut(headerView)) {
bindHeader(recyclerView);
} else {
headerView.post(() -> bindHeader(recyclerView));
}
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
bindHeader(recyclerView);
}
});
}
private void bindHeader(RecyclerView recyclerView) {
if (items.isEmpty()) {
headerView.setVisibility(View.GONE);
return;
} else {
headerView.setVisibility(View.VISIBLE);
}
View topView = recyclerView.getChildAt(0);
if (topView == null) {
return;
}
int topPosition = recyclerView.getChildAdapterPosition(topView);
if (!isValidPosition(topPosition)) {
return;
}
if (topPosition == 0 && topView.getTop() == recyclerView.getTop()) {
headerView.setVisibility(View.GONE);
return;
} else {
headerView.setVisibility(View.VISIBLE);
}
T stickyItem;
Object firstItem = items.get(topPosition);
if (headerDataClass.isInstance(firstItem)) {
stickyItem = headerDataClass.cast(firstItem);
headerView.setTranslationY(0);
} else {
stickyItem = findNearestHeader(topPosition);
int secondPosition = topPosition + 1;
if (isValidPosition(secondPosition)) {
Object secondItem = items.get(secondPosition);
if (headerDataClass.isInstance(secondItem)) {
View secondView = recyclerView.getChildAt(1);
if (secondView != null) {
moveViewFor(secondView);
}
} else {
headerView.setTranslationY(0);
}
}
}
if (stickyItem != null) {
viewWrapper.bindView(stickyItem);
}
}
private void moveViewFor(View secondView) {
if (secondView.getTop() <= headerView.getBottom()) {
headerView.setTranslationY(secondView.getTop() - headerView.getHeight());
} else {
headerView.setTranslationY(0);
}
}
private T findNearestHeader(int position) {
for (int i = position; position >= 0; i--) {
Object item = items.get(i);
if (headerDataClass.isInstance(item)) {
return headerDataClass.cast(item);
}
}
return null;
}
private boolean isValidPosition(int position) {
return !(position == RecyclerView.NO_POSITION || position >= items.size());
}
}
Interface pour la vue en-tête de liaison.
public interface StickyHeaderViewWrapper<T> {
void bindView(T data);
}
à quiconque cherche une solution au problème de scintillement/clignotement lorsque vous avez déjà DividerItemDecoration Je semble l'avoir résolu comme ça:
override fun onDrawOver(...)
{
//code from before
//do NOT return on null
val childInContact = getChildInContact(recyclerView, currentHeader.bottom)
//add null check
if (childInContact != null && mHeaderListener.isHeader(recyclerView.getChildAdapterPosition(childInContact)))
{
moveHeader(...)
return
}
drawHeader(...)
}
cela semble fonctionner, mais quelqu'un peut-il confirmer que je n'ai rien cassé d'autre?
Yo
Voici comment procéder si vous souhaitez utiliser un seul type de support lorsque vous commencez à sortir de l'écran (nous ne nous intéressons à aucune section). Il n'y a qu'un moyen de ne pas briser la logique interne de RecyclerView consistant à recycler les éléments: gonfler la vue supplémentaire par-dessus l'élément de l'en-tête de recyclerView et lui transmettre des données. Je laisserai le code parler.
import Android.graphics.Canvas
import Android.graphics.Rect
import Android.view.LayoutInflater
import Android.view.View
import Android.view.ViewGroup
import androidx.annotation.LayoutRes
import androidx.recyclerview.widget.RecyclerView
class StickyHeaderItemDecoration(@LayoutRes private val headerId: Int, private val HEADER_TYPE: Int) : RecyclerView.ItemDecoration() {
private lateinit var stickyHeaderView: View
private lateinit var headerView: View
private var sticked = false
// executes on each bind and sets the stickyHeaderView
override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
super.getItemOffsets(outRect, view, parent, state)
val position = parent.getChildAdapterPosition(view)
val adapter = parent.adapter ?: return
val viewType = adapter.getItemViewType(position)
if (viewType == HEADER_TYPE) {
headerView = view
}
}
override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDrawOver(c, parent, state)
if (::headerView.isInitialized) {
if (headerView.y <= 0 && !sticked) {
stickyHeaderView = createHeaderView(parent)
fixLayoutSize(parent, stickyHeaderView)
sticked = true
}
if (headerView.y > 0 && sticked) {
sticked = false
}
if (sticked) {
drawStickedHeader(c)
}
}
}
private fun createHeaderView(parent: RecyclerView) = LayoutInflater.from(parent.context).inflate(headerId, parent, false)
private fun drawStickedHeader(c: Canvas) {
c.save()
c.translate(0f, Math.max(0f, stickyHeaderView.top.toFloat() - stickyHeaderView.height.toFloat()))
headerView.draw(c)
c.restore()
}
private fun fixLayoutSize(parent: ViewGroup, view: View) {
// Specs for parent (RecyclerView)
val widthSpec = View.MeasureSpec.makeMeasureSpec(parent.width, View.MeasureSpec.EXACTLY)
val heightSpec = View.MeasureSpec.makeMeasureSpec(parent.height, View.MeasureSpec.UNSPECIFIED)
// Specs for children (headers)
val childWidthSpec = ViewGroup.getChildMeasureSpec(widthSpec, parent.paddingLeft + parent.paddingRight, view.getLayoutParams().width)
val childHeightSpec = ViewGroup.getChildMeasureSpec(heightSpec, parent.paddingTop + parent.paddingBottom, view.getLayoutParams().height)
view.measure(childWidthSpec, childHeightSpec)
view.layout(0, 0, view.measuredWidth, view.measuredHeight)
}
}
Et puis vous faites juste cela dans votre adaptateur:
override fun onAttachedToRecyclerView(recyclerView: RecyclerView) {
super.onAttachedToRecyclerView(recyclerView)
recyclerView.addItemDecoration(StickyHeaderItemDecoration(R.layout.item_time_filter, YOUR_STICKY_VIEW_HOLDER_TYPE))
}
Où YOUR_STICKY_VIEW_HOLDER_TYPE est le type de vue (viewType) de votre détenteur supposé collant.
La réponse a déjà été ici. Si vous ne souhaitez utiliser aucune bibliothèque, procédez comme suit:
- Liste de tri avec données par nom
- Itérer via liste avec données, et en place lorsque la première lettre de l'élément en cours! = Première lettre de l'élément suivant, insère le type d'objet "spécial".
- Dans votre adaptateur, placez une vue spéciale lorsque l'élément est "spécial".
Explication:
Dans la méthode onCreateViewHolder, nous pouvons vérifier viewType et, en fonction de la valeur (notre type "spécial"), gonfler une présentation spéciale.
Par exemple:
public static final int TITLE = 0;
public static final int ITEM = 1;
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (context == null) {
context = parent.getContext();
}
if (viewType == TITLE) {
view = LayoutInflater.from(context).inflate(R.layout.recycler_adapter_title, parent,false);
return new TitleElement(view);
} else if (viewType == ITEM) {
view = LayoutInflater.from(context).inflate(R.layout.recycler_adapter_item, parent,false);
return new ItemElement(view);
}
return null;
}
où class ItemElement et class TitleElement peuvent ressembler à l'ordinaire ViewHolder:
public class ItemElement extends RecyclerView.ViewHolder {
//TextView text;
public ItemElement(View view) {
super(view);
//text = (TextView) view.findViewById(R.id.text);
}
Donc, l'idée de tout cela est intéressante. Mais je suis intéressé si c'est efficace, car nous devons trier la liste de données. Et je pense que cela réduira la vitesse. Si vous avez des idées à ce sujet, écrivez-moi s'il vous plaît :)
Et aussi la question ouverte: comment tenir la mise en page "spéciale" sur le dessus, pendant que les articles sont recyclés. Peut-être que vous pouvez combiner tout cela avec CoordinatorLayout.
Pour ceux qui peuvent concerner. Sur la base de la réponse de Sevastyan, devriez-vous faire du défilement horizontal… .. Il suffit de changer tout getBottom() en getRight() et getTop() en getLeft()