需求
需要在APP中添加历史记录查看功能，历史记录包含:
- 上传的图像（Img）
- 返回的图像结果（Img）
- 上传图像的时间（Date）
- 返回的图像评价结果（String）
思路
由于历史记录的条数可能比较多，所以希望能实现类似于微信的界面
即一页中存在若干条子项，可以滑动下拉，也可以点开查看某一条具体内容
于是整个工作可以分为：
- 实现可以滑动下拉的页面
- 可滑动的页面中，添加若干子项（预期中希望是动态添加，而非提前写死）
- 绑定点击事件，实现具体查看某一子项
搭建过程1：实现可以滑动下拉的页面
需求明确了，就可以一步一步来了。我们总共创建了三个xml：
- 一个是history_check.xml
用来作为最终的显示界面 - 一个是history_item.xml界面
用来存储单条的历史信息 - 一个是history_display.xml界面
用来存储的是，点开查看某一子项的时候的界面
history_check界面很简单
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport= "true" >
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text"
android:id="@+id/history_list" >
</ListView>
</ScrollView>
说白了就是一个ScrollView里面嵌套一个ListView。ScrollView的用途是让这个页面可以上下滑动。ListView则是为了将内部数据像列表一样逐条显示使用
注意我们这里的滑动页面的高度是match_parent，这样才可以充满整个屏幕
而ListView的高度是wrap_content，这是为了不会覆盖显示
搭建过程2：创建子项
我们仿照的是微信的样子，用一个简单的示意图来表达
image.png
首先是左边一个小图（后续会修改成缩略图），右侧上方时名字，下方是文件上传时间（例子里这个时间我是随便搞的大家也不要太在意）
同样是很简单的xml布局
这里的height也尽量采用wrap_content，采用match_parent的话可能导致只显示一项
android:descendantFocusability="blocksDescendants"的意思是，点击时直接作用在子元件上而非顶层
<?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:descendantFocusability="blocksDescendants"
android:id="@+id/history_item">
<ImageView
android:id="@+id/history_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
/>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="35dp"
android:orientation="vertical"
android:layout_margin="5dp"
>
<TextView
android:id="@+id/history_name"
android:layout_width="match_parent"
android:layout_height="20dp"
/>
<TextView
android:id="@+id/history_time"
android:layout_width="match_parent"
android:layout_height="15dp"
/>
</LinearLayout>
</LinearLayout>
左边一个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<HistoryLog> 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<HistoryLog> historyItemsList;
private LayoutInflater inflater;
public MyAdapter() {
}
public MyAdapter(List<HistoryLog> 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
参考资料
-
《Android--UI之ScrollView》
这里采用的是静态写死的布局，仅作为ScrollView使用的参考 -
《Android的ScrollView简单使用实例(附Demo)》
ScrollView具体参考，讲的还蛮细致的 -
《Android 实现数据的列表显示》
提供了我采用Adapter自定义的思路 -
《ListView和Adapter数据适配器的简单介绍》
非常好的BaseAdapter使用指导
网友评论