RecyclerViewHeader+ViewFlipper仿淘

效果图

1、需要导入的包：

    //RecyclerView
    compile 'com.android.support:recyclerview-v7:23.1.0'
    //RecyclerViewHeader
    compile 'com.bartoszlipinski:recyclerviewheader2:2.0.1'

版本可以根据自己需要进行适当修改。

2、这用了个下拉刷新控件
内部嵌套的是RecyclerView、RecyclerViewHeader、ViewFlipper.

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipeRefreshLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/recyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:dividerHeight="2dp" />

                <com.bartoszlipinski.recyclerviewheader2.RecyclerViewHeader
                    android:id="@+id/recyclerView_header"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="68dp"
                            android:background="#FFF6F6F6"
                            android:orientation="horizontal"
                            android:paddingBottom="6dp"
                            android:paddingTop="10dp"
                            android:visibility="visible">

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="match_parent"
                                android:background="@color/white"
                                android:paddingBottom="10dp"
                                android:paddingLeft="6dp"
                                android:paddingTop="10dp"
                                android:src="@drawable/icon_viewfip_left" />

                            <ViewFlipper
                                android:id="@+id/vf"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:autoStart="true"
                                android:background="#ffffff"
                                android:flipInterval="3000"
                                android:inAnimation="@anim/anim_marquee_in"
                                android:outAnimation="@anim/anim_marquee_out" />
                        </LinearLayout>
                    </RelativeLayout>
                </com.bartoszlipinski.recyclerviewheader2.RecyclerViewHeader>

            </RelativeLayout>
        </android.support.v4.widget.SwipeRefreshLayout>

这里有两个坑需要注意：

• 给recyclerview添加Header的时候，注意RecyclerView的父布局只能是RelativeLayout、LinearLayout、和FrameLayout中的其中一种，否则会添加失败。建议使用RelativeLayout
• 在activity中动态添加flipper数据的时候，不要放在下拉刷新的监听控件里，否则会造成滚动布局重叠的bug。

3、如果想实现轮播时的效果，需要加上

android:inAnimation="@anim/anim_marquee_in"
android:outAnimation="@anim/anim_marquee_out" />

anim_marquee_in:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
</set>

anim_marquee_out:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>

</set>

4、添加header，给ViewFlipper添加数据

    /*添加header*/
    private void initHeader() {
        //开始滚动
        vf.startFlipping();
        View view = View.inflate(this, R.layout.item_viewflipper, null);
        TextView tv = (TextView) view.findViewById(R.id.item_viewfip_tv);
        tv.setText("新鲜水果限时开抢新鲜水果限时开抢新鲜水果限时开抢新鲜水果限时开抢新鲜水果限时开抢新鲜水果限时开抢！");
        //添加View
        vf.addView(view);
        //添加header
        recyclerViewHeader.attachTo(recyclerView);
    }

item的布局
item_viewflipper：

<?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:padding="8dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">


    <TextView
        android:layout_width="34dp"
        android:layout_height="wrap_content"
        android:text="活动"
        android:gravity="center_horizontal"
        android:background="@drawable/item_viewfip_shape"
        android:textColor="#F14C00"
        android:textSize="10sp" />

    <TextView
        android:id="@+id/item_viewfip_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:layout_marginLeft="6dp"
        android:textColor="#FF333333"
        android:textSize="14sp" />

</LinearLayout>

其实就两行代码就可以实现效果。
但是只有一个view，要想添加多个view实现多条数据滚动的话需要创建多个view，然后分别add。
这样的弊端是：固定死的view数量，有时候实际开发中需要从服务器获取数据，这时候就比较尴尬了！

5、所以有必要说一下实际项目中用的办法
以数组的形式，根据后台返回List数量，然后创建相关数量的view添加到滚动视图中

    List<View> views = new ArrayList<>();

 /**
     * 设置循环滚动的View数组
     *
     * @param views
     */
    public void setViews(List<View> views) {
        if (views == null || views.size() == 0) return;
        vf.removeAllViews();
        for (int i = 0; i < views.size(); i++) {
            vf.addView(views.get(i));
        }
        vf.startFlipping();
    }

添加的时候使用

views.add(view);
vf.setViews(views);

6、如果项目中有多处用到改控件的话，我们不妨把该方法封装到自定义ViewFlipper中，方便以后使用。
写法跟activity中一样：

 /**
     * 设置循环滚动的View数组
     *
     * @param views
     */
    public void setViews(List<View> views) {
        if (views == null || views.size() == 0) return;
        removeAllViews();
        for (int i = 0; i < views.size(); i++) {
            addView(views.get(i));
        }
        startFlipping();
    }

7、监听实现有多种方法

一种是类似淘宝的点进去是个列表，直接监听ViewFlipper的点击事件就行

第二种是根据不同类型打开不同页面，需要根据后台返回结果，进行数据传递打开相关页面。
这样的效果需要监听item里面的控件，在请求返回结果的时候，监听，根据list索引取值:

for (int i = 0; i < hdList.size(); i++) {
    View view = View.inflate(getActivity(),   R.layout.item_main_fragment_vf, null);
                        TextView tv1 = (TextView) moreView.findViewById(R.id.item_viewfip_tv);

                        tv1.setText(hdList.get(i).title);
                        final int finalI = i;
                        tv1.setOnClickListener(new OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Intent intent = new Intent(getActivity(), HDDetailsActivity.class);
                                intent.putExtra("title", hdList.get(finalI).title);
                                intent.putExtra("id", hdList.get(finalI).id);
                                intent.putExtra("url", hdList.get(finalI).actUrl);
                                getActivity().startActivity(intent);
                            }
                        });

                        views.add(view);
                        main_forum_vf.setViews(views);
}

还有一种是手势的监听，这种是最复杂的方法，不但能对手势监听操作，还可以实现viewpager切换的效果。具体方法可以去研究研究。

---

源码放在了Github需要的可以去查看：https://github.com/wapchief/android-CollectionDemo