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

芮瑾瑜

2023-12-01

需求

>
想实现一个仿网易新闻的页面，上面是轮播的图片，下面是 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

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

需求

错误方法

解决思路

总xml布局

头部 ViewPager 的viewholder_article_header.xml布局

新闻项 viewholder_article_item.xml 布局

RecyclerView 的适配器

疑惑及后续计划

参考文章

相关阅读

相关文章

相关问答

相关文档