仿网易新闻的页面（ViewPager作为RecyclerView的Header）

来源：互联网发布：淘宝卖家客服电话热线编辑：程序博客网时间：2024/06/06 04:02

需求

>
想实现一个仿网易新闻的页面，上面是轮播的图片，下面是 RecyclerView 显示新闻列表。

本文链接 http://blog.csdn.net/never_cxb/article/details/50520270，转载请注明出处。

错误方法

<?xml version="1.0" encoding="utf-8"?><LinearLayout ...>    <ViewPager ... />    <android.support.v7.widget.RecyclerView .../></LinearLayout>

这样布局 ViewPager 在 RecyclerView 的上面，如果不做特殊处理，当下滑 RecyclerView 加载更多内容的时候，ViewPager会固定不动。

正确的效果是下滑加载更多的时候，ViewPager 会滑出页面，释放空间供其他内容展示。

解决思路

方法有两种

ViewPager作为 RecyclerView 的第0项，也就是 Header（本文采用该方法）
利用ScrollView，重写一些方法解决滑动冲突

总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">    <android.support.v7.widget.RecyclerView        android:id="@+id/rcv_article_latest"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" /></LinearLayout>

很简单，一个RecyclerView就行了

头部 ViewPager 的viewholder_article_header.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">    <!--ViewPager 热门文章图片展示-->    <FrameLayout        android:layout_width="match_parent"        android:layout_height="200dp"        android:background="@color/gray_light">        <android.support.v4.view.ViewPager            android:id="@+id/vp_hottest"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="@color/colorPrimary" />        <LinearLayout            android:id="@+id/ll_hottest_indicator"            android:layout_width="wrap_content"            android:layout_height="20dp"            android:layout_gravity="bottom|right"            android:layout_marginBottom="5dp"            android:layout_marginRight="10dp"            android:layout_marginTop="5dp"            android:gravity="center"            android:orientation="horizontal" />    </FrameLayout></LinearLayout>

FrameLayout里面的ViewPager和LinearLayout是覆盖显示的，实现在图片的下方有个小圆点标记滑动到了第一张图片。

新闻项 viewholder_article_item.xml 布局

<android.support.v7.widget.CardView    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:fresco="http://schemas.android.com/apk/res-auto"    android:id="@+id/cv_item"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:cardCornerRadius="5dp"    app:cardElevation="5dp"    app:contentPadding="2dp">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <com.facebook.drawee.view.SimpleDraweeView            android:id="@+id/rcv_article_photo"            android:layout_width="100dp"            android:layout_height="100dp"            fresco:actualImageScaleType="centerInside"            fresco:roundAsCircle="true"            fresco:roundingBorderColor="@color/lightslategray"            fresco:roundingBorderWidth="1dp" />        <LinearLayout            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:orientation="vertical">            <TextView                android:id="@+id/rcv_article_title"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="10dp"                android:layout_marginTop="2dp"                android:gravity="center"                android:text="关于举办《经典音乐作品欣赏与人文审美》讲座的通知"                android:textColor="@color/primary_text" />            <!-- 新闻 发布时间 来源 阅读次数-->            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="5dp"                android:gravity="center"                android:orientation="horizontal">                <TextView                    android:id="@+id/rcv_article_date"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="10dp"                    android:layout_marginRight="2dp"                    android:text="2015-01-09" />                <TextView                    android:id="@+id/rcv_article_source"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="2dp"                    android:layout_marginRight="2dp"                    android:text="科学研究院" />                <TextView                    android:id="@+id/rcv_article_readtimes"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="2dp"                    android:layout_marginRight="2dp"                    android:text="1129次" />            </LinearLayout>            <TextView                android:id="@+id/rcv_article_preview"                android:layout_width="wrap_content"                android:layout_height="0dp"                android:layout_weight="1"                android:layout_marginLeft="10dp"                android:layout_marginTop="5dp"                android:ellipsize="end"                android:maxLines="2"                android:text="讲座主要内容：以中、西方音乐历史中经典音乐作品为基础，通过作曲家及作品创作背景、相关音乐文化史知识及音乐欣赏常识..." />        </LinearLayout>    </LinearLayout></android.support.v7.widget.CardView>

这篇文章 Android Material Design学习之RecyclerView代替 ListView http://blog.csdn.net/never_cxb/article/details/50495505实现了不加 ViewPager，利用 RecyclerView 展示新闻列表的功能。

RecyclerView 的适配器

/** * 新闻列表的适配器 * 01-14 头部是 ViewPager，下面是列表新闻 * Created by tomchen on 1/11/16. */public class ArticleAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {    private static final int TYPE_HEADER = 0;    private static final int TYPE_ITEM = 1;    //头部固定为 张图片    private static final int NUM_IMAGE = 4;    //Handler 用到的参数值    private static final int UPTATE_VIEWPAGER = 0;    //新闻列表    private List<ItemArticle> articleList;    //设置当前 第几个图片 被选中    private int currentIndex = 0;    //context    private Context context;    private LayoutInflater mLayoutInflater;    private ImageView[] mCircleImages;//底部只是当前页面的小圆点    public ArticleAdapter(Context context, List<ItemArticle> articleList) {        this.context = context;        //头部viewpager图片固定是7张，剩下的是列表的数据        this.articleList = articleList;        mLayoutInflater = LayoutInflater.from(context);    }    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        //理论上应该把最可能返回的 TYPE 放在前面        View view = null;        if (viewType == TYPE_ITEM) {            view = mLayoutInflater.inflate(                    R.layout.viewholder_article_item, parent, false);            return new ItemArticleViewHolder(view);        }        //头部返回 ViewPager 实现的轮播图片        if (viewType == TYPE_HEADER) {            view = mLayoutInflater.inflate(                    R.layout.viewholder_article_header, parent, false);            return new HeaderArticleViewHolder(view);        }        return null;//        //可以抛出异常，没有对应的View类型//        throw new RuntimeException("there is no type that matches the type " + viewType + " + make sure your using types correctly");    }    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        if (holder instanceof ItemArticleViewHolder) {            //转型            ItemArticleViewHolder newHolder = (ItemArticleViewHolder) holder;            //注意RecyclerView第0项是 ViewPager 占据了0 1 2 3图片            //那么下面的列表展示是 RecyclerView 的第1项，从第4项开始            ItemArticle article = articleList.get(position + NUM_IMAGE - 1);            newHolder.rcvArticlePhoto.setImageURI(Uri.parse(article.getImageUrl()));            newHolder.rcvArticleTitle.setText(article.getTitle());            newHolder.rcvArticleDate.setText(article.getPublishDate());            newHolder.rcvArticleSource.setText(article.getSource());            //注意这个阅读次数是 int 类型，需要转化为 String 类型            newHolder.rcvArticleReadtimes.setText(article.getReadTimes() + "次");            newHolder.rcvArticlePreview.setText(article.getPreview());        } else if (holder instanceof HeaderArticleViewHolder) {            HeaderArticleViewHolder newHolder = (HeaderArticleViewHolder) holder;            List<ItemArticle> headers = articleList.subList(0, NUM_IMAGE );            HeaderImageAdapter imageAdapter = new HeaderImageAdapter(context, headers);            setUpViewPager(newHolder.vpHottest, newHolder.llHottestIndicator, headers);        }    }    private void setUpViewPager(final ViewPager vp, LinearLayout llBottom, final List<ItemArticle> headerArticles) {        HeaderImageAdapter imageAdapter = new HeaderImageAdapter(context, headerArticles);        //??这儿有些疑惑，Adapter 里面嵌套设置 Adapter 是否优雅？        vp.setAdapter(imageAdapter);        final Handler mHandler = new Handler() {            public void handleMessage(Message msg) {                switch (msg.what) {                    case UPTATE_VIEWPAGER:                        if (msg.arg1 != 0) {                            vp.setCurrentItem(msg.arg1);                        } else {                            //false 当从末页调到首页是，不显示翻页动画效果，                            vp.setCurrentItem(msg.arg1, false);                        }                        break;                }            }        };        //下面是设置动画切换的样式        vp.setPageTransformer(true, new RotateUpTransformer());        //创建底部指示位置的导航栏        final ImageView[] mCircleImages = new ImageView[headerArticles.size()];        for (int i = 0; i < mCircleImages.length; i++) {            ImageView imageView = new ImageView(context);            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);            params.setMargins(5, 0, 5, 0);            imageView.setLayoutParams(params);            if (i == 0) {                imageView.setBackgroundResource(R.drawable.indicator_select);            } else {                imageView.setBackgroundResource(R.drawable.indicator_not_select);            }            mCircleImages[i] = imageView;            //把指示作用的原点图片加入底部的视图中            llBottom.addView(mCircleImages[i]);        }        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            //图片左右滑动时候，将当前页的圆点图片设为选中状态            @Override            public void onPageSelected(int position) {                // 一定几个图片，几个圆点，但注意是从0开始的                int total = mCircleImages.length;                for (int j = 0; j < total; j++) {                    if (j == position) {                        mCircleImages[j].setBackgroundResource(R.drawable.indicator_select);                    } else {                        mCircleImages[j].setBackgroundResource(R.drawable.indicator_not_select);                    }                }                //设置全局变量，currentIndex为选中图标的 index                currentIndex = position;            }            @Override            public void onPageScrolled(int i, float v, int i1) {            }            @Override            public void onPageScrollStateChanged(int state) {                //实现切换到末尾后返回到第一张                switch (state) {                    // 手势滑动                    case ViewPager.SCROLL_STATE_DRAGGING:                        break;                    // 界面切换中                    case ViewPager.SCROLL_STATE_SETTLING:                        break;                    case ViewPager.SCROLL_STATE_IDLE:// 滑动结束，即切换完毕或者加载完毕                        // 当前为最后一张，此时从右向左滑，则切换到第一张                        if (vp.getCurrentItem() == vp.getAdapter()                                .getCount() - 1) {                            vp.setCurrentItem(0, false);                        }                        // 当前为第一张，此时从左向右滑，则切换到最后一张                        else if (vp.getCurrentItem() == 0) {                            vp.setCurrentItem(vp.getAdapter()                                    .getCount() - 1, false);                        }                        break;                    default:                        break;                }            }        });        //设置自动轮播图片，5s后执行，周期是5s        Timer timer = new Timer();        timer.schedule(new TimerTask() {            @Override            public void run() {                Message message = new Message();                message.what = UPTATE_VIEWPAGER;                if (currentIndex == headerArticles.size() - 1) {                    currentIndex = -1;                }                message.arg1 = currentIndex + 1;                mHandler.sendMessage(message);            }        }, 6000, 6000);    }    @Override    public int getItemCount() {        //因为多了一个头部，所以是+1,但是头部 ViewPager 占了7个        //所以实际是少了6个        return articleList.size() + 1 - NUM_IMAGE;    }    @Override    public int getItemViewType(int position) {        if (position == 0)            return TYPE_HEADER;        else            return TYPE_ITEM;    }    class HeaderArticleViewHolder extends RecyclerView.ViewHolder {        //轮播的最热新闻图片        @InjectView(R.id.vp_hottest)        ViewPager vpHottest;        //轮播图片下面的小圆点        @InjectView(R.id.ll_hottest_indicator)        LinearLayout llHottestIndicator;        //学院广播信息        @InjectView(R.id.tv_college_broadcast)        TextView tvCollegeBroadcast;        public HeaderArticleViewHolder(View itemView) {            super(itemView);            ButterKnife.inject(this, itemView);        }    }    class ItemArticleViewHolder extends RecyclerView.ViewHolder {        @InjectView(R.id.rcv_article_photo)        SimpleDraweeView rcvArticlePhoto;        @InjectView(R.id.rcv_article_title)        TextView rcvArticleTitle;        @InjectView(R.id.rcv_article_date)        TextView rcvArticleDate;        @InjectView(R.id.rcv_article_source)        TextView rcvArticleSource;        @InjectView(R.id.rcv_article_readtimes)        TextView rcvArticleReadtimes;        @InjectView(R.id.rcv_article_preview)        TextView rcvArticlePreview;        public ItemArticleViewHolder(View itemView) {            super(itemView);            ButterKnife.inject(this, itemView);        }    }}

ItemArticleViewHolder是列表展示的新闻项的 ViewHolder，对应了上面的 viewholder_article_item.xml。

HeaderArticleViewHolder 是头部 ViewPager 的 ViewHolder, 对应viewholder_article_header.xml

Note

本文上面的 ViewPager 轮播4幅图片，所以getItemCount()需要复写

List headers = articleList.subList(0, NUM_IMAGE );得到头部图片的数据

ItemArticle article = articleList.get(position + NUM_IMAGE - 1);得到下面新闻项的数据

getItemViewType(int position)根据position判断是不是头部ViewPager

onCreateViewHolder(ViewGroup parent, int viewType)根据viewType生成头部图片或者下面新闻项的ViewHolder

疑惑及后续计划

除了将 ViewPager 作为 RecyclerView 第一项，还有一张方法就是利用ScrollView，要复写一些方法，可以参考这篇文章
Doing it right: vertical ScrollView with ViewPager and ListViewhttps://pristalovpavel.wordpress.com/2014/12/26/doing-it-right-vertical-scrollview-with-viewpager-and-listview/

参考文章

Placing ViewPager as a row in ListView http://stackoverflow.com/questions/14920459/placing-viewpager-as-a-row-in-listview
ListView inside ViewPager inside ScrollViewhttp://stackoverflow.com/questions/23429151/listview-inside-viewpager-inside-scrollview
RecyclerView:实现带header的grid
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0722/3214.html

4 1