zoukankan      html  css  js  c++  java
  • android 模仿大众点评团购卷列表多余3条时折叠,点击时显示剩余全部的功能

    要实现这样一个效果:加载一组数据,当这组数据的条数超过2条时,则这显示两条,其余的隐藏,当点击“展开全部时”在显示余下的部分。效果如下图所示:

    展开前的效果:

    展开后的效果

    实现思路:控制数据而不是控制界面。什么意思呢?当页面加载时,首先判断加载的数据是否大于2,如果小于等于2则直接显示,如果大于2则将前两条数据存入集合,并给adapter赋值,界面上就只会显示两条了,当点击展开全部时,将所有的数据填充到adapter中,并刷新adapter即可。

    下面是实现的主要代码:

    FlexibleListActivity.java
    package cn.yw.lib.flexible;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ListView;
    import android.widget.TextView;
    import cn.yw.lib.R;
    
    public class FlexibleListActivity extends Activity implements OnClickListener {
        private ListView listView;
        private TextView tv;
        private FlexibleAdapter adapter = null;
        private List<String> datas = new ArrayList<String>();
        private List<String> newDatas = new ArrayList<String>();
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.flexiblelistview_layout);
            intViews();
        }
        private void initDatas(){
            datas.add("小西点餐厅");
            datas.add("喜事蛋糕");
            datas.add("烤香肠");
            datas.add("火锅");
            datas.add("小笼包");
        }
        /**
         * 第一次加载数据时,如果数据超出3条则只显示前3条。
         * 点击下面的按钮显示全部。
         */
        private void firstLoad(){
            newDatas.addAll(datas.subList(0, 2));
    //        newDatas.subList(start, end)
        }
        private void intViews() {
            initDatas();//初始化数据
            firstLoad();//显示第一次要加载的数据
            listView = (ListView) findViewById(R.id.flexible_listview);
            adapter = new FlexibleAdapter();
            adapter.setList(newDatas);
            listView.setAdapter(adapter);
            tv = (TextView) findViewById(R.id.flexible_tv);
            tv.setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
            case R.id.flexible_tv:
                adapter.setList(datas);//显示所有数据
                adapter.notifyDataSetChanged();
                tv.setVisibility(View.GONE);
                break;
            }
        }
        /**
         * ListView适配器
         * @author tony
         *
         */
        class FlexibleAdapter extends BaseAdapter {
            private List<String> datas = new ArrayList<String>();
    
            public void setList(List<String> datas) {
                this.datas = datas;
            }
    
            @Override
            public int getCount() {
                return datas.size();
            }
    
            @Override
            public Object getItem(int arg0) {
                return datas.get(arg0);
            }
    
            @Override
            public long getItemId(int arg0) {
                return arg0;
            }
    
            @Override
            public View getView(int position, View convertView, ViewGroup arg2) {
                ViewHolder holder = null;
                if (convertView == null) {
                    convertView = LayoutInflater.from(FlexibleListActivity.this)
                            .inflate(R.layout.flexiblelistview_item, null);
                    holder = new ViewHolder();
                    holder.tv = (TextView) convertView
                            .findViewById(R.id.flexible_item_tv);
                    convertView.setTag(holder);
                } else {
                    holder = (ViewHolder) convertView.getTag();
                }
                holder.tv.setText(datas.get(position));
                return convertView;
            }
    
            class ViewHolder {
                TextView tv;
            }
        }
    }

    xml文件:

    <?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="match_parent"
        android:orientation="vertical" >
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
    
            <ListView
                android:id="@+id/flexible_listview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
            </ListView>
    
            <TextView
                android:id="@+id/flexible_tv"
                android:layout_width="fill_parent"
                android:gravity="center"
                android:layout_height="wrap_content"
                android:text="展开显示全部" />
        </LinearLayout>
    
    </LinearLayout>

    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="match_parent"
        android:orientation="vertical" >
        <TextView 
            android:id="@+id/flexible_item_tv"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:drawableLeft="@drawable/ic_launcher"
            android:layout_marginLeft="5dip"
            android:drawablePadding="10dip"
            />
    
    </LinearLayout>

    代码的实现效果:

  • 相关阅读:
    easyui datagrid 遇到的坑 cannot read property ·· pageNum bug and so on
    原生js上传图片时的预览
    yield的理解
    js时间格式化
    js 实现复制粘贴时注意方法中需要两次点击实现的bug
    jquery 页面分页的实现
    easyui dialog 表单提交,弹框初始化赋值,dialog实现
    a标签(普通标签如span)没有disabled属性 ,怎样利用js实现该属性
    js之数据类型(对象类型——构造器对象——数组2)
    js之数据类型(对象类型——构造器对象——数组1)
  • 原文地址:https://www.cnblogs.com/tony-yang-flutter/p/3757234.html
Copyright © 2011-2022 走看看