1. 程式人生 > >RecyclerView實現多種佈局樣式

RecyclerView實現多種佈局樣式

1、新增依賴

compile 'com.android.support:recyclerview-v7:25.3.0'

2、佈局

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

item

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:padding="5dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_centerInParent="true" android:background="@mipmap/ic_launcher" android:id
="@+id/item_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop"/>
<TextView android:layout_marginTop="10dp" android:text="標題" android:id="@+id/item_tv" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="@id/item_iv" android:layout_centerHorizontal="true" android:gravity="center" android:textSize="18sp"/>
</RelativeLayout>

3、程式碼

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv;
    //圖片陣列
    private int[] mListIcons = new int[]{R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
            R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round
    };
    //標題陣列
    private String[] mListTitle = new String[]{"標題1","標題2","標題3","標題4","標題5","標題6","標題7","標題8",
            "標題9","標題10","標題11","標題12","標題13","標題14","標題15","標題16","標題17","標題18","標題19","標題20"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv = (RecyclerView) findViewById(R.id.rv);
        initData();
    }

    private void initData() {
        //樣式,boolean代表展示的方向
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        rv.setLayoutManager(linearLayoutManager);
        //資料
        rv.setAdapter(new RecyclerView.Adapter() {
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                View view = View.inflate(parent.getContext(), R.layout.rv_item, null);
                RecyclerView.ViewHolder viewHolder = new RvViewholder(view);
                return viewHolder;
            }

            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                //進行資料設定
                RvViewholder myViewholder = (RvViewholder) holder;
                //設定圖片
                myViewholder.itemIv.setImageResource(mListIcons[position]);
                //設定標題資料
                myViewholder.itemTv.setText(mListTitle[position]);
            }

            @Override
            public int getItemCount() {
                return mListIcons.length;
            }

            class RvViewholder extends RecyclerView.ViewHolder {

                public ImageView itemIv;
                public TextView itemTv;

                /**
                 * 初始化控制元件
                 */
                public RvViewholder(View itemView) {
                    super(itemView);
                    itemIv = (ImageView) itemView.findViewById(R.id.item_iv);
                    itemTv = (TextView) itemView.findViewById(R.id.item_tv);
                }
            }
        });
    }
}

可以通過new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);設定橫向或者縱向列表
效果圖:
這裡寫圖片描述
4、改變樣式,實現GridView樣式

//建立一個豎橫的listView
//LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
//建立一個豎橫的gridView
GridLayoutManager layoutManager = new GridLayoutManager(this, 3 ,GridLayoutManager.VERTICAL,false);
rv.setLayoutManager(layoutManager);

效果圖:
這裡寫圖片描述
5、瀑布流樣式

StaggeredGridLayoutManager layout = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
rv.setLayoutManager(layout);