Android如何實現Recycleview懸浮粘性頭部外加右側字母導航

這篇文章主要介紹Android如何實現Recycleview懸浮粘性頭部外加右側字母導航，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

實現思路：

右側的聯動可以用recycyeview中adapter的scrollToPositionWithOffset方法實現。左側就是recycleview，后臺返回的城市數據是這種類型的:

復制代碼 代碼如下:

{"returnCode":1,"returnMsg":"操作成功","data":[{"startWord":"A","trainCityList":[{"cityId":531,"cityName":"昂昂溪","code":null},{"cityId":2137,

我進行了一層封裝

1.建立實體類用來封裝下標和城市名字:

public class ContactModel { private String index; private String name; public ContactModel(String name){  this.index = NewFirstLetterUtil.getFirstLetter(name);  this.name = name; } public String getIndex() {  return index; } public String getName() {  return name; } }

2.講服務器返回的數據進行封裝：

List<ContactModel> contacts = new ArrayList<>();   for (int i=0;i<mTrainCityList.size();i++){   // ContactModel contactModel = new ContactModel(mTrainCityList.get(i).getCityName());   contacts.add(new ContactModel(mTrainCityList.get(i).getCityName()));   Collections.sort(contacts, new LetterComparator());     }    mContactModels.addAll(contacts);    mShowModels.addAll(mContactModels);

3.設置適配器

private void setNewAdapter() {   ContactsAdapter mAdapter = new ContactsAdapter(mShowModels);   mMainRecycleview.setLayoutManager(new LinearLayoutManager(this));   final StickyRecyclerHeadersDecoration headersDecor = new StickyRecyclerHeadersDecoration(mAdapter);   mMainRecycleview.addItemDecoration(headersDecor);   mAdapter.setOnItemClickListtener(new ContactsAdapter.OnItemClickListtener() {    @Override    public void onItemClick(int pos) {     // Toast.makeText(TrainNewStartActivity.this,"惦記的pos:"+pos+"數據:"+mShowModels.get(pos).getName(),Toast.LENGTH_SHORT).show();     Intent intent = new Intent();     intent.putExtra("data", mShowModels.get(pos).getName());     Log.d("lwp","data:"+mShowModels.get(pos).getName());     setResult(RESULT_OK, intent);     finish();    }   });   mMainRecycleview.setAdapter(mAdapter);   mMain_side_bar.setLazyRespond(false);   // 側邊設置相關   mMain_side_bar.setOnSelectIndexItemListener(new WaveSideBarView.OnSelectIndexItemListener() {    @Override    public void onSelectIndexItem(String letter) {     for (int i = 0; i< mContactModels.size(); i++) {      if (mContactModels.get(i).getIndex().equals(letter)) {       ((LinearLayoutManager) mMainRecycleview.getLayoutManager()).scrollToPositionWithOffset(i, 0);       return;      }     }    }   });}

4.適配器代碼:

public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.ContactsViewHolder> implements StickyRecyclerHeadersAdapter { private List<ContactModel> contacts; private static final String TAG = "ContactsAdapter"; private ContactModel contact; public ContactsAdapter(List<ContactModel> contacts) {  this.contacts = contacts; } @Override public ContactsViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  LayoutInflater inflater = LayoutInflater.from(parent.getContext());  View view = inflater.inflate(R.layout.layaout_item_contacts, null);  return new ContactsViewHolder(view); } @Override public void onBindViewHolder(ContactsViewHolder holder, final int position) {  contact = contacts.get(position);  Log.e(TAG, "onBindViewHolder: index:" + contact.getIndex());  if (position == 0 || !contacts.get(position-1).getIndex().equals(contact.getIndex())) {   holder.tvIndex.setVisibility(View.GONE);   holder.tvIndex.setText(contact.getIndex());  } else {   holder.tvIndex.setVisibility(View.GONE);  }  holder.tvName.setText(contact.getName());  holder.tvName.setOnClickListener(new View.OnClickListener() {   @Override   public void onClick(View v) {    Log.d("lwp","惦記的pos:"+position);    onItemClickListtener.onItemClick(position);   }  }); } public interface OnItemClickListtener{  void onItemClick(int pos); } public OnItemClickListtener onItemClickListtener; public void setOnItemClickListtener(OnItemClickListtener onItemClickListtener) {  this.onItemClickListtener = onItemClickListtener; } @Override public long getHeaderId(int position) {  if (contacts.get(position).getIndex().equals("A")){   return 0;  }else if (contacts.get(position).getIndex().equals("B")){   return 1;  }else if (contacts.get(position).getIndex().equals("C")){   return 2;  }else if (contacts.get(position).getIndex().equals("D")){   return 3;  }else if (contacts.get(position).getIndex().equals("E")){   return 4;  }else if (contacts.get(position).getIndex().equals("F")){   return 5;  }else if (contacts.get(position).getIndex().equals("G")){   return 6;  }else if (contacts.get(position).getIndex().equals("H")){   return 7;  }else if (contacts.get(position).getIndex().equals("I")){   return 8;  }else if (contacts.get(position).getIndex().equals("J")){   return 9;  }else if (contacts.get(position).getIndex().equals("K")){   return 10;  }else if (contacts.get(position).getIndex().equals("L")){   return 11;  }else if (contacts.get(position).getIndex().equals("M")){   return 12;  }else if (contacts.get(position).getIndex().equals("N")){   return 13;  }else if (contacts.get(position).getIndex().equals("O")){   return 14;  }else if (contacts.get(position).getIndex().equals("P")){   return 15;  }else if (contacts.get(position).getIndex().equals("Q")){   return 16;  }else if (contacts.get(position).getIndex().equals("R")){   return 17;  }else if (contacts.get(position).getIndex().equals("S")){   return 18;  }else if (contacts.get(position).getIndex().equals("T")){   return 19;  }else if (contacts.get(position).getIndex().equals("U")){   return 20;  }else if (contacts.get(position).getIndex().equals("V")){   return 21;  }else if (contacts.get(position).getIndex().equals("Y")){   return 22;  }else if (contacts.get(position).getIndex().equals("X")){   return 23;  }else if (contacts.get(position).getIndex().equals("Y")){   return 24;  }else if (contacts.get(position).getIndex().equals("Z")){   return 25;  }else {   return -1;  } } @Override public RecyclerView.ViewHolder onCreateHeaderViewHolder(ViewGroup parent) {  View view = LayoutInflater.from(parent.getContext())    .inflate(R.layout.view_header, parent, false);  return new RecyclerView.ViewHolder(view) {  }; } @Override public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder, int position) {  TextView textView = (TextView) holder.itemView;  textView.setText(String.valueOf(contacts.get(position).getIndex())); } @Override public int getItemCount() {  return contacts.size(); } class ContactsViewHolder extends RecyclerView.ViewHolder {  TextView tvIndex;  ImageView ivAvatar;  TextView tvName;  ContactsViewHolder(View itemView) {   super(itemView);   tvIndex = (TextView) itemView.findViewById(R.id.tv_index);   ivAvatar = (ImageView) itemView.findViewById(R.id.iv_avatar);   tvName = (TextView) itemView.findViewById(R.id.tv_name);  } }}

5.兩個布局文件:

layaout_item_contacts.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView  android:id="@+id/tv_index"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:paddingLeft="12dp"  android:text="A"  android:textSize="14sp"  android:background="#E0E0E0"/> <RelativeLayout  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:background="?android:attr/selectableItemBackground">  <ImageView   android:id="@+id/iv_avatar"   android:layout_width="40dp"   android:layout_height="40dp"   android:visibility="gone"   android:layout_margin="10dp"   />  <TextView   android:id="@+id/tv_name"   android:layout_marginLeft="12dp"   android:layout_width="wrap_content"   android:layout_height="34dp"   android:layout_toRightOf="@+id/iv_avatar"   android:text="南塵"   android:gravity="center_vertical"   android:textColor="#424242"   android:textSize="16sp"   android:layout_centerVertical="true" /> </RelativeLayout> <View  android:layout_width="match_parent"  android:layout_height="1dp"  android:layout_marginLeft="15dp"  android:background="#e8e8e8" /></LinearLayout>

view_header.xml:

<?xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="12dp" android:textSize="14sp" android:textStyle="bold" android:background="#E0E0E0" tools:text="Animals starting with A" />

采用的第三方:

compile 'com.github.nanchen2251:WaveSideBar:1.0.6'compile 'com.timehop.stickyheadersrecyclerview:library:0.4.3@aar'

右側字母用的是wavesidebar，但是由于不太符合設計圖，所有我沒有用他的，而是自己拿過來重新定義了（該類沒提供修改，建議完善），如下：

public class SlfWaveSlideBarView extends View { private final static int DEFAULT_TEXT_SIZE = 14; // sp private final static int DEFAULT_MAX_OFFSET = 80; //dp private final static String[] DEFAULT_INDEX_ITEMS = {"A", "B", "C", "D", "E", "F", "G", "H", "I",   "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"}; private String[] mIndexItems; /**  * the index in {@link #mIndexItems} of the current selected index item,  * it's reset to -1 when the finger up  */ private int mCurrentIndex = -1; /**  * Y coordinate of the point where finger is touching,  * the baseline is top of {@link #mStartTouchingArea}  * it's reset to -1 when the finger up  */ private float mCurrentY = -1; private Paint mPaint; private int mTextColor; private float mTextSize; /**  * the height of each index item  */ private float mIndexItemHeight; /**  * offset of the current selected index item  */ private float mMaxOffset; /**  * {@link #mStartTouching} will be set to true when {@link MotionEvent#ACTION_DOWN}  * happens in this area, and the side bar should start working.  */ private RectF mStartTouchingArea = new RectF(); /**  * height and width of {@link #mStartTouchingArea}  */ private float mBarHeight; private float mBarWidth; /**  * Flag that the finger is starting touching.  * If true, it means the {@link MotionEvent#ACTION_DOWN} happened but  * {@link MotionEvent#ACTION_UP} not yet.  */ private boolean mStartTouching = false; /**  * if true, the {@link WaveSideBarView.OnSelectIndexItemListener#onSelectIndexItem(String)}  * will not be called until the finger up.  * if false, it will be called when the finger down, up and move.  */ private boolean mLazyRespond = false; /**  * the position of the side bar, default is {@link #POSITION_RIGHT}.  * You can set it to {@link #POSITION_LEFT} for people who use phone with left hand.  */ private int mSideBarPosition; public static final int POSITION_RIGHT = 0; public static final int POSITION_LEFT = 1; /**  * the alignment of items, default is {@link #TEXT_ALIGN_CENTER}.  */ private int mTextAlignment; public static final int TEXT_ALIGN_CENTER = 0; public static final int TEXT_ALIGN_LEFT = 1; public static final int TEXT_ALIGN_RIGHT = 2; /**  * observe the current selected index item  */ private WaveSideBarView.OnSelectIndexItemListener onSelectIndexItemListener; /**  * the baseline of the first index item text to draw  */ private float mFirstItemBaseLineY; /**  * for {@link #dp2px(int)} and {@link #sp2px(int)}  */ private DisplayMetrics mDisplayMetrics; public SlfWaveSlideBarView(Context context) {  this(context, null); } public SlfWaveSlideBarView(Context context, AttributeSet attrs) {  this(context, attrs, 0); } public SlfWaveSlideBarView(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  mDisplayMetrics = context.getResources().getDisplayMetrics();  TypedArray typedArray = context.obtainStyledAttributes(attrs, com.nanchen.wavesidebar.R.styleable.WaveSideBarView);  mLazyRespond = typedArray.getBoolean(com.nanchen.wavesidebar.R.styleable.WaveSideBarView_sidebar_lazy_respond, false);  mTextColor = typedArray.getColor(com.nanchen.wavesidebar.R.styleable.WaveSideBarView_sidebar_text_color, Color.GRAY);  mMaxOffset = typedArray.getDimension(com.nanchen.wavesidebar.R.styleable.WaveSideBarView_sidebar_max_offset, dp2px(DEFAULT_MAX_OFFSET));  mSideBarPosition = typedArray.getInt(com.nanchen.wavesidebar.R.styleable.WaveSideBarView_sidebar_position, POSITION_RIGHT);  mTextAlignment = typedArray.getInt(com.nanchen.wavesidebar.R.styleable.WaveSideBarView_sidebar_text_alignment, TEXT_ALIGN_CENTER);  typedArray.recycle();  mTextSize = sp2px(DEFAULT_TEXT_SIZE);  mIndexItems = DEFAULT_INDEX_ITEMS;  initPaint(); } private void initPaint() {  mPaint = new Paint();  mPaint.setAntiAlias(true);  mPaint.setColor(mTextColor);  mPaint.setTextSize(mTextSize);  switch (mTextAlignment) {   case TEXT_ALIGN_CENTER: mPaint.setTextAlign(Paint.Align.CENTER); break;   case TEXT_ALIGN_LEFT: mPaint.setTextAlign(Paint.Align.LEFT); break;   case TEXT_ALIGN_RIGHT: mPaint.setTextAlign(Paint.Align.RIGHT); break;  } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  int height = MeasureSpec.getSize(heightMeasureSpec);  int width = MeasureSpec.getSize(widthMeasureSpec);  Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();  mIndexItemHeight = fontMetrics.bottom - fontMetrics.top;  mBarHeight = mIndexItems.length * mIndexItemHeight;  // calculate the width of the longest text as the width of side bar  for (String indexItem : mIndexItems) {   mBarWidth = Math.max(mBarWidth, mPaint.measureText(indexItem));  }  float areaLeft = (mSideBarPosition == POSITION_LEFT) ? 0 : (width - mBarWidth - getPaddingRight());  float areaRight = (mSideBarPosition == POSITION_LEFT) ? (getPaddingLeft() + areaLeft + mBarWidth) : width;  float areaTop = height/2 - mBarHeight/2;  float areaBottom = areaTop + mBarHeight;  mStartTouchingArea.set(    areaLeft,    areaTop,    areaRight,    areaBottom);  // the baseline Y of the first item' text to draw  mFirstItemBaseLineY = (height/2 - mIndexItems.length*mIndexItemHeight/2)    + (mIndexItemHeight/2 - (fontMetrics.descent-fontMetrics.ascent)/2)    - fontMetrics.ascent; } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  // draw each item  for (int i = 0, mIndexItemsLength = mIndexItems.length; i < mIndexItemsLength; i++) {   float baseLineY = mFirstItemBaseLineY + mIndexItemHeight*i;   // calculate the scale factor of the item to draw   float scale = getItemScale(i);   int alphaScale = (i == mCurrentIndex) ? (255) : (int) (255 * (1-scale));   mPaint.setAlpha(alphaScale);   mPaint.setTextSize(mTextSize + mTextSize*scale);   float baseLineX = 0f;   if (mSideBarPosition == POSITION_LEFT) {    switch (mTextAlignment) {     case TEXT_ALIGN_CENTER:      baseLineX = getPaddingLeft() + mBarWidth/2 + mMaxOffset*scale;      break;     case TEXT_ALIGN_LEFT:      baseLineX = getPaddingLeft() + mMaxOffset*scale;      break;     case TEXT_ALIGN_RIGHT:      baseLineX = getPaddingLeft() + mBarWidth + mMaxOffset*scale;      break;    }   } else {    switch (mTextAlignment) {     case TEXT_ALIGN_CENTER:      baseLineX = getWidth() - getPaddingRight() - mBarWidth/2 - mMaxOffset*scale;      break;     case TEXT_ALIGN_RIGHT:      baseLineX = getWidth() - getPaddingRight() - mMaxOffset*scale;      break;     case TEXT_ALIGN_LEFT:      baseLineX = getWidth() - getPaddingRight() - mBarWidth - mMaxOffset*scale;      break;    }   }   // draw   canvas.drawText(     mIndexItems[i], //item text to draw     baseLineX, //baseLine X     baseLineY, // baseLine Y     mPaint);  }  // reset paint  mPaint.setAlpha(255);  mPaint.setTextSize(mTextSize); } /**  * calculate the scale factor of the item to draw  *  * @param index the index of the item in array {@link #mIndexItems}  * @return the scale factor of the item to draw  */ private float getItemScale(int index) {  float scale = 0;  if (mCurrentIndex != -1) {   float distance = Math.abs(mCurrentY - (mIndexItemHeight*index+mIndexItemHeight/2)) / mIndexItemHeight;   scale = 1 - distance*distance/16;   scale = Math.max(scale, 0);  }  return scale; } @Override public boolean onTouchEvent(MotionEvent event) {  if (mIndexItems.length == 0) {   return super.onTouchEvent(event);  }  float eventY = event.getY();  float eventX = event.getX();  mCurrentIndex = getSelectedIndex(eventY);  switch (event.getAction()) {   case MotionEvent.ACTION_DOWN:    if (mStartTouchingArea.contains(eventX, eventY)) {     mStartTouching = true;     if (!mLazyRespond && onSelectIndexItemListener != null) {      onSelectIndexItemListener.onSelectIndexItem(mIndexItems[mCurrentIndex]);     }    //  invalidate();     return true;    } else {     mCurrentIndex = -1;     return false;    }   case MotionEvent.ACTION_MOVE:    if (mStartTouching && !mLazyRespond && onSelectIndexItemListener != null) {     onSelectIndexItemListener.onSelectIndexItem(mIndexItems[mCurrentIndex]);    }   //  invalidate();    return true;   case MotionEvent.ACTION_UP:   case MotionEvent.ACTION_CANCEL:    if (mLazyRespond && onSelectIndexItemListener != null) {     onSelectIndexItemListener.onSelectIndexItem(mIndexItems[mCurrentIndex]);    }    mCurrentIndex = -1;    mStartTouching = false;   //  invalidate();    return true;  }  return super.onTouchEvent(event); } private int getSelectedIndex(float eventY) {  mCurrentY = eventY - (getHeight()/2 - mBarHeight /2);  if (mCurrentY <= 0) {   return 0;  }  int index = (int) (mCurrentY / this.mIndexItemHeight);  if (index >= this.mIndexItems.length) {   index = this.mIndexItems.length - 1;  }  return index; } private float dp2px(int dp) {  return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, this.mDisplayMetrics); } private float sp2px(int sp) {  return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, this.mDisplayMetrics); } public void setIndexItems(String... indexItems) {  mIndexItems = Arrays.copyOf(indexItems, indexItems.length);  requestLayout(); } public void setTextColor(int color) {  mTextColor = color;  mPaint.setColor(color);  invalidate(); } public void setPosition(int position) {  if (position != POSITION_RIGHT && position != POSITION_LEFT) {   throw new IllegalArgumentException("the position must be POSITION_RIGHT or POSITION_LEFT");  }  mSideBarPosition = position;  requestLayout(); } public void setMaxOffset(int offset) {  mMaxOffset = offset;  invalidate(); } public void setLazyRespond(boolean lazyRespond) {  mLazyRespond = lazyRespond; } public void setTextAlign(int align) {  if (mTextAlignment == align) {   return;  }  switch (align) {   case TEXT_ALIGN_CENTER: mPaint.setTextAlign(Paint.Align.CENTER); break;   case TEXT_ALIGN_LEFT: mPaint.setTextAlign(Paint.Align.LEFT); break;   case TEXT_ALIGN_RIGHT: mPaint.setTextAlign(Paint.Align.RIGHT); break;   default:    throw new IllegalArgumentException(      "the alignment must be TEXT_ALIGN_CENTER, TEXT_ALIGN_LEFT or TEXT_ALIGN_RIGHT");  }  mTextAlignment = align;  invalidate(); } public void setOnSelectIndexItemListener(WaveSideBarView.OnSelectIndexItemListener onSelectIndexItemListener) {  this.onSelectIndexItemListener = onSelectIndexItemListener; } public interface OnSelectIndexItemListener {  void onSelectIndexItem(String letter); }}

以上是“Android如何實現Recycleview懸浮粘性頭部外加右側字母導航”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！