android RecyclerView 瀑布流使用詳解

爲了解決ListView運行效率低,不能實現橫向滾動的確定,Android在V7的包中新增了RecyclerView控件,RecyclerView除了可以輕鬆實現ListView的功能外還優化了ListView的不足之處以及能實現橫向滾動和瀑布流。

爲了方便理解,先用RecyclerView來實現ListView的功能:
這裏寫圖片描述

很醜是不是? 沒關係,今天我們的主角是瀑布流。這個就先將就一下,我總結了一下實現使用RecyclerView的一般步驟(這個例子使用的是android Studio平臺):

1、RecyclerView是新增的控件,爲了兼容低版本需要在buid.gredle中添加對應的庫。
compile 'com.android.support:recyclerview-v7:24.2.1'
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    testCompile 'junit:junit:4.12'
}
2、和ListView一樣,需要提供一個數據源。
3、在佈局文件中添加一個RecyclerView控件。
<android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
4、在Activity中關聯控件並且進行一些設置。

RecyclerView一共有三個Manager類:LinearLayoutManager,StaggeredGridLayoutManager, GridLayoutManager。分別對應RecyclerView的三種模式:線性流佈局,瀑布流佈局,網格流佈局。

 RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);//1、關聯UI
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);//2、實例化理類
        recyclerView.setLayoutManager(linearLayoutManager);//3、設置管理類
        RecyclerAdapter adapter = new RecyclerAdapter(r_Image, r_Name);//4、實例化適配器
        recyclerView.setAdapter(adapter);//5、設置適配器
5、爲適配器創建一個佈局文件。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="horizontal">
    <ImageView
        android:layout_width="120sp"
        android:layout_height="120sp"
        app:srcCompat="@drawable/aa"
        android:id="@+id/imageView" />
    <TextView
        android:text="TextView"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="22dp"
        android:paddingLeft="10sp"
        android:textSize="16sp"
        android:id="@+id/textView" />
</LinearLayout>
6、創建一個適配器RecyclerView.Adapter的子類並且重寫三個必需重寫的方法:
public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {      //創建Holder實例並且返回,Holder用來緩存實例優化響應效率。
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_ayout, parent, false);
        final ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }
    //構造函數,傳遞兩個參數爲RecyclerView的數據源數據,這裏用兩個數組來提供數據
    public RecyclerAdapter(int[] r_Image, String[] r_Name) {
        this.r_Image = r_Image;
        this.r_Name = r_Name;
    }

    @Override
    public void onBindViewHolder(RecyclerAdapter.ViewHolder holder, int position) {
    //更新UI
        holder.imageView.setImageResource(r_Image[position]);
        holder.textView.setText(r_Name[position]);

    }

    @Override
    public int getItemCount() {//返回子項個數
        return r_Image.length;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;

        public ViewHolder(View itemView) {//關聯UI控件
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageView);
            textView = (TextView) itemView.findViewById(R.id.textView);
        }
    }

上面就實現了線性流佈局的垂直滾動,如果需要改成橫向滾動只需要在上面步驟4中,在爲RecyclerView設置佈局方式之前將佈局管理器設置成橫向就可以:
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//設置滾動方向

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);//2、實例化理管理類
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//設置滾動方向
        recyclerView.setLayoutManager(linearLayoutManager);//3、設置管理類

對比ListView來理解,就會發現RecyclerView比ListView更加簡單了。使用RecyclerView完成RecyclerView的線性流佈局後,要實現瀑布流佈局非常簡單,嚴格來說只要修改管理類就可以,但是爲了UI更加美觀,一般來來說我們都會修改一下UI的佈局。需要修改的兩個參數:

1、將LinearLayoutManager管理類更換成StaggeredGridLayoutManager類

StaggeredGridLayoutManager類有兩個參數,第一個爲int型,設置瀑布流的列數。第二個指定佈局的排列方向,我們設置爲縱向排列。

StaggeredGridLayoutManager linearLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
2、修改UI參數.

到這裏就可以實現瀑布流,但是爲了瀑布流的效果明顯,我還將提供數據的數組修改成了長短不一。
(完全沒有意義的一些數據,在代碼中隨便拷貝的)

 R.drawable.hh, R.drawable.ii, R.drawable.jj};
            private String r_Name[] = {"1 StaggeredGridLayoutManager linearLayoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);" +
            "        recyclerView.setLayoutManager(linearLayoutManage", "2setLayoutManager(linearLayoutMa", "3setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",            "4setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "5setLayoutManager(linearLayoutMa",            "6setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "7setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",
            "8setLayoutManager(linearLayoutMa", "9setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "10setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa"};

效果圖:
這裏寫圖片描述

瀑布流,圖片配上英文說明,倍有B格是不是!!!


完整源碼分割線

兩個例子的代碼非常相似,這裏只貼瀑布流的實現源碼:

buid.gredle修改後:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "25.0.1"
    defaultConfig {
        applicationId "com.example.administrator.class_recyclerviewtest"
        minSdkVersion 15
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    testCompile 'junit:junit:4.12'
}

Activity類:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;

import java.util.List;

public class MainActivity extends AppCompatActivity {
    private int r_Image[] = {R.drawable.aa, R.drawable.bb, R.drawable.cc,
            R.drawable.dd, R.drawable.ee, R.drawable.ff, R.drawable.gg,
            R.drawable.hh, R.drawable.ii, R.drawable.jj};
            private String r_Name[] = {"1 StaggeredGridLayoutManager linea anager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);" +
            "        recyclerView.setLayoutManager(linear tManage", "2setLayoutManager(linearLayoutMa", "3setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",
            "4setLayoutManager(linearyoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "5setLayoutManager(linearLayoutMa",
            "6setLa rLayoutMasetLayoutManager(linearLayo youtManager(linearLayoutMasetLayoutManager(linearLayoutMa", "7setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa",
            "8setLayoutManager(linearLayoutMa", "9setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa", "10setLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMasetLayoutManager(linearLayoutMa"};
    private List<List<String>> r_list = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);//1、關聯UI
//        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);//2、實例化理類
//        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//設置滾動方向
        StaggeredGridLayoutManager linearLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

        recyclerView.setLayoutManager(linearLayoutManager);//3、設置管理類
        RecyclerAdapter adapter = new RecyclerAdapter(r_Image, r_Name);//4、實例化適配器
        recyclerView.setAdapter(adapter);//5、設置適配器
    }
}

自定義適配器類:

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
//import android.R;

/**
 * Created by Administrator on 2016/12/12 0012.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    private int[] r_Image;
    private String[] r_Name;

    @Override
    public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_ayout, parent, false);
        final ViewHolder viewHolder = new ViewHolder(view);
        viewHolder.textView.setOnClickListener(new View.OnClickListener() {
            @Override//點擊事件監聽
            public void onClick(View view) {
                int position = viewHolder.getAdapterPosition();
                Toast.makeText(view.getContext(), r_Name[position], Toast.LENGTH_SHORT).show();
            }
        });
        viewHolder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override//點擊事件監聽
            public void onClick(View view) {
                int position = viewHolder.getAdapterPosition();
                Toast.makeText(view.getContext(), r_Name[position] + "Imange", Toast.LENGTH_SHORT).show();
            }
        });
        return viewHolder;
    }

    public RecyclerAdapter(int[] r_Image, String[] r_Name) {
        this.r_Image = r_Image;
        this.r_Name = r_Name;
    }

    @Override
    public void onBindViewHolder(RecyclerAdapter.ViewHolder holder, int position) {
        holder.imageView.setImageResource(r_Image[position]);
        holder.textView.setText(r_Name[position]);

    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;

        public ViewHolder(View itemView) {//關聯UI控件
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageView);
            textView = (TextView) itemView.findViewById(R.id.textView);
        }
    }

UI佈局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.class_recyclerviewtest.MainActivity">

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

RecyclerView適配器佈局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="120sp"
        android:layout_height="120sp"
        app:srcCompat="@drawable/aa"
        android:id="@+id/imageView" />
    <TextView
        android:text="TextView"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="22dp"
        android:paddingLeft="10sp"
        android:textSize="16sp"
        android:id="@+id/textView" />
</LinearLayout>

http://blog.csdn.net/q296264785/article/details/53316772

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章