ViewPager+下拉刷新ListView超强组合（实现360手机助手首页的效果）

转载请注明出处：http://blog.youkuaiyun.com/hello_chillax/article/details/45599215，谢谢~

想必大家都用过360手机助手，效果是不是很绚丽，其实很好实现喽。今天就来说一说怎么去实现喽~（PS：咱们是讲原理和思路，我这里是用的不是360助手的界面，懒得去扒那些图片喽，太懒，见谅~~）

首先，上图：

先看一下工程目录结构：

其中有两个包，第一个里面分别是：
Data：工程里面的数据，本来想用几个textview填充ListView的，最后感觉这样会效果好一点,米啥用~
MainActivity：不说了~
Model：LIstView的每个item我都抽象出一个model，
RollViewPager：大家也看到了，上面的那个ViewPager是会自己跳动的，为了实现这个效果，这里重写了ViewPager。

另外一个包则是下拉刷新，上拉加载的ListView，是一个开源的东东~GitHub上有~

这里重点说一下整个效果的思路：

其实PullToRefreshListView内部维护了一个普通的ListView，并且实现了上拉加载，下拉刷新效果。然后我们在此基础之上加了一个自动翻滚的ViewPager，就实现了上面的效果。

代码：

MainActivity.java：

//初始化View
private void initView() {
        ptrLV = (PullToRefreshListView) findViewById(R.id.ptr_lv);
        // 滚动到底自动加载可用
        ptrLV.setPullRefreshEnabled(true);
        // 下拉刷新可用
        ptrLV.setPullLoadEnabled(false);
        // 滚动到底自动加载可用
        ptrLV.setScrollLoadEnabled(true);
        // 得到实际的ListView并设置监听器：
        ptrLV.getRefreshableView().setOnItemClickListener(
                new OnItemClickListener() {

                    @Override
                    public void onItemClick(AdapterView<?> parent, View view,
                            int position, long id) {
                        Toast.makeText(MainActivity.this,
                                "您点击的是第 " + position + " 个条目~",
                                Toast.LENGTH_SHORT).show();
                    }
                });
        // 自定义adapter：
        ptrLV.getRefreshableView().setAdapter(new MyAdapter());
        // 获取header的一个视图：
        topView = (ViewGroup) getLayoutInflater().inflate(
                R.layout.layout_roll_view, null);
        // 设置圆点：
        dotsView = (LinearLayout) topView.findViewById(R.id.dots_ll);
        initDot(4);
        // 设置ListView的Header
        viewPager = new RollViewPager(this, dotList, R.drawable.dot_focus,
                R.drawable.dot_normal, new OnPagerClickCallback() {

                    @Override
                    public void onPagerClick(int position) {
                        Toast.makeText(MainActivity.this,
                                "您点击的是第 " + (position+1) + " 张图片~",
                                Toast.LENGTH_SHORT).show();
                    }
                });

        // 设置图片的路径
        int[] ids = new int[] { R.drawable.news_1, R.drawable.news_2,
                R.drawable.news_3, R.drawable.news_4 };
        viewPager.setResImageIds(ids);
        // 设置图片的标题
        ArrayList<String> list = new ArrayList<String>();
        list.add("我是第1标题~~");
        list.add("我是第2标题~~");
        list.add("我是第3标题~~");
        list.add("我是第4标题~~");
        viewPager.setTitle(
                (TextView) topView.findViewById(R.id.top_news_title), list);
        // 设置ViewPager开始转动
        viewPager.startRoll();
        pagerLy = (LinearLayout) topView.findViewById(R.id.top_news_viewpager);
        pagerLy.removeAllViews();
        pagerLy.addView(viewPager);
        // 添加header
        if (ptrLV.getRefreshableView().getHeaderViewsCount() < 1) {
            ptrLV.getRefreshableView().addHeaderView(topView);
        }
    }

    private void initDot(int size) {
        dotList = new ArrayList<View>();
        for (int i = 0; i < size; i++) {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    10, 10);
            params.setMargins(5, 0, 5, 0);
            View dot = new View(this);
            if (i == 0) {
                dot.setBackgroundResource(R.drawable.dot_focus);
            } else {
                dot.setBackgroundResource(R.drawable.dot_normal);
            }
            dot.setLayoutParams(params);
            dotList.add(dot);
            dotsView.addView(dot);
        }
    }

    class MyAdapter extends BaseAdapter {
        @Override
        public int getCount() {
            return dataList.size();
        }

        @Override
        public Object getItem(int position) {
            return dataList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder = new ViewHolder();
            if (convertView == null) {
                convertView = getLayoutInflater().inflate(
                        R.layout.list_item_stytle, null);
                convertView.setTag(holder);
                holder.user_image = (ImageView) convertView
                        .findViewById(R.id.user_image);
                holder.publish_user = (TextView) convertView
                        .findViewById(R.id.publish_user);
                holder.publish_at = (TextView) convertView
                        .findViewById(R.id.publish_at);
                holder.title = (TextView) convertView.findViewById(R.id.title);
                holder.body = (TextView) convertView.findViewById(R.id.body);
                holder.mark = (TextView) convertView.findViewById(R.id.mark);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            Model post = dataList.get(position);
            holder.user_image.setImageResource(post.image_path);
            holder.publish_user.setText(post.publish_user);
            holder.publish_at.setText(post.publish_at);
            holder.mark.setText(post.mark);
            holder.title.setText(post.title);
            holder.body.setText(post.body);
            return convertView;
        }

    }

    public final class ViewHolder {
        public ImageView user_image;
        public TextView publish_user;
        public TextView publish_at;
        public TextView mark;
        public TextView title;
        public TextView body;
    }

主要的布局：

<com.qianlong.android.view.pullrefreshview.PullToRefreshListView 
        android:id="@+id/ptr_lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

恩 简单~

其实不难喽，还是不懂的可以参考本例的代码，我会给出Demo的下载地址

Demo地址：http://download.youkuaiyun.com/detail/hello_chillax/8686921

写得比较简单，不懂的地方请留言~