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>

代码的实现效果：