RecyclerView 实现横向滚动效果

我相信很久以前，大家在谈横向图片轮播是时候，优先会选择具有HorizontalScrollView效果和ViewPager来做，不过自从Google大会之后，系统为我们提供了另一个控件RecyclerView。RecyclerView是listview之后的又一利器，它可以实现高度的定制。今天就利用RecyclerView实现我们需要的相册效果。

先上一个图：

主要实现就是一个RecyclerView+RecyclerView.Adapter实现。

Activity的布局文件：

 <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:scrollbars="none" />

我这里是自定义的控件，主要代码：

public class SimpleLinearLayout extends LinearLayout {

    protected Context mContext;
    protected View contentView;
    protected AtomicBoolean isPreparingData;

    public SimpleLinearLayout(Context context) {
        super(context);
        this.mContext = context;
        isPreparingData = new AtomicBoolean(false);
        initViews();
    }

    public SimpleLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        isPreparingData = new AtomicBoolean(false);
        initViews();
    }
    protected void initViews() {

    }
}

主页面代码：

public class SpeedHourView extends SimpleLinearLayout {

    @BindView(R.id.recycler_view)
    RecyclerView recyclerView;

    private SpeedHourAdapter speedHourAdapter=null;
    private SpeedHourEntity entity=null;

    public SpeedHourView(Context context) {
        this(context, null);
    }

    public SpeedHourView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void initViews() {
        contentView = inflate(mContext, R.layout.layout_speed_per_hour, this);
        ButterKnife.bind(this);
        init();
    }

    private void init() {
        initData();
        initView();
        initAdapter();
    }

    private void initData() {
        String data = FileUtils.readAssert(mContext, "speenhour.txt");
        entity = JsonUtils.parseJson(data, SpeedHourEntity.class);
    }

    private void initView() {
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(mContext);
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(linearLayoutManager);

    }

    private void initAdapter() {
        speedHourAdapter=new SpeedHourAdapter(mContext);
        recyclerView.setAdapter(speedHourAdapter);
        if (entity!=null&&entity.topic!=null&&entity.topic.items!=null&&entity.topic.items.size()>0){
            List<SpeedHourEntity.TopicBean.ItemsBean.ListBean> listBeen=entity.topic.items.get(0).list;
             if (listBeen!=null&&listBeen.size()>0)
             speedHourAdapter.setList(listBeen);
        }

        speedHourAdapter.setOnItemClickListener(new SpeedHourAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                ProductDetailsActivity.open(mContext);
            }
        });
    }

    @OnClick(R.id.more_view)
    public void moreClick() {
        ToastUtils.showToast("更多时速达");
    }
}

adapter布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ptr="http://schemas.android.com/apk/res-auto"
    android:id="@+id/speed_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp"
    android:gravity="center">

    <ImageView
        android:id="@+id/speed_image"
        android:layout_width="85dp"
        android:layout_height="85dp"
        android:scaleType="fitXY"
         />

    <TextView
        android:id="@+id/speed_name"
        style="@style/style_c6_s14"
        android:layout_marginTop="5dp"
        android:text="蜂蜜柚子茶"
        android:maxLines="1"/>

    <TextView
        android:id="@+id/speed_price"
        style="@style/style_c8_s14"
        android:layout_marginTop="5dp"
        android:text="￥30.0"
        android:maxLength="6"
        android:maxLines="1"/>
</LinearLayout>

adapter代码：

public class SpeedHourAdapter extends RecyclerView.Adapter<SpeedHourHolder> {

    private List<ListBean> specailList;
    private LayoutInflater mInflater;
    private Context mContext=null;

    public SpeedHourAdapter(Context context) {
        this.mContext=context;
        mInflater = LayoutInflater.from(context);
    }

    public void setList(List<ListBean> list) {
        this.specailList = list;
        notifyDataSetChanged();
    }

    public OnItemClickListener mOnItemClickListener;

    public interface OnItemClickListener {
        void onItemClick(View view, int position);
    }

    public void setOnItemClickListener(OnItemClickListener mOnItemClickLitener) {
        this.mOnItemClickListener = mOnItemClickLitener;
    }

    @Override
    public SpeedHourHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.item_speedhour_layout, parent, false);

        SpeedHourHolder holder = new SpeedHourHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(final SpeedHourHolder holder, final int position) {
        ListBean bean = specailList.get(position);
        if (bean != null) {
            holder.speedImage.setScaleType(ImageView.ScaleType.FIT_XY);
            Glide.with(mContext).load(bean.pic).error(R.drawable.welfare_default_icon).into(holder.speedImage);
            holder.speedName.setText("同仁堂枸杞茶");
            holder.speedPrice.setText("￥"+Math.random()*100);
        }

        holder.speedView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              if (mOnItemClickListener!=null){
                  mOnItemClickListener.onItemClick(holder.speedView,position);
              }
            }
        });
    }

    @Override
    public int getItemCount() {
        return specailList.size();
    }
}

class SpeedHourHolder extends RecyclerView.ViewHolder {

    @BindView(R.id.speed_view)
    LinearLayout speedView;
    @BindView(R.id.speed_image)
    ImageView speedImage;
    @BindView(R.id.speed_name)
    TextView speedName;
    @BindView(R.id.speed_price)
    TextView speedPrice;

    public SpeedHourHolder(View itemView) {
        super(itemView);
        ButterKnife.bind(this,itemView);
        itemView.setTag(this);
    }

}

代码中用到的实体类：

public class SpeedHourEntity {

    public TopicBean topic;

    public static class TopicBean {
        public long nextupdatetime;
        public List<ItemsBean> items;

        public static class ItemsBean {
            public int id;
            public String theme;
            public int products;
            public int users;
            public String href;
            public boolean follow;
            public int topictype;

            public List<ListBean> list;

            public static class ListBean {
                public String id;
                public int price;
                public String pic;
            }
        }
    }
}

用到的 Json工具类也给大家

public class JsonUtils {

    private static Gson gson = new Gson();

    public static <T> T parseJson(String response, Class<T> clazz) {
        try {
            return gson.fromJson(response, clazz);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    public static <T> T parseJson(String response, Type type) {
        try {
            return gson.fromJson(response, type);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    public static String toJson(Object object) {
        try {
            return gson.toJson(object);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    public static <T> List<T> jsonToList(final String jsonString, final Type type) {
        try {
            return gson.fromJson(jsonString, type);
        } catch (Exception e) {
            return null;
        }
    }

    public static <T> List<T> jsonToList(final JsonArray jsonArray, final Class<T> classOfT) {
        List<T> list = new ArrayList<T>();

        for (int i = 0, size = jsonArray.size(); i < size; i++) {
            list.add(gson.fromJson(jsonArray.get(i), classOfT));
        }

        return list;
    }

    public static <T> T parseJson(final JsonObject jsonObject, final Class<T> classOfT) {
        try {
            return gson.fromJson(jsonObject, classOfT);
        } catch (Exception e) {
            return null;
        }
    }

    public static Map toMap(Object jsonString) {
        if (TextUtils.isEmpty(jsonString.toString())) {
            return new HashMap();
        }
        String js = jsonString.toString();
        Gson gson = new Gson();
        Type type = new TypeToken<Map>(){
        }.getType();
        Map map = gson.fromJson(js,type);
        return map;
    }

}

为了方便测试，给大家提供一段数据，大家放在assert就好了，然后读到实体类就好了：

{
topic: {
nextupdatetime: 1472699607850,
items: [
{
id: 1000010,
theme: "追韩剧不能少“美眸”心机",
products: 793,
users: 325,
href: "",
list: [
{
id: "50119e86-8d67-4919-a41f-be8202b62b7e",
price: 288,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/D4/59/CgvUBVeW2oOAJZOgAAChvNt-3Yc332_n_w_l.jpg"
},
{
id: "936f2615-10bb-4831-8674-9bea0b43b486",
price: 79,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/79/BE/CgvUA1eMo0iAL9yhAAOEN7artTM830_n_w_l.jpg"
},
{
id: "24f2be35-ba6e-4bb7-b60d-47d9c2a5bb7d",
price: 35,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/BA/86/CgvUBFdXdlKAJs8WAAhZYEeKhCI758_w_ls.jpg"
},
{
id: "6e43adf2-18b0-40aa-a95d-84ad3cf352f7",
price: 29,
pic: "http://pc2.img.ymatou.com/G02/upload/product/original/M07/13/22/CgvUA1eADhCAHWyQAAHAnGAUtm4799_n_w_l.jpg"
},
{
id: "c082d977-e06f-4f24-bf3e-7768b839170c",
price: 758,
pic: "http://pc2.img.ymatou.com/G02/shangou/M07/B5/D4/CgvUA1dW4XWALArJAACZadCCJ5Q293_w_ls.jpg"
},
{
id: "7737d9eb-ae85-4911-8f80-939c4d805b0a",
price: 29,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/56/B2/CgvUBFeoq9iAXyveAAPoUP0-kYA656_n_w_l.jpg"
},
{
id: "bcc4517e-20d5-48da-ae46-708d2e8d03af",
price: 288,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/CC/8F/CgvUA1d6N7yASvgPAAMymJaT5yQ96_n_w_l.jpeg"
},
{
id: "c717e1bd-7a3b-4f92-9317-84b4147ede71",
price: 78,
pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M07/8B/12/CgvUBFeOSB2AD_7dAAGNl3gl_gU541_n_w_l.jpg"
},
{
id: "139594cb-833c-4ade-b547-3a9a056b193e",
price: 69,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/9D/5D/CgvUA1dWSM6AYn7hAAWcHrWn_90648_w_ls.png"
},
{
id: "4414e81f-fc3b-427c-b1ee-37b03883e0dc",
price: 88,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/02/76/CgvUBFeHQLSALvfLAAHccf91md4006_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1001185,
theme: "Tommy Hilfiger男女服饰精选",
products: 553,
users: 111,
href: "",
list: [
{
id: "bd128bbf-243b-4c2e-a1d4-ea698b06142e",
price: 99,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/16/8A/CgvUBFfGh_SADrC8AALybC7Xmv8091_n_w_l.jpg"
},
{
id: "ea044aaf-32da-4c6e-b867-755fa780036d",
price: 229,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/13/4F/CgvUBFfGA0-AFbQsAALknGVeqU8444_n_w_l.jpg"
},
{
id: "5b5730a9-3343-4ef6-b78b-8b585c0b78f2",
price: 168,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/38/1D/CgvUBFekEIOAc8EdAAEHlzPTZWw039_n_w_l.jpg"
},
{
id: "e956417a-e476-486b-be19-8fd64c6fe551",
price: 199,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/D9/DC/CgvUA1d7vRqAGFxnAADXh3zHBn4743_n_w_l.jpg"
},
{
id: "1d3e6f9b-d5f5-436c-a0d4-2e04a9e08c0d",
price: 299,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/D9/C2/CgvUBVe8dPCAMcc8AAJ6-rOnfWA070_n_w_l.jpg"
},
{
id: "d44ca918-3e73-4b24-a81b-f88813be057e",
price: 258,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/C1/EF/CgvUBVe4txiAIkmjAAMYwUZonWk554_n_w_l.jpg"
},
{
id: "9f9b285a-bd18-409e-a66a-d05c717898d0",
price: 179,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/45/84/CgvUBFeIhXGANzZpAADWX4O6_Xc860_n_w_l.jpg"
},
{
id: "c13e8714-e1a8-48a7-b47b-7c165aa63c34",
price: 178,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/9E/4B/CgvUA1ezz_yALQtFAAHeUOJ-DcY945_n_w_l.jpg"
},
{
id: "29aa1c5a-5f6e-4a80-9305-84e83cf652fc",
price: 299,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/EB/44/CgvUBFeZslCADHsjAAPW3Sy2qj8675_n_w_l.jpg"
},
{
id: "d8120a37-aa93-4e4f-934a-4245c4f42c71",
price: 388,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/50/3A/CgvUBVen9AKAOZLHAAFhQsWjV14609_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1002054,
theme: "每个都市白领都有一只时尚腕表",
products: 310,
users: 68,
href: "",
list: [
{
id: "386ebe00-cdd0-4324-92f7-6a25179fe557",
price: 1999,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/7E/4D/CgvUBVeNHI6APdp3AAFZgOkl-XU821_n_w_l.jpg"
},
{
id: "4d93b2e6-7bf6-4878-830f-6ed22c380731",
price: 1550,
pic: "http://pc1.img.ymatou.com/G02/shangou/M04/6B/D1/CgvUBVer7BSAE7tTAAGD0sdyEp4918_n_w_l.jpg"
},
{
id: "e6b2eaef-e8ea-4ca1-b9cb-fba630e79572",
price: 398,
pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M00/EC/53/CgvUBFd-GgWAZ0hWAAHuCzGVzlE002_n_w_l.jpg"
},
{
id: "0bf2584d-52eb-403e-b668-fc59eddf7b35",
price: 899,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/50/9C/CgvUBFeoBtaAVRJaAAPRD_cW1jI986_n_w_l.jpg"
},
{
id: "756ca0ed-b128-4b72-a308-f5cde1a31fbb",
price: 1788,
pic: "http://pc2.img.ymatou.com/G02/upload/product/original/M04/13/FE/CgvUBFeAGCiAeyEgAAOoCajEei0337_n_w_l.jpg"
},
{
id: "c5c95dd3-0585-4ccd-b34b-b2a1b0c98915",
price: 1460,
pic: "http://pc1.img.ymatou.com/G02/shangou/M04/ED/CF/CgvUA1eZ0Y2AQV2gAAJMchT1mjY462_n_w_l.jpg"
},
{
id: "c5a664db-aa70-47d1-b0e6-15ad1faafcbe",
price: 1299,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/15/40/CgvUA1egLnyAZo-IAAIVAvK1Hxw422_n_w_l.jpg"
},
{
id: "a3449aef-fdec-4344-9bca-f98b27a8a3de",
price: 2380,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/FB/EB/CgvUBVfBjXOAZiOhAAJILon5PNE706_n_w_l.jpg"
},
{
id: "cb473f7e-3a40-4eb5-8778-043308c80ad4",
price: 299,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/99/BF/CgvUBVePNzOAR5inAAFt690zWtA662_n_w_l.jpg"
},
{
id: "2ad9f10e-ee94-49a7-95e8-b37104b86dc4",
price: 699,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/06/F6/CgvUA1eHRaGAL-WUAACUnFlglbU914_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1000691,
theme: "工薪族必备 一只FURLA手袋",
products: 369,
users: 81,
href: "",
list: [
{
id: "326d57e0-e202-45c9-a418-1f7c5c6cee37",
price: 1599,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/99/9B/CgvUBFezGJmAf-gQAAH98NQDroc227_n_w_l.jpg"
},
{
id: "8c0aa3ec-0fba-4ee8-8952-74ebca2dd260",
price: 799,
pic: "http://pc1.img.ymatou.com/G02/shangou/M04/7C/AD/CgvUBVeM506AGvgHAAEYWxTXLXc839_n_w_l.jpg"
},
{
id: "3e04f95c-4b0f-4b9f-ae44-0391ab2f1616",
price: 1880,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/A5/E7/CgvUA1eQVrKAXqQVAALdAABuInM554_n_w_l.jpg"
},
{
id: "05059f48-a6bb-48c1-88df-7ecabe65bd4a",
price: 799,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/7C/8A/CgvUBVeM5E2ABWGgAAJ_9inEqjQ669_n_w_l.jpg"
},
{
id: "0962bf25-c417-409d-b39b-daf84c9a4e9d",
price: 988,
pic: "http://pc1.img.ymatou.com/G02/shangou/M04/C3/0F/CgvUA1e4-vmAZpGRAAH_XdWHcGE171_n_w_l.jpg"
},
{
id: "5c960ae1-27e3-4c94-8233-7456dc9e82b6",
price: 850,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/AF/1A/CgvUA1e1xIGASjQqAAIsrHq1TpY720_n_w_l.jpg"
},
{
id: "52184a55-e7e5-4e43-9a11-7b9fcc737136",
price: 1590,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/79/E6/CgvUBFety5GASYSLAAJeGTYNSgQ032_n_w_l.jpg"
},
{
id: "f11bbaf9-64eb-44ce-9bd3-07e8c8c6d1b3",
price: 2099,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/36/F6/CgvUBVej7UuABhdEAAGb2YixMaY568_n_w_l.jpg"
},
{
id: "6dbd4793-2b34-43b5-8b81-7432d301bc34",
price: 2088,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/6C/81/CgvUA1er7guALEOhAAFI7ymRkME838_n_w_l.jpg"
},
{
id: "1d6f1747-a292-4821-98a0-becc67381f98",
price: 1450,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/0D/1C/CgvUBVfE91SASW_GAAHV3WPdWSU789_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1000335,
theme: "你不穿，怎么知道尖头鞋有多美",
products: 262,
users: 61,
href: "",
list: [
{
id: "5dc85724-e39b-4d29-bb33-bea45910d64e",
price: 795,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/0C/2B/CgvUA1fEoT2AX5jGAAOIddgXk2s232_n_w_l.jpg"
},
{
id: "b47bcbea-e115-41be-94d7-a81d012997d9",
price: 699,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/A7/91/CgvUA1dWePGAbtnBAACpSJlaJJI503_w_ls.jpg"
},
{
id: "1b27c7c2-e996-4039-b403-505425c7c661",
price: 799,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/F4/B2/CgvUBVfASQmAfqPkAAJ5Y5NW4DU258_n_w_l.jpg"
},
{
id: "86c2f638-f8cb-4e41-9165-b186b90de522",
price: 799,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/41/2D/CgvUBFeIW0SAGrUQAAdZ8pOEVPU386_n_w_l.JPG"
},
{
id: "93251a4a-9265-47e8-a108-b790250ca5eb",
price: 599,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/4D/53/CgvUBVeGEjSAHP8rAADp5SupP3A653_n_w_l.jpg"
},
{
id: "522bcfb0-540e-4765-b391-6928e0a63afd",
price: 259,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/B9/2B/CgvUBFeS2B-AXOelAAKE2I31Jxk211_n_w_l.jpg"
},
{
id: "565a3590-f8e2-467a-b5ec-a7e648e3da05",
price: 399,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/C9/C9/CgvUBFe6W8eAaV7fAADdh7847PY900_n_w_l.jpg"
},
{
id: "f0f11042-9d05-4b69-82c2-a8c614025b7c",
price: 699,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/CA/32/CgvUBVe6Wi-AFdLaAAIhgT3Z4Zw873_n_w_l.jpg"
},
{
id: "2099167d-39bf-4949-b5ae-fd156d49a38f",
price: 299,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/E5/4F/CgvUBVe-TXmABZ7JAAFIlZ70s98657_n_w_l.jpg"
},
{
id: "5314a6cc-1ade-4fac-80ba-c32e2d43d839",
price: 599,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/F2/D6/CgvUA1eaj5aAH0JHAADbLN5GWzI823_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1000981,
theme: "职场男的钱包就应该这么选",
products: 708,
users: 210,
href: "",
list: [
{
id: "0b5d3386-bb9f-46d3-bd4a-826f926c9073",
price: 499,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/0D/00/CgvUA1ee6ZyAPdqtAAKbDUt68dw320_n_w_l.jpg"
},
{
id: "d558cf02-35a6-45a9-a84d-90930f85b204",
price: 480,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/5D/1F/CgvUBFepp3qAEzN8AANrv-wGJEE984_n_w_l.jpg"
},
{
id: "b9074e54-190e-491d-8e73-21a94884d252",
price: 499,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/61/5D/CgvUBVeqe6yASqhuAAP6jd0k0E4643_n_w_l.jpg"
},
{
id: "96c9711e-5655-4de2-994e-4a6baa61df8b",
price: 1380,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/9A/03/CgvUBVezF6CAIHYxAAKT5rHhHSw992_n_w_l.jpg"
},
{
id: "62de6949-d5e0-4d60-a6f0-34901ba6a7ce",
price: 1300,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/6A/90/CgvUBVerwt6AS6jJAAUc50dRQYw030_n_w_l.jpg"
},
{
id: "1cbc7f2e-af91-4c29-9ba8-5609ce3263a5",
price: 189,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/A9/ED/CgvUBVe1WyaARpI7AAIrPYzQMWk137_n_w_l.jpg"
},
{
id: "b7531635-edd8-4c83-93e6-196e73fcd7b5",
price: 299,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/C2/C4/CgvUBVe4_uSAFbPRAALWCg7g2k4590_n_w_l.jpg"
},
{
id: "731575af-0031-4211-8d3a-75ef19a04d51",
price: 800,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B9/F4/CgvUA1e3ZHmAF3_xAAJinKN4FpE421_n_w_l.jpg"
},
{
id: "506225eb-5135-4a8d-8f9a-dedc4d69af57",
price: 488,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/D3/33/CgvUA1eWl-iANn4pAARnRxR7FKE211_n_w_l.jpg"
},
{
id: "ae673d4e-59c6-4ae3-a7bd-6f4ff7ec0484",
price: 399,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/42/4D/CgvUBFeIZ9aAcfTXAASRR__3Ns4881_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1001855,
theme: "少女派最该入手的唇膏盘点",
products: 221,
users: 121,
href: "",
list: [
{
id: "dd59aefa-0619-40a9-8f44-33b7b980e7e7",
price: 36,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/44/92/CgvUBVelr-mARWRMAAL0-pzS8GQ614_n_w_l.jpg"
},
{
id: "85b8ce98-b7e6-4323-83b7-ba891f0a0da3",
price: 249,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/F6/9E/CgvUBVfAv0CAYFwEAAHpgOwVRgw908_n_w_l.jpg"
},
{
id: "9dfe69a1-fc6d-4652-941b-3e1140ef50ec",
price: 199,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/98/FC/CgvUBVePKD2AXj_uAAGhr-ddlCs021_n_w_l.jpg"
},
{
id: "db7ea83c-90a2-4569-a063-2580e4bbe586",
price: 149,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/08/4B/CgvUBFeeBECASewiAAFv5dozLqQ743_n_w_l.jpg"
},
{
id: "7e702512-bc7c-49a7-894c-7f79e08635b6",
price: 209,
pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M0A/22/F6/CgvUBFeAcu-ADZbNAAbBZzsCMZo894_n_w_l.jpg"
},
{
id: "8aa440ee-b99c-4047-ad6b-669b0c864266",
price: 85,
pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M0B/8E/DC/CgvUA1eOS5KABSC4AAE47YcX0yo815_n_w_l.jpg"
},
{
id: "4b845bc6-dde2-4d83-b3cb-5c2aba1629ee",
price: 68,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/72/E9/CgvUBFeMM6qABb7rAAe2r7x1tQQ859_n_w_l.jpg"
},
{
id: "43c635e7-01e8-4dfc-be38-5d11d9bd67bd",
price: 195,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/9D/DE/CgvUA1ePZEOAQ1kZAAY-lRjPbzQ155_n_w_l.JPG"
},
{
id: "3689fe6f-fc0d-4a4a-a5b1-0553038e154f",
price: 218,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/50/76/CgvUBVeI4T-AOjh-AALGBDOtN9w821_n_w_l.jpg"
},
{
id: "9a1aa6ec-fcab-4206-bce3-75b0eed4a331",
price: 199,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/DC/0C/CgvUBFe9ExSAAxj-AALHgxQqlcY432_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1002012,
theme: "Kate spade的甜心少女风",
products: 1125,
users: 157,
href: "",
list: [
{
id: "a92b1158-d8cc-4bfc-bba1-8e269a597fc2",
price: 1380,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/5F/46/CgvUBVep3VWAeqi5AAIJ0LKNigk289_n_w_l.jpg"
},
{
id: "5a388eb3-e696-4c78-9b5a-4a6cefb54e2f",
price: 1088,
pic: "http://pc1.img.ymatou.com/G02/shangou/M07/4F/4A/CgvUBFen5TSAPn2PAAI_RpcB9qM096_n_w_l.jpg"
},
{
id: "c788ead9-44b1-47da-86db-f520e871a959",
price: 875,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/B9/A7/CgvUA1eSypCAHLxPAALzOv-BEHo743_n_w_l.jpg"
},
{
id: "2a8d3aac-0991-41db-bfcc-c89026f92756",
price: 760,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/9B/E3/CgvUBFezohaAJuKgAAOQlbLJBiU608_n_w_l.jpg"
},
{
id: "f13dd52f-b3ae-46cb-b4fc-c3eaeaac6a7e",
price: 498,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/CF/DF/CgvUBVd6qWiAJg6HAADCi9bKFak394_n_w_l.jpg"
},
{
id: "bfa91c51-57a2-46c4-a6de-a420852be9ca",
price: 429,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/8E/3A/CgvUA1dyasWAT8sCAADksewcyQ0275_n_w_l.jpg"
},
{
id: "16462c30-454d-4566-a40c-1c9af6d066eb",
price: 560,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/F1/CF/CgvUBVe__PSARr-9AANZ07utoWA217_n_w_l.JPG"
},
{
id: "6a9d0e09-6d7f-42c1-bfd7-50adb12473a2",
price: 1249,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/97/B9/CgvUBVePEcaADHj-AAHcUtVj1OA401_n_w_l.jpg"
},
{
id: "484a8967-c843-4d34-8876-4afca275cd58",
price: 1250,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B3/0B/CgvUBVe2lp2AVGDtAAGFyOb9OhI144_n_w_l.jpg"
},
{
id: "5e32fbce-be90-4c55-b3ba-2bd05de10f3a",
price: 998,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/C3/0F/CgvUBVe5CL6ABP0CAAGc6XBDq5c140_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1000657,
theme: "施华洛世奇 奢华之最",
products: 1284,
users: 147,
href: "",
list: [
{
id: "68775149-2996-40d3-8164-fe51ebaeb247",
price: 390,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B5/40/CgvUA1e2usGAGMiOAAIeoEq4_8k942_n_w_l.jpg"
},
{
id: "f4ea3d67-957b-44b1-824a-aca71b191975",
price: 290,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/48/C1/CgvUBFemkpKAQimhAAIVTLA1TnM821_n_w_l.jpg"
},
{
id: "608f9cea-865a-403f-a064-b7020d8b9151",
price: 500,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/C1/9B/CgvUBFe407aAVwHsAAEVmeaH0Wo087_n_w_l.jpg"
},
{
id: "5f74f137-6b06-412f-92b0-6ccfabc5e4ff",
price: 990,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/05/31/CgvUBFedjnOAeJW5AALIA4EvnDY776_n_w_l.jpg"
},
{
id: "207db2b4-d7b7-40af-b769-a51384030781",
price: 358,
pic: "http://pc3.img.ymatou.com/G02/shangou/M08/9B/A9/CgvUA1dWP5KAKz_nAASY1zfAp2Q998_w_ls.jpg"
},
{
id: "61e75f97-934f-480a-a253-c4401a692c2f",
price: 799,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/61/16/CgvUA1eJ5eSAeljEAAMXM9aiJWo944_n_w_l.jpg"
},
{
id: "f60f6587-e557-4261-b58f-31f5719df5ba",
price: 580,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/50/97/CgvUBFeI4xKAQHy7AAEVKIt--A0224_n_w_l.jpg"
},
{
id: "630d7893-6a9e-4fc8-8a93-098fce056920",
price: 659,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/A3/34/CgvUBVeQI_CAZkjQAAEm1d4A2xE253_n_w_l.jpg"
},
{
id: "1e52e01f-335e-440b-99d6-7cd79ba6d1ae",
price: 959,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/B4/CC/CgvUBFd3Ik2AazqrAACZbtZm554683_n_w_l.jpg"
},
{
id: "3b5663c3-c694-4a68-a02f-c6bda164427a",
price: 515,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/A1/42/CgvUBVe0J1KAczpWAAG7JrvcS2w388_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1002418,
theme: "爆款再见，饰品我只要独一无二",
products: 113,
users: 33,
href: "",
list: [
{
id: "dfff8751-775c-437f-8fa7-5aec934a5ef0",
price: 89,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/49/84/CgvUA1emjwCAYqSnAAGVFiRPoW4269_n_w_l.jpg"
},
{
id: "ad098f8a-5fcd-42ab-afdd-3ff580a1ac0b",
price: 350,
pic: "http://pc1.img.ymatou.com/G02/shangou/M03/41/AB/CgvUBFelUceAJv-yAAFqX0aWyWE901_n_w_l.jpg"
},
{
id: "bda09ca7-56cb-4458-b6d1-9f988c9f326d",
price: 450,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/98/7F/CgvUA1ey5bOAYkHaAAJFbg6Ji3M944_n_w_l.jpg"
},
{
id: "23fc3728-a706-42ce-9e5f-7ce742474a73",
price: 680,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/07/03/CgvUA1edweiAfoO3AAFmKdmzk3c556_n_w_l.jpg"
},
{
id: "f8ea5393-7972-40b0-90b2-32b22378cb35",
price: 290,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/BE/92/CgvUA1e4G0uAEDW7AAIHW5H3aC8568_n_w_l.jpg"
},
{
id: "f249ae53-750e-4237-a53d-7deb1c5102e5",
price: 468,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/C3/9F/CgvUBFeUZn6ATpvdAAWmCLN-aEk844_n_w_l.jpg"
},
{
id: "460b5d5c-6b6e-4c03-aefa-a56c7a2df8d4",
price: 3100,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/CF/AC/CgvUBVe6-jOAZ7w4AALCedzhGMQ665_n_w_l.jpg"
},
{
id: "60040ecd-23f4-44e7-a3e9-81e36327a2ca",
price: 129,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/42/37/CgvUBVelXh2AHgrnAAHXOIwMgKw041_n_w_l.jpg"
},
{
id: "83f60817-e22c-42e9-94cf-331e8ffc1ce3",
price: 3350,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/60/38/CgvUBFeJ5Q6AD0MwAAKY-Ou9erk199_n_w_l.jpg"
},
{
id: "0e816cf1-4c0d-4ced-a356-45620fbda1b8",
price: 199,
pic: "http://pc1.img.ymatou.com/G02/upload/product/original/M07/FC/C3/CgvUBVd_rEqAHMPBAAOCO_DMoCM554_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1003396,
theme: "清新淑女的露肩裙美到没朋友",
products: 50,
users: 34,
href: "",
list: [
{
id: "548c381a-2be7-4a6c-9344-b898f18e331e",
price: 650,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/56/70/CgvUBVeomK2AOJWXAAKfQ3-H1DQ245_n_w_l.jpg"
},
{
id: "8ca2ca1a-3f7b-4826-9b17-a339f4c4cbf3",
price: 560,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/AE/6B/CgvUBVe1v6uAOOlwAAIW5S9SjFo614_n_w_l.jpg"
},
{
id: "aed17646-dfe8-4969-bbd4-cfaab80000db",
price: 1899,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/DF/4F/CgvUBFe9ZWWAGrIwAAIQZS0wRbY838_n_w_l.jpg"
},
{
id: "d77c9628-84aa-4e51-861f-f3674d195bd3",
price: 200,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/3A/DA/CgvUBFeIBgyAJubQAASBrt5UyVc044_n_w_l.jpg"
},
{
id: "dee59eeb-d82c-4ff4-838c-c492b3d001ab",
price: 218,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/F1/F7/CgvUA1eaQR6AEQ61AAIW-fqc7Vo838_n_w_l.jpg"
},
{
id: "994f9376-8e3b-4e27-b393-d4ca05fa046a",
price: 229,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/73/6A/CgvUBFes-HSANU0pAAPrzMLamgQ538_n_w_l.jpg"
},
{
id: "af6efa07-6853-4d6c-acfc-a3043eb24988",
price: 399,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/58/0D/CgvUBFepI7-AGrqWAAG-mCgD8Nc129_n_w_l.jpg"
},
{
id: "5a721e93-2ea9-4155-8678-f5c09e518514",
price: 369,
pic: "http://pc1.img.ymatou.com/G02/shangou/M08/B2/43/CgvUBVe2fWSAOSUaAADtD35Mn34794_n_w_l.jpg"
},
{
id: "a878b978-31c0-4284-a6de-f63aafd61312",
price: 1999,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0B/D6/AF/CgvUBFe8L7SAMnTMAAG-UvVKf8U384_n_w_l.jpg"
},
{
id: "2215cbde-97a6-46d5-aea2-9440e115f251",
price: 468,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/2F/6C/CgvUA1eiylCAfjIDAAGBiNPRRUM031_n_w_l.jpg"
}
],
follow: false,
topictype: 106
},
{
id: 1000302,
theme: "Tod's：无法抗拒的经典舒适",
products: 179,
users: 30,
href: "",
list: [
{
id: "f6c50028-9211-4080-ae58-3beed3728e50",
price: 1850,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/94/32/CgvUBVeygneAchtNAAEXO9Cv9Ro827_n_w_l.jpg"
},
{
id: "49c37f83-2bdd-473c-b712-610fa642f849",
price: 1800,
pic: "http://pc1.img.ymatou.com/G02/shangou/M01/B8/15/CgvUBVe3FXeAd5MoAAGsnxuqdHA352_n_w_l.jpg"
},
{
id: "a92f93d6-2ce6-40b2-87cf-19d34cbb03d0",
price: 1250,
pic: "http://pc1.img.ymatou.com/G02/shangou/M04/09/68/CgvUBVfEHHOAB1h_AAIwSBEZVVg530_n_w_l.jpg"
},
{
id: "908cc4d0-1e9a-475b-92a5-2da58a184a52",
price: 1980,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/D4/EC/CgvUA1e75-GAVy0TAAa5CXGm6mo536_n_w_l.JPG"
},
{
id: "cd3accbc-9c8e-44e8-bee2-0fd2062e54a2",
price: 2580,
pic: "http://pc1.img.ymatou.com/G02/shangou/M04/4B/61/CgvUBVem80yAFLBhAAEUV4Hs7vs476_n_w_l.jpg"
},
{
id: "7ace0a0f-2725-4a46-af60-036cb5ccbe83",
price: 1640,
pic: "http://pc1.img.ymatou.com/G02/shangou/M09/0E/3C/CgvUBFfFK_aALbCvAAD4yZZoPCM584_n_w_l.jpg"
},
{
id: "d8c8fae1-a169-4530-864c-6ba28222d3e7",
price: 1880,
pic: "http://pc1.img.ymatou.com/G02/shangou/M05/93/F0/CgvUBVeye--AdCSgAAIxaPtS2GM400_n_w_l.jpg"
},
{
id: "c475412f-ae29-4690-b46b-c4407db8916b",
price: 1700,
pic: "http://pc1.img.ymatou.com/G02/shangou/M0A/F4/E4/CgvUBFfAWu-AZgWZAAHlwvXa_Y0542_n_w_l.jpg"
},
{
id: "f5d34f68-d566-4cf2-aa8e-142ef058fd71",
price: 1499,
pic: "http://pc1.img.ymatou.com/G02/shangou/M06/BB/29/CgvUBFe3zPqAANCxAAHr5HcZC4E398_n_w_l.jpg"
},
{
id: "cf1a8142-91f2-4b2c-bb86-61ae0ede2b73",
price: 3200,
pic: "http://pc1.img.ymatou.com/G02/shangou/M02/85/8B/CgvUBVev8Y6ACkDoAAKBE5K1Wjg827_n_w_l.jpg"
}
],
follow: false,
topictype: 106
}
]
}
}
时间： 2024-10-31 16:12:15

RecyclerView 实现横向滚动效果的相关文章

RecyclerView实现横向滚动

我相信很久以前,大家在谈横向图片轮播是时候,优先会选择具有HorizontalScrollView效果和ViewPager来做,不过自从Google大会之后,系统为我们提供了另一个控件RecyclerView.RecyclerView是listview之后的又一利器,它可以实现高度的定制.今天就利用RecyclerView实现我们需要的相册效果. 先上一个图: 主要实现就是一个RecyclerView+RecyclerView.Adapter实现. Activity的布局文件: [html] v

在一张PPT页怎么设置一组图片水平滚动或垂直滚动效果?

  在网页上经常看到一组图片水平滚动或者垂直滚动的效果,那么在microsoft office powerpoint(PPT)中能否实现呢?答案是可以的.下面我来介绍一下,希望能对大家有所帮助! 方法/步骤 打开microsoft office powerpoint(PPT),插入四张图片(几张也可以) 设置图片大小 双击图片-大小-设置图片格式-取消锁定纵横比-宽度5厘米*高度5厘米(根据图片数量设置) 对齐图片,底端对齐-横向居中(也可以手动调节) 将图片组合 复制一组对齐.点动画-动画空格

js+div实现图片滚动效果代码

 本篇文章主要是对js+div实现图片滚动效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 横向  <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"    onmouseout="doscroll()">  <div id=&qu

【GRIDVIEW滚动条】 横向滚动时候前几列固定，纵向滚动时候表头固定 求处理方法

问题描述 客户很苛刻,GRIDVIEW不让做分页,同时列还很多(有30几个).这样就需要用到横向.纵向滚动条.这点实现了.用DIV加滚动条的方式.但是做好之后问题又来了.在拉横向滚动条的时候,客户又要求,前3列固定,这点也实现了.但是今天又和我说.纵向拉滚动条的时候,表头也要固定.要是单独实现表头固定不难,方法很多.但是既要前3列固定,又要表头固定,小弟就不会了.还请高人指点. 解决方案 解决方案二:表头一向都固定的嘛~难道前几行?我用MFC的CLISTCTRL正想知道怎样固定前几列解决方案三:

android开发之横向滚动/竖向滚动的ListView(固定列头)_Android

由于项目需要,我们需要一个可以横向滚动的,又可以竖向滚动的 表格.而且又要考虑大数据量(行)的展示视图.经过几天的研究终于搞定,做了一个演示.贴图如下:  开发之横向滚动/竖向滚动的ListView(固定列头)_Android-横向滚动listview">       好吧.让我们看思路是什么样的:   1. 上下滚动直接使用 listView来实现. 2. 左右滚动使用HorizontalScrollView,来处理滚动.我写一个类MyHScrollView继承 自它.     2.1

jQuery插件fullPage.js实现全屏滚动效果_jquery

本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示  的HTML 布局 以及js 代码 //需要连接 连接的三个文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件 <script src="js/jquery-1.8.3.min.js"></script> //jQue

Android实现两个ScrollView互相联动的同步滚动效果代码_Android

本文实例讲述了Android实现两个ScrollView互相联动的同步滚动效果代码.分享给大家供大家参考,具体如下: 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意思就是滑动其中的一个ScrollView另一个ScrollView也一同跟着滑动,要做到一起同步滑动.感觉在以后的项目开发中大家可能也会用到,绝对做个Demo分享出来,供大家一起学习,以便大家以后好用,觉的不错,有用的可以先收藏起来哦! 其实对于ScrollView,Android官方并没有提供相关

不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了_javascript技巧

/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\  制作时间:2006-08-29 (Ver 0.5)  发布时间:2006-08-31 (Ver 0.8)  更新时间:2007-01-31 (Ver 1.6)  更新说明: + 加入功能 * 修正.完善      1.6.070131          + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)          + 判断是

js图片横向滚动代码

本文章为我提供一款js图片横向滚动代码效果,图片可以左右控制,如果你正在找这种效果就进来下载吧,就是搜狐数码频道图片滚动代码哦. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199