[Android] ScrollView实现历史记录显示

需求

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

  1. 上传的图像（Img）
  2. 返回的图像结果（Img）
  3. 上传图像的时间（Date）
  4. 返回的图像评价结果（String）

思路

由于历史记录的条数可能比较多，所以希望能实现类似于微信的界面
即一页中存在若干条子项，可以滑动下拉，也可以点开查看某一条具体内容

于是整个工作可以分为：

  1. 实现可以滑动下拉的页面
  2. 可滑动的页面中，添加若干子项（预期中希望是动态添加，而非提前写死）
  3. 绑定点击事件，实现具体查看某一子项

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

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

  1. 一个是history_check.xml
    用来作为最终的显示界面
  2. 一个是history_item.xml界面
    用来存储单条的历史信息
  3. 一个是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

参考资料

  1. 《Android--UI之ScrollView》
    这里采用的是静态写死的布局，仅作为ScrollView使用的参考

  2. 《Android的ScrollView简单使用实例(附Demo)》
    ScrollView具体参考，讲的还蛮细致的

  3. 《Android 实现数据的列表显示》
    提供了我采用Adapter自定义的思路

  4. 《ListView和Adapter数据适配器的简单介绍》
    非常好的BaseAdapter使用指导

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 221,548评论 6赞 515
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,497评论 3赞 399
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 167,990评论 0赞 360
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,618评论 1赞 296
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,618评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,246评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,819评论 3赞 421
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,725评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,268评论 1赞 320
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,356评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,488评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,181评论 5赞 350
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,862评论 3赞 333
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,331评论 0赞 24
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,445评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,897评论 3赞 376
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,500评论 2赞 359