需求

需要在APP中添加历史记录查看功能，历史记录包含:

上传的图像(Img)

返回的图像结果(Img)

上传图像的时间(Date)

返回的图像评价结果(String)

思路

由于历史记录的条数可能比较多，所以希望能实现类似于微信的界面

即一页中存在若干条子项，可以滑动下拉，也可以点开查看某一条具体内容

于是整个工作可以分为：

实现可以滑动下拉的页面

可滑动的页面中，添加若干子项(预期中希望是动态添加，而非提前写死)

绑定点击事件，实现具体查看某一子项

搭建过程1：实现可以滑动下拉的页面

需求明确了，就可以一步一步来了。我们总共创建了三个xml：

一个是history_check.xml

用来作为最终的显示界面

一个是history_item.xml界面

用来存储单条的历史信息

一个是history_display.xml界面

用来存储的是，点开查看某一子项的时候的界面

history_check界面很简单

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fillViewport= "true" >

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/text"

android:id="@+id/history_list" >

说白了就是一个ScrollView里面嵌套一个ListView。ScrollView的用途是让这个页面可以上下滑动。ListView则是为了将内部数据像列表一样逐条显示使用

注意我们这里的滑动页面的高度是match_parent，这样才可以充满整个屏幕

而ListView的高度是wrap_content，这是为了不会覆盖显示

搭建过程2：创建子项

我们仿照的是微信的样子，用一个简单的示意图来表达

image.png

首先是左边一个小图(后续会修改成缩略图)，右侧上方时名字，下方是文件上传时间(例子里这个时间我是随便搞的大家也不要太在意)

同样是很简单的xml布局

这里的height也尽量采用wrap_content，采用match_parent的话可能导致只显示一项

android:descendantFocusability="blocksDescendants"的意思是，点击时直接作用在子元件上而非顶层

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:descendantFocusability="blocksDescendants"

android:id="@+id/history_item">

android:id="@+id/history_pic"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

/>

android:layout_weight="1"

android:layout_width="match_parent"

android:layout_height="35dp"

android:orientation="vertical"

android:layout_margin="5dp"

>

android:id="@+id/history_name"

android:layout_width="match_parent"

android:layout_height="20dp"

/>

android:id="@+id/history_time"

android:layout_width="match_parent"

android:layout_height="15dp"

/>

左边一个ImageView，右边一个多行表格，第一行Textview是名字，第二行Textview是time

搭建过程3：动态添加子项内容

我们这一段是放在Activity中实现的

读取本地文件->获取json信息->选出历史记录->装填入ArrayList中->自动生成多个子项

当然因为是简易版，所以就不用json了，直接人为的模拟添加内容并显示就行

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.history_check); // 绑定页面是过程1的显示页面

Log.d(TestLog, "Check History Activity");

ListView listView = (ListView) findViewById(R.id.history_list); // 找到对应的ListView控件

List historyList = new ArrayList<>(); // 创建一个用来最终生成子项队列的ArrayList

// 模拟生成20个子项(为什么是20个呢，因为这样内容比较多，可以体验滑动)

for(int i=0;i<20;i++){

HistoryLog his = new HistoryLog(R.mipmap.ic_launcher, "name" + i, i);

historyList.add(his);

}

Log.d(TestLog, "the history log has :" + historyList.size() + " items");

// 使用我们自定义的MyAdapter转换得到的子项队列，然后设置给listView显示

adapter = new MyAdapter(historyList, CheckHistoryActivity.this);

listView.setAdapter(adapter);

}

首先我们找到过程1设定的history_check页面，并创建一个用来保存子项的ArrayList

做好后，模拟添加20个子项(HistoryLog)

最后，用我们自定义的MyAdapter处理ArrayList，然后绑定给listView

过程中我们提到了两个没出现过的东西，一个是HistoryLog，另一个是MyAdapter

HistoryLog其实是方便我们管理历史记录所以新建的一个类，毕竟如果提前写死，忽然之间用户改了需求，一处处的寻找还是有些不方便的。

HistoryLog的具体代码：

package com.example.myapplication;

public class HistoryLog {

private int pic_num;

private String username;

private int date;

HistoryLog(int pic_num, String username, int date){

this.pic_num = pic_num;

this.username = username;

this.date = date;

}

public int getPicNum(){

return pic_num;

}

public String getUsername(){

return username;

}

public int getdate(){

return date;

}

}

很明显可以发现，HistoryLog其实就是存储一个封装好的结构体

搭建过程4：创建MyAdapter

public class MyAdapter extends BaseAdapter {

private List historyItemsList;

private LayoutInflater inflater;

public MyAdapter() {

}

public MyAdapter(List historyItemsList, Context context) {

this.historyItemsList = historyItemsList;

this.inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

public int getCount() {

return historyItemsList == null ? 0 : historyItemsList.size();

}

@Override

public HistoryLog getItem(int position) {

return historyItemsList.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

//加载布局为一个视图

View view = inflater.inflate(R.layout.history_items, null);

HistoryLog historyLog = getItem(position);

//在view视图中查找控件

ImageView image_photo = (ImageView) view.findViewById(R.id.history_pic);

TextView tv_name = (TextView) view.findViewById(R.id.history_name);

TextView tv_date = (TextView) view.findViewById(R.id.history_time);

View item = (View) view.findViewById(R.id.history_item);

image_photo.setImageResource(historyLog.getPicNum());

tv_name.setText(historyLog.getUsername());

tv_date.setText(String.valueOf(historyLog.getdate()));

item.setOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View v){

// 此处的内容在过程5

}

});

return view;

}

}

一边阅读代码，一边参考后方的参考资料。

其中比较重要的函数有getCount，用来获知有几个子项

getView，给每个子项设置内容/设定绑定事件

getItem，获得单个子项的内容

我们主要说明getView，首先我们绑定子项的布局文件，然后获得对应的具体data

然后通过view.findViewById，得到view中对应部件的指针(应该不能叫指针，一时之间想不起来java里面如何称呼了)

把data中相应的信息，绑定给view中对应的部件

最后，对其中的一个或多个部件，绑定点击事件(上文代码中对item绑定了事件，也就是当我们点击整个子项都会触发)

搭建过程5：创建绑定弹窗

这个部分就非常简单了，采用的是AlertDialog弹窗的形式，先再history_display.xml里面写好弹窗的布局，然后调用并设置每个部件的内容即可

item.setOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View v){

Log.d(TestLog, "onClick history item: photo" + tv_name.getText());

AlertDialog.Builder builder = new AlertDialog.Builder(CheckHistoryActivity.this);

LayoutInflater factory = LayoutInflater.from(CheckHistoryActivity.this);

View historyCheckView = factory.inflate(R.layout.history_display, null);

TextView dis_name = (TextView) historyCheckView.findViewById(R.id.history_dis_name);

TextView dis_time = (TextView) historyCheckView.findViewById(R.id.history_dis_time);

TextView dis_else = (TextView) historyCheckView.findViewById(R.id.history_dis_else);

ImageView dis_pic = (ImageView) historyCheckView.findViewById(R.id.history_dis_pic);

Log.d(TestLog, "init var");

dis_name.setText("The name is:" + tv_name.getText());

dis_time.setText("The time is:" + tv_date.getText());

dis_else.setText("LALALA,It is the " + tv_name.getText() + " history!");

Log.d(TestLog, "init hint over");

builder.setTitle("历史记录");

builder.setIcon(android.R.drawable.ic_dialog_info);

builder.setView(historyCheckView);

builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

dialog.dismiss();

}

});

builder.show();

}

});

最终效果：

image.png

参考资料