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