公司项目要实现这个效果：Android实现Recycleview悬浮粘性头部外加右侧字母导航
图一是开始的画面，图二是滑动的画面，点击右侧字母需要滑动左侧到指定位置，然后左侧的顶部字母A，B等需要悬浮。
实现思路：
右侧的联动可以用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悬浮粘性头部外加右侧字母导航
以上就上有关Android实现Recycleview悬浮粘性头部外加右侧字母导航的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。