仿微信建群添加人员效果

在项目中需要实现一个类似于微信建群聊天，人员选择的效果，我们先来看下效果图：
仿微信建群添加人员效果

类似于这种效果，实现思路是使用RecycleView的多布局来实现这个效果，最后一个输入框添加在最后面。上具体代码：
选中结果显示RecycleView，当有值的时候使搜索icon隐藏，无值的时候显示出来就可以了

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/item_height"
    android:background="@drawable/bg_white_line"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingHorizontal="@dimen/padding_horizontal">

    <ImageView
        android:id="@+id/diagIvQuery"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:scaleType="center"
        android:src="@drawable/shishi_btn_search3x" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/diagRvSel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:overScrollMode="never"
        android:scrollbars="none" />
</LinearLayout>

RecycleView的Item布局分为两个，一个用来显示选中结果；另一个输入搜索条件：
显示选中结果：diagnosis_search_sel_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/diagSelTvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/gap_2"
        android:background="@drawable/shape_video_gray_msgcount"
        android:paddingHorizontal="@dimen/gap_10"
        android:paddingVertical="@dimen/gap_5"
        tools:text="诊断结果标签" />
</RelativeLayout>

显示输入条件的edittext布局：diagnosis_search_sel_footview.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <EditText
        android:id="@+id/diagItemEtQuery"
        style="@style/text_15_333333"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:background="@null"
        android:hint="搜索诊断术语"
        android:imeOptions="actionSearch"
        android:minEms="6"
        android:paddingHorizontal="@dimen/gap_10"
        android:paddingVertical="@dimen/gap_5"
        android:singleLine="true" />
</android.support.v7.widget.LinearLayoutCompat>

最重要的就是在Adapter中对多布局item的处理了

public class DiagSearchSelAdapter extends CommonAdapter4RV<DiagnosisBean> {
    private final int TYPE_NORMAL = 0;
    private final int TYPE_FOOT = 1;

    private View.OnClickListener etQueryClickListener;//条件输入框的点击监听事件
    private TextView.OnEditorActionListener etQueryOnEditorActionListener;//软键盘搜索按钮响应事件

    /**
     * 设置搜索点击监听事件
     *
     * @param etQueryClickListener
     */
    public void setEtQueryClickListener(View.OnClickListener etQueryClickListener) {
        this.etQueryClickListener = etQueryClickListener;
    }

    /**
     * 设置搜索响应软键盘确认事件
     *
     * @param etQueryOnEditorActionListener
     */
    public void setEtQueryOnEditorActionListener(TextView.OnEditorActionListener etQueryOnEditorActionListener) {
        this.etQueryOnEditorActionListener = etQueryOnEditorActionListener;
    }

    public DiagSearchSelAdapter(Context context, List<DiagnosisBean> lDatas) {
        super(context, lDatas);
    }

    @Override
    public int getItemCount() {
        return lDatas.size() + 1;
    }

    @Override
    public int getItemViewType(int position) {
        if (isNormalData(position)) {
            return TYPE_NORMAL;
        }
        return TYPE_FOOT;
    }

    @Override
    public int getLayoutId(int viewType) {
        if (TYPE_NORMAL == viewType) {
            return R.layout.diagnosis_search_sel_item;
        } else {
            return R.layout.diagnosis_search_sel_footview;
        }
    }

    /**
     * 判断是否是最后一条数据
     *
     * @param position
     * @return
     */
    private boolean isNormalData(int position) {
        return position < getItemCount() - 1;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        if (isNormalData(position)) {
            super.onBindViewHolder(holder, position);
        } else {
            holder.setItemPosition(position);
            delFootView(holder);
        }
    }

    @Override
    public void getItemView(ViewHolder holder, DiagnosisBean diagnosisBean) {
        holder.setText(R.id.diagSelTvTitle, diagnosisBean.getTitle());
    }

    /**
     * 处理查询框事件
     *
     * @param holder
     */
    private void delFootView(ViewHolder holder) {
        EditText etQuery = holder.getView(R.id.diagItemEtQuery);
        etQuery.setOnClickListener(etQueryClickListener);
        etQuery.setOnEditorActionListener(etQueryOnEditorActionListener);
    }
}

这里是实现这个效果的核心代码了，关于CommonAdapter4RV通用适配器的实现，去看鸿神博客吧！

仿微信建群添加人员效果

相关推荐