Android 搜索页-搜索历史条目动态添加（LinearLayout动态添加条目）

一、需求：

要记录用户的搜索历史，并动态的展现出来，每行展示两个条目，最多十条条目。效果图如下：

大概的效果展示一下，其他优化的地方这里暂不做处理（如：单个条目的背景优化，条目的选择状态UI优化等）

二、思路：

布局中维护一个LinearLayout，根据条目个数判断行数，根据行数动态添加子LinearLayout，每行显示两个TextView，最后根据行数和每行条目显示位置来确定显示的数据。

三、布局：

01、布局

<LinearLayout
        android:id="@+id/ll_search_history_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical"
        android:visibility="gone">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="7dp"
            android:layout_marginBottom="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:text="搜索历史"
                android:textColor="#222222"
                android:textSize="@dimen/text_size_14" />

            <ImageView
                android:id="@+id/iv_delete_history"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentRight="true"
                android:layout_marginRight="12dp"
                android:background="@drawable/wrong" />
        </RelativeLayout>

        <LinearLayout
            android:id="@+id/ll_search_history"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:orientation="vertical" />

    </LinearLayout>

02、activity_search_item条目布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_search_text_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#222222"
            android:textSize="@dimen/text_size_14" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_search_text_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#222222"
            android:textSize="@dimen/text_size_14" />
    </LinearLayout>

</LinearLayout>

四、代码实现：

 /**
     * 搜索历史动态添加行，条目
     * @param searchLayout  父LinearLayout
     * @param list          搜索历史数据
     */
    private void setSearchDataLine(LinearLayout searchLayout, ArrayList<String> list) {
        searchLayout.removeAllViews();
        // 根据list大小判断显示的行数
        int lineNum = 0;
        if (list != null && list.size() > 0) {
            if (list.size() % 2 == 0) {
                lineNum = list.size() / 2;
            } else {
                lineNum = list.size() / 2 + 1;
            }
            // 遍历动态添加行LinearLayout
            for (int i = 0; i < lineNum; i++) {
                LinearLayout linearLayout = new LinearLayout(this);
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                linearLayout.setLayoutParams(params);
                // 添加每行的数据
                setSearchData(linearLayout, list, i);
                // 每行的LinearLayout添加到父LinearLayout
                searchLayout.addView(linearLayout);
            }
        }
    }

    /**
     * 添加每行数据
     * @param linearLayout  行LinearLayout
     * @param list          搜索历史数据集合
     * @param line          行号
     */
    private void setSearchData(LinearLayout linearLayout, final ArrayList<String> list, final int line) {
        linearLayout.removeAllViews();
        // 设置每行显示的条目个数，偶数时显示两个条目，奇数时只显示左侧条目
        int num = 0;
        if (list.size() % 2 == 0) {
            num = 2;
        } else {
            if (line == list.size() / 2) {
                num = 1;
            } else {
                num = 2;
            }
        }
        // 行显示view
        View view = LayoutInflater.from(this).inflate(R.layout.activity_search_item, null);
        TextView textOne = (TextView) view.findViewById(R.id.tv_search_text_one);
        TextView textTwo = (TextView) view.findViewById(R.id.tv_search_text_two);
        // 设置单个条目数据
        textOne.setText(list.get(line * 2));
        if (num == 2) {
            textTwo.setText(list.get(line * 2 + num - 1));
        }
        // 每个条目的点击事件
        textOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(SearchActivity.this, "====" + list.get(line * 2), Toast.LENGTH_SHORT).show();
            }
        });
        textTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(SearchActivity.this, "====" + list.get(line * 2 + 1), Toast.LENGTH_SHORT).show();
            }
        });

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        view.setLayoutParams(params);
        // view添加到行LinearLayout
        linearLayout.addView(view);
    }

五、留言：

功能实现逻辑比较好理解，就不做过多的解释，关键位置有相应的代码注释。看了其他app的搜索页面，对搜索历史的展示不尽相同，各有各的方式，大致的功能实现个人感觉都是通过LinearLayout的动态添加条目实现的。这是一种方式相对来说是比较简单的。

飞牛网App搜索历史的实现方式是每行动态添加条目，根据条目的长度来判断，每行的条目总长度大于屏幕宽度的时候另起一行添加数据。这种实现方式介绍的也挺多的，下面会介绍一下自己的实现方式。