十五、自定义联系人导航（中）---带悬停的联系人列表

比眉伴天荒 2022-09-25 07:21 179阅读 0赞

上一篇我们实现了首字母导航，滑动停止后跳转到相应的联系人分组：

mTextNavigationView.setNavigationListener(new TextNavigationView.NavigationListener() {
                @Override
                public void onSelect(String text) {
                    // 跳转到相应的名字分组
                    int position = NameUtil.nameInfos.size()-1;
                    for (int i=0; i<NameUtil.nameInfos.size(); i++) {
                        if (text.equals(NameUtil.nameInfos.get(i).getFirstPinyin())) {
                            position = i;
                            break;
                        }
                    }
                    mRecyclerView.scrollToPosition(position);
                }
            });

联系人列表我们用RecyclerView，要使用RecyclerView需要导入jar包：

compile 'com.android.support:recyclerview-v7:23.3.0'

在xml布局中使用RecyclerView，同时定义悬停的字母栏：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:keng="http://schemas.android.com/apk/res-auto"
        style="@style/match_match">
    
        <com.hy.keng.ui.view.TitleBarView
            style="@style/title_bar_view"
            keng:titleText="@string/contact" />
    
        <com.hy.keng.ui.view.EmptyView style="@style/empty_view" />
    
        <RelativeLayout
            style="@style/match_match"
            android:layout_below="@id/title_bar">
    
            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv_contact"
                style="@style/match_match" />
    
            <com.hy.keng.ui.view.TextNavigationView
                android:id="@+id/navigation"
                android:layout_width="25dp"
                android:layout_height="450dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true" />
    
            <include
                android:id="@+id/tv_contact_hover"
                layout="@layout/contact_sticky_header"
                style="@style/match_wrap" />
    
        </RelativeLayout>
    
    </RelativeLayout>

悬停栏和联系人分组的字母栏是一样的布局，使用时直接include：

<?xml version="1.0" encoding="utf-8"?>
    <TextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tv_contact_header"
        android:layout_width="match_parent"
        android:layout_height="@dimen/contact_header_item_height"
        android:background="@color/div_color"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/margin_default"
        android:text="头"
        android:textColor="@color/font_not_select"
        />

定义联系人RecyclerView的adapter：

public class ContactAdapter extends RecyclerView.Adapter<ContactAdapter.ContactViewHolder>{
    
        public static final int FIRST_STICKY_VIEW = 0; // 第一行
        public static final int HAS_STICKY_VIEW = 1; // 有头部字符
        public static final int NONE_STICKY_VIEW = 2; // 没有头部字符
    
        private List<NameInfo> nameInfos;
        private Context context;
    
        public ContactAdapter(List<NameInfo> nameInfos, Context context) {
            this.nameInfos = nameInfos;
            this.context = context;
        }
    
        @Override
        public ContactViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            return new ContactViewHolder(LayoutInflater.from(context).inflate(R.layout.contact_rv_item, parent, false));
        }
    
        @Override
        public void onBindViewHolder(ContactViewHolder holder, int position) {
            NameInfo nameInfo = nameInfos.get(position);
            if (position == 0) {
                // 第一行肯定要显示头部字母
                holder.headerTextView.setVisibility(View.VISIBLE);
                holder.headerTextView.setText(nameInfo.getFirstPinyin());
                holder.nameTextView.setText(nameInfo.getNickname());
                holder.headerImageView.setImageURI(UriUtil.parseUriOrNull(nameInfo.getHeadimg()));
                holder.itemView.setTag(FIRST_STICKY_VIEW);
            } else {
                if (!nameInfo.getFirstPinyin().equals(nameInfos.get(position-1).getFirstPinyin()) && StringUtil.isCapital(nameInfo.getFirstPinyin())) {
                    // 与上一行不相等且不是特殊字符要显示头部字母
                    holder.headerTextView.setVisibility(View.VISIBLE);
                    holder.headerTextView.setText(nameInfo.getFirstPinyin());
                    holder.nameTextView.setText(nameInfo.getNickname());
                    holder.headerImageView.setImageURI(UriUtil.parseUriOrNull(nameInfo.getHeadimg()));
                    holder.itemView.setTag(HAS_STICKY_VIEW);
                } else if (nameInfos.get(position-1).getFirstPinyin().equals("Z") && !StringUtil.isCapital(nameInfo.getFirstPinyin())) {
                    // 第一行特殊字符要显示头部字母"#"
                    holder.headerTextView.setVisibility(View.VISIBLE);
                    holder.headerTextView.setText("#");
                    holder.nameTextView.setText(nameInfo.getNickname());
                    holder.headerImageView.setImageURI(UriUtil.parseUriOrNull(nameInfo.getHeadimg()));
                    holder.itemView.setTag(HAS_STICKY_VIEW);
                } else {
                    // 不显示头部字母
                    holder.headerTextView.setVisibility(View.GONE);
                    holder.nameTextView.setText(nameInfo.getNickname());
                    holder.headerImageView.setImageURI(UriUtil.parseUriOrNull(nameInfo.getHeadimg()));
                    holder.itemView.setTag(NONE_STICKY_VIEW);
                }
            }
            holder.itemView.setContentDescription(nameInfo.getFirstPinyin());
        }
    
        @Override
        public int getItemCount() {
            return nameInfos.size();
        }
    
        class ContactViewHolder extends RecyclerView.ViewHolder {
            public TextView headerTextView;
            public TextView nameTextView;
            private SimpleDraweeView headerImageView;
    
            public ContactViewHolder(View itemView) {
                super(itemView);
                headerTextView = (TextView) itemView.findViewById(R.id.tv_contact_header);
                nameTextView = (TextView) itemView.findViewById(R.id.tv_contact_name);
                headerImageView = (SimpleDraweeView) itemView.findViewById(R.id.iv_contact_header);
            }
        }
    
    }

使用RecyclerView：

mRecyclerView = (RecyclerView) view.findViewById(R.id.rv_contact);
            mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
            mRecyclerView.setAdapter(new ContactAdapter(NameUtil.nameInfos, getActivity()));
            mRecyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() {
                @Override
                public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                    super.onScrolled(recyclerView, dx, dy);
    
                    View stickyInfoView = recyclerView.findChildViewUnder(mHoverTextView.getMeasuredWidth() / 2, 5);
                    if (stickyInfoView != null && stickyInfoView.getContentDescription() != null) {
                        mHoverTextView.setText(String.valueOf(stickyInfoView.getContentDescription()));
                    }
                    View transInfoView = recyclerView.findChildViewUnder(mHoverTextView.getMeasuredWidth() / 2, mHoverTextView.getMeasuredHeight() + 1);
                    if (transInfoView != null && transInfoView.getTag() != null) {
                        int transViewStatus = (int) transInfoView.getTag();
                        int dealtY = transInfoView.getTop() - mHoverTextView.getMeasuredHeight();
                        if (transViewStatus == ContactAdapter.HAS_STICKY_VIEW) {
                            if (transInfoView.getTop() > 0) {
                                mHoverTextView.setTranslationY(dealtY);
                            } else {
                                mHoverTextView.setTranslationY(0);
                            }
                        } else if (transViewStatus == ContactAdapter.NONE_STICKY_VIEW) {
                            mHoverTextView.setTranslationY(0);
                        }
                    }
                }
            });

动图太麻烦了，直接上一张图片 ![委屈][wronged.gif]

![Center][]

参考：

[http://blog.csdn.net/lmj623565791/article/details/45059587][http_blog.csdn.net_lmj623565791_article_details_45059587]

[http://blog.csdn.net/tyk0910/article/details/52066891?utm\_source=tuicool&utm\_medium=referral][http_blog.csdn.net_tyk0910_article_details_52066891_utm_source_tuicool_utm_medium_referral]

[wronged.gif]: /images/20220718/ff8ccd63a5b34a7a8f87fc162e22a585.png
[Center]: /images/20220718/f3bd85de1c5e4d1f9f129e1f6e0987f1.png
[http_blog.csdn.net_lmj623565791_article_details_45059587]: http://blog.csdn.net/lmj623565791/article/details/45059587
[http_blog.csdn.net_tyk0910_article_details_52066891_utm_source_tuicool_utm_medium_referral]: http://blog.csdn.net/tyk0910/article/details/52066891?utm_source=tuicool&utm_medium=referral