用RecyclerView实现瀑布流布局

最新推荐文章于 2024-04-28 21:21:08 发布

平伟

最新推荐文章于 2024-04-28 21:21:08 发布

阅读量810

点赞数

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/pingwei124/article/details/45395323

版权

Android 专栏收录该内容

19 篇文章

订阅专栏

1.布局文件

RecyclerView布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="#ffcccccc"
        >
    <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/recyclerview">
    </android.support.v7.widget.RecyclerView>
</LinearLayout>

item布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:gravity="center_horizontal"
                android:background="#ffffffff">
    <RelativeLayout android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/thumbnail_layout">
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:scaleType="fitXY"
                android:id="@+id/product_thumbnail_imageview"/>
        <TextView android:layout_width="match_parent"
                  android:layout_height="30dp"
                  android:textSize="14sp"
                  android:gravity="center"
                  android:background="#cc555555"
                  android:text="可爱的小绵羊"
                  android:textColor="#ffffffff"
                  android:id="@+id/product_name_textview"
                  android:layout_alignBottom="@id/product_thumbnail_imageview"/>
    </RelativeLayout>
    <RelativeLayout android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingTop="10dp"
                    android:layout_below="@id/thumbnail_layout">
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginLeft="10dp"
                  android:layout_marginRight="10dp"
                  android:maxLines="3"
                  android:textSize="14sp"
                  android:lineSpacingExtra="5dp"
                  android:textColor="#ff000000"
                  android:text=""
                  android:id="@+id/product_description_textview"/>
        <RelativeLayout android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingTop="5dp"
                        android:paddingBottom="5dp"
                        android:layout_below="@id/product_description_textview">
            <ImageButton android:layout_width="30dp"
                         android:layout_height="30dp"
                         android:layout_marginLeft="10dp"
                         android:maxHeight="400dp"
                         android:id="@+id/hot_imagebutton"
                         android:background="@drawable/pinus"
                         android:layout_alignParentLeft="true"/>
            <TextView android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_toRightOf="@id/hot_imagebutton"
                      android:layout_centerVertical="true"
                      android:textSize="16sp"
                      android:textColor="#ffcccccc"
                      android:text="45"
                      android:id="@+id/hot_count_textview"/>
            <TextView android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginRight="10dp"
                      android:layout_centerVertical="true"
                      android:layout_alignParentRight="true"
                      android:id="@+id/textview"
                      android:text="元"
                      android:textSize="16sp"
                      android:textColor="#ff000000"/>
            <TextView android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginRight="2dp"
                      android:text="185"
                      android:layout_toLeftOf="@id/textview"
                      android:layout_centerVertical="true"
                      android:textSize="16sp"
                      android:textColor="#ff00ff"
                      android:id="@+id/price_textview"/>
        </RelativeLayout>
    </RelativeLayout>

2.MainActivity.class

	private RecyclerView mRecyclerView;

	private WaterFallAdapter waterFallAdapter;

     mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        waterFallAdapter = new WaterFallAdapter(mProductList, this);
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        mRecyclerView.setAdapter(waterFallAdapter);
        mRecyclerView.setOnTouchListener(this);

3.WaterFallAdapter.class

public class WaterFallAdapter extends RecyclerView.Adapter {
    private List<Product> mLists;
    private LayoutInflater mLayoutInflater;
    private OnItemClickLitener mOnItemClickLitener;
    private BitmapUtils bitmapUtils;
    private int startItem;
    private Context context;

    public WaterFallAdapter(List<Product> mLists, Context mContext) {
        this.mLists = mLists;
        this.mLayoutInflater = LayoutInflater.from(mContext);
        bitmapUtils = new BitmapUtils(mContext);
        this.context = mContext;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int position) {
        MyViewHolder viewHolder = new MyViewHolder(mLayoutInflater.inflate(R.layout.item, viewGroup, false));
        return viewHolder;
    }

    private int currentHots;

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, final int position) {
        Product product = mLists.get(position);
//        currentHots = product.getHot();
        final MyViewHolder holder = (MyViewHolder) viewHolder;
        holder.priceTextView.setText(product.getPrice() + "");
        holder.descriptionTv.setText(product.getDescription());
        holder.hotCountTv.setText(String.valueOf(product.getHot()));
        holder.productNameTv.setText(product.getName());
//        holder.thumbnailImageView.setMaxHeight(160);
        bitmapUtils.display(holder.thumbnailImageView, product.getUrl());

        holder.hotImageBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                currentHots = currentHots++;
//                holder.hotCountTv.setText(currentHots + "");
                Toast.makeText(context, "Remoted", Toast.LENGTH_SHORT).show();
            }
        });
        // 如果设置了回调，则设置点击事件
        startItem = mLists.size();
        if (mOnItemClickLitener != null) {
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int pos = holder.getLayoutPosition();
                    mOnItemClickLitener.onItemClick(holder.itemView, pos);
                }
            });
        }
    }

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

    public void addData(List<Product> products) {
        mLists.addAll(products);
//        notifyItemInserted(products);
        notifyItemRangeInserted(startItem, getItemCount());
    }

    public void removeData(int position) {
        mLists.remove(position);
        notifyItemRemoved(position);
    }

    class MyViewHolder extends RecyclerView.ViewHolder {

        //名字
        TextView productNameTv;
        //缩略图
        ImageView thumbnailImageView;
        //心形图片
        ImageButton hotImageBtn;
        //点击数
        TextView hotCountTv;
        //产品价格
        TextView priceTextView;
        //产品描述
        TextView descriptionTv;

        public MyViewHolder(View itemView) {
            super(itemView);
            productNameTv = (TextView) itemView.findViewById(R.id.product_name_textview);
            thumbnailImageView = (ImageView) itemView.findViewById(R.id.product_thumbnail_imageview);
            priceTextView = (TextView) itemView.findViewById(R.id.price_textview);
            descriptionTv = (TextView) itemView.findViewById(R.id.product_description_textview);
            hotImageBtn = (ImageButton) itemView.findViewById(R.id.hot_imagebutton);
            hotCountTv = (TextView) itemView.findViewById(R.id.hot_count_textview);
        }
    }

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }

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

        void onItemLongClick(View view, int position);
    }
}

4.下载源码

http://pan.baidu.com/s/1bnk4znx