Android 演示 Android ListView 和 github XListView（3-3）

本文内容

• 环境
• 项目结构
• 演示 1：简单 XListView
• 演示 2：XListView + Fragment
• 演示 3：XListView + ViewPager + Fragment

本文三个演示，循序渐进。

• 演示 1 是 GitHub 上的 XListView 控件，具备“下拉更新”和“上拉加载”功能，使用它自己的示例；
• 演示 2 是将 XListView 控件封装到 Fragment 中，个人认为，这种封装在实际项目还是比较常用的；
• 演示 3 是进一步将 XListView 与 ViewPager 和 Fragment 相结合。也就是在演示 2 基础上，每个 ViewPager 的页都是 XListView 和 Fragment。

下载 Demo

更多 Demo

环境

---

• Windows 2008 R2 64 位
• Eclipse ADT V22.6.2，Android 4.4.2（API 19）
• SAMSUNG GT-8618，Android OS 4.1.2

项目结构

---

图 1 项目结构和主程序界面

演示 1：简单 XListView

---

这是 github 上的一个项目。本演示，只是简单说明它的功能。

图 2 演示 1

package com.wallace.xlistview.ui;

import java.util.ArrayList;

import com.wallace.xlistview.R;

import com.wallace.xlistview.widget.XListView;

import com.wallace.xlistview.widget.XListView.IXListViewListener;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.AdapterView.OnItemSelectedListener;

import android.widget.ArrayAdapter;

import android.widget.Toast;

public class XListSimpleActivity extends Activity implements IXListViewListener {

    private XListView mListView;

    private ArrayAdapter<String> mAdapter;

    private ArrayList<String> items = new ArrayList<String>();

    private Handler mHandler;

    private int start = 0;

    private static int refreshCnt = 0;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_simple);

        geneItems();

        initClass();

        initControl();

        initXList();

    }

    private void geneItems() {

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

            items.add("refresh cnt " + (++start));

        }

    }

    private void initClass() {

        mHandler = new Handler();

    }

    private void initControl() {

        mListView = (XListView) findViewById(R.id.xListView_a);

        mAdapter = new ArrayAdapter<String>(this, R.layout.xlist_simpleitem,

                items);

    }

    private void initXList() {

        mListView.setPullLoadEnable(true);

        mListView.setPullRefreshEnable(true);

        mListView.setAdapter(mAdapter);

        mListView.setXListViewListener(this);

        mListView.setOnItemClickListener(new OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView<?> parent, View view,

                    int position, long id) {

                Toast.makeText(getApplicationContext(), items.get(position),

                        Toast.LENGTH_SHORT).show();

            }

        });

        mListView.setOnItemSelectedListener(new OnItemSelectedListener() {

            @Override

            public void onItemSelected(AdapterView<?> parent, View view,

                    int position, long id) {

                Toast.makeText(getApplicationContext(), items.get(position),

                        Toast.LENGTH_SHORT).show();

            }

            @Override

            public void onNothingSelected(AdapterView<?> parent) {

            }

        });

    }

    private void onLoad() {

        mListView.stopRefresh();

        mListView.stopLoadMore();

        mListView.setRefreshTime("刚刚");

    }

    // Refresh

    @Override

    public void onRefresh() {

        mHandler.postDelayed(new Runnable() {

            @Override

            public void run() {

                start = ++refreshCnt;

                items.clear();

                geneItems();

                // mAdapter.notifyDataSetChanged();

                mAdapter = new ArrayAdapter<String>(XListSimpleActivity.this,

                        R.layout.xlist_simpleitem, items);

                mListView.setAdapter(mAdapter);

                onLoad();

            }

        }, 2000);

    }

    // LoadMore

    @Override

    public void onLoadMore() {

        mHandler.postDelayed(new Runnable() {

            @Override

            public void run() {

                geneItems();

                mAdapter.notifyDataSetChanged();

                onLoad();

            }

        }, 2000);

    }

}

演示 2：XListView + Fragment

---

接下来，我就在想，如何将 XListView 放到 Fragment 中，毕竟实际项目中，这种情况可能会多点，这样，就能将 Fragment 放到 FrameLayout 里。顺便把数据换成自己的。

图 3 演示 2

package com.wallace.xlistview.view;

import java.util.ArrayList;

import java.util.List;

import com.wallace.xlistview.R;

import com.wallace.xlistview.dao.MusicDao;

import com.wallace.xlistview.entity.MusicItemEntity;

import com.wallace.xlistview.utils.ImageLoader;

import com.wallace.xlistview.widget.XListView;

import com.wallace.xlistview.widget.XListView.IXListViewListener;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Context;

import android.os.AsyncTask;

import android.os.Bundle;

import android.os.Handler;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

@SuppressLint({ "ValidFragment", "HandlerLeak" })

public class MusicXListFragment extends Fragment implements IXListViewListener {

    protected List<MusicItemEntity> musics = null;

    private MusicDao musicDao;

    protected Activity mActivity;

    protected XListView listview;

    protected NewXListFragmentAdapter mAdapter;

    protected View view;

    public LayoutInflater mInflater;

    private Handler mHandler;

    public MusicXListFragment(Activity c, List<MusicItemEntity> list) {

        this.mActivity = c;

        if (list != null) {

            this.musics = list;

        }

    }

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        mHandler = new Handler();

        musicDao = new MusicDao(this.mActivity);

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

            Bundle savedInstanceState) {

        super.onCreateView(inflater, container, savedInstanceState);

        mInflater = inflater;

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

        listview = (XListView) view.findViewById(R.id.xListView_b);

        listview.setPullLoadEnable(true);

        listview.setPullRefreshEnable(true);

        listview.setXListViewListener(this);

        mAdapter = new NewXListFragmentAdapter(mActivity, this.musics);

        listview.setAdapter(mAdapter);

        return view;

    }

    @Override

    public void onSaveInstanceState(Bundle outState) {

        super.onSaveInstanceState(outState);

    }

    protected void onLoad() {

        listview.stopRefresh();

        listview.stopLoadMore();

        listview.setRefreshTime("刚刚");

    }

    /**

     * onRefresh

     */

    @Override

    public void onRefresh() {

        mHandler.postDelayed(new Runnable() {

            @Override

            public void run() {

                new MyTask().execute(musicDao);

                onLoad();

            }

        }, 2000);

    }

    /**

     * onLoadMore

     */

    @Override

    public void onLoadMore() {

        mHandler.postDelayed(new Runnable() {

            @Override

            public void run() {

                new MyTask().execute(musicDao);

                onLoad();

            }

        }, 2000);

    }

    class NewXListFragmentAdapter extends BaseAdapter {

        private Activity activity;

        private LayoutInflater inflater = null;

        public ImageLoader imageLoader;

        private List<MusicItemEntity> musics;

        public NewXListFragmentAdapter(List<MusicItemEntity> lists) {

            musics = lists;

            inflater = (LayoutInflater) activity

                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            imageLoader = new ImageLoader(activity.getApplicationContext());

        }

        public NewXListFragmentAdapter(Activity a, List<MusicItemEntity> lists) {

            activity = a;

            musics = lists;

            inflater = (LayoutInflater) activity

                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            imageLoader = new ImageLoader(activity.getApplicationContext());

        }

        public void appendToList(List<MusicItemEntity> lists) {

            if (lists == null) {

                return;

            }

            if (musics == null) {

                musics = new ArrayList<MusicItemEntity>();

            }

            musics.addAll(lists);

            notifyDataSetChanged();

        }

        public int getCount() {

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

        }

        public Object getItem(int position) {

            return position;

        }

        public long getItemId(int position) {

            return position;

        }

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

            View vi = convertView;

            if (convertView == null)

                vi = inflater.inflate(R.layout.xlist_row, null);

            MusicItemEntity song = null;

            ImageView image = (ImageView) vi.findViewById(R.id.imagethumb);

            TextView tvartist = (TextView) vi.findViewById(R.id.artist);

            TextView tvtitle = (TextView) vi.findViewById(R.id.title);

            TextView tvduration = (TextView) vi.findViewById(R.id.duration);

            song = musics.get(position);

            imageLoader.DisplayImage(song.getThumbUrl(), image);

            tvartist.setText(song.getArtist());

            tvtitle.setText(song.getTitle());

            tvduration.setText(song.getDuration());

            return vi;

        }

    }

    /**

     * MyTask

     */

    public class MyTask extends

            AsyncTask<MusicDao, String, List<MusicItemEntity>> {

        public MyTask() {

        }

        public MyTask(boolean useCache) {

        }

        @Override

        protected void onPreExecute() {

            super.onPreExecute();

        }

        @Override

        protected List<MusicItemEntity> doInBackground(MusicDao... params) {

            MusicDao dao = params[0];

            List<MusicItemEntity> list = dao.getMore();

            return list;

        }

        @Override

        protected void onPostExecute(List<MusicItemEntity> result) {

            // TODO Auto-generated method stub

            super.onPostExecute(result);

            mAdapter.appendToList(result);

            mAdapter.notifyDataSetChanged();

        }

    }

}

说明：当然，你也可以把 NewXListFragmentAdapter 类单独写成一个 .java 文件，这里只是为了演示方便，但是 Demo 里是独立的。

演示 3：XListView + ViewPager + Fragment

---

然后再想，在演示 2 基础上，每个 Fragment 如何变成 ViewPager 的一页。

图 4 演示 3

package com.wallace.xlistview.ui;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import com.wallace.xlistview.R;

//import com.wallace.xlistview.adapter.NewXListPageFragmentAdapter;

import com.wallace.xlistview.dao.MusicDao;

import com.wallace.xlistview.entity.CategorysEntity;

import com.wallace.xlistview.entity.MusicList;

import com.wallace.xlistview.view.HttpErrorFragment;

import com.wallace.xlistview.view.MusicXListFragment;

import android.app.Activity;

import android.os.AsyncTask;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentStatePagerAdapter;

import android.support.v4.view.PagerTabStrip;

import android.support.v4.view.ViewPager;

import android.util.Log;

import android.view.ViewGroup;

import android.view.Window;

public class XListPagerFragmentActivity extends FragmentActivity {

    private ViewPager mViewPager;

    private NewXListPageFragmentAdapter mBasePageAdapter;

    private PagerTabStrip mPagerTabStrip;

    private List<MusicList> categoryList;

    private MusicDao musicDao;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_viewpager);

        initClass();

        initControl();

        initViewPager();

    }

    private void initControl() {

        mViewPager = (ViewPager) findViewById(R.id.above_pager);

        mPagerTabStrip = (PagerTabStrip) findViewById(R.id.myPagerTabStrip);

    }

    private void initClass() {

        musicDao = new MusicDao(this);

        mBasePageAdapter = new NewXListPageFragmentAdapter(

                this.getSupportFragmentManager());

        mBasePageAdapter.setActvity(XListPagerFragmentActivity.this);

    }

    private void initViewPager() {

        mPagerTabStrip.setTabIndicatorColor(getResources()

                .getColor(R.color.red));

        mPagerTabStrip.setDrawFullUnderline(false);

        mPagerTabStrip.setBackgroundColor(getResources()

                .getColor(R.color.green));

        // mPagerTabStrip.setTextSpacing(50);

        mViewPager.setOffscreenPageLimit(0);

        mViewPager.setAdapter(mBasePageAdapter);

        new MyTask().execute(musicDao);

    }

    /* execute after killed */

    @Override

    public void onSaveInstanceState(Bundle outState) {

        super.onSaveInstanceState(outState);

    }

    class NewXListPageFragmentAdapter extends FragmentStatePagerAdapter {

        public ArrayList<Fragment> mFragments = new ArrayList<Fragment>();

        public List<CategorysEntity> tabs = new ArrayList<CategorysEntity>();

        private Activity mActivity;

        public NewXListPageFragmentAdapter(FragmentManager fragmentManager) {

            // TODO Auto-generated constructor stub

            super(fragmentManager);

        }

        public void setActvity(Activity a) {

            this.mActivity = a;

        }

        public void addFragment(List<CategorysEntity> mList,

                List<MusicList> listObject) {

            tabs.addAll(mList);

            for (int i = 0; i < listObject.size(); i++) {

                MusicList musics = listObject.get(i);

                addTab(new MusicXListFragment(mActivity, musics.getMusics()));

            }

        }

        /**

         * only load listview, donot include tabs

         * 

         * @param listObject

         */

        public void addFragment(List<MusicList> listObject) {

            for (int i = 0; i < listObject.size(); i++) {

                MusicList musics = listObject.get(i);

                addTab(new MusicXListFragment(mActivity, musics.getMusics()));

            }

        }

        public void addNullFragment() {

            CategorysEntity cate = new CategorysEntity();

            cate.setName("connect error");

            tabs.add(cate);

            addTab(new HttpErrorFragment());

        }

        public void Clear() {

            mFragments.clear();

            tabs.clear();

        }

        public void addTab(Fragment fragment) {

            mFragments.add(fragment);

            notifyDataSetChanged();

        }

        @Override

        public CharSequence getPageTitle(int position) {

            Log.d("vp-getPageTitle", tabs.get(position).getName());

            return tabs.get(position).getName();

        }

        @Override

        public Fragment getItem(int arg0) {

            Log.d("vp-getItem", String.format("%s", arg0));

            return mFragments.get(arg0);

        }

        // 初始化每个页卡选项

        @Override

        public Object instantiateItem(ViewGroup arg0, int position) {

            Log.d("vp-instantiateItem", String.format("%s", position));

            return super.instantiateItem(arg0, position);

        }

        @Override

        public int getCount() {

            Log.d("vp-instantiateItem", String.format("%s", mFragments.size()));

            return mFragments.size();

        }

        @Override

        public void destroyItem(ViewGroup container, int position, Object object) {

            // TODO Auto-generated method stub

            super.destroyItem(container, position, object);

        }

    }

    public class MyTask extends

            AsyncTask<MusicDao, String, Map<String, Object>> {

        public MyTask() {

        }

        public MyTask(boolean useCache) {

        }

        @Override

        protected void onPreExecute() {

            mViewPager.removeAllViews();

            mBasePageAdapter.Clear();

            super.onPreExecute();

        }

        @Override

        protected Map<String, Object> doInBackground(MusicDao... params) {

            MusicDao dao = params[0];

            List<CategorysEntity> categorys = new ArrayList<CategorysEntity>();

            Map<String, Object> map = new HashMap<String, Object>();

            if ((categoryList = dao.getClassEntity()) != null) {

                categorys = dao.getCategorys();

                map.put("tabs", categorys);

                map.put("list", categoryList);

            }

            return map;

            // return null;

        }

        @SuppressWarnings("unchecked")

        @Override

        protected void onPostExecute(Map<String, Object> result) {

            // TODO Auto-generated method stub

            super.onPostExecute(result);

            mBasePageAdapter.Clear();

            mViewPager.removeAllViews();

            if (result != null && !result.isEmpty()) {

                mBasePageAdapter.addFragment(

                        (List<CategorysEntity>) result.get("tabs"),

                        (List<MusicList>) result.get("list"));

            } else {

                mBasePageAdapter.addNullFragment();

            }

            mBasePageAdapter.notifyDataSetChanged();

            mViewPager.setCurrentItem(0);

        }

    }

}

说明：当然，你也可以把 NewXListPageFragmentAdapter 类单独写成一个 .java 文件，这里只是为了演示方便，但是 Demo 里是独立的。

注意：演示 3 是有问题的，不知道为什么 ViewPager 每页的名字显示不出来。

Android 演示 Android ListView 和 github XListView（1-3）

Android github XListView 分析（2-3）

下载 Demo