【Android】14.0 UI開發（五）——列表控件RecyclerView的瀑布布局排列實現

1.0 列表控件RecyclerView的瀑布布局排列實現，關鍵詞StaggeredGridLayoutManager

LinearLayoutManager 實現順序布局；

GridLayoutManager 實現網格布局；

StaggeredGridLayoutManager 實現瀑布流布局；

2.0 新建項目RecyclerviewTest，目錄如下：
image
3.0 這里需要在app/build.gradle中配置，導入依賴包：
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:recyclerview-v7:28.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

紅色標簽這行加入，后面的版本號和support:appcompat一致即可。

4.0 將之前項目中的構造類復制過來，省去重復編寫代碼的時間。

Province.java

package com.example.recyclerviewtest;

public class Province {
    private String name;
    public Province(String name){
        this.name = name;
    }

    public String getName() {
        return name;
    }
}
 

ProvinceAdapter.java，這里代碼進行了修改，并在代碼中做以說明：

package com.example.recyclerviewtest;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class ProvinceAdapter extends RecyclerView.Adapter<ProvinceAdapter.ViewHolder> {
    private List<Province> mProvinceList;
    private int resourceId;


//    定義一個內部類ViewHolder,該類繼承自RecyclerView.ViewHolder。
//    需要傳入一個View參數，通常是RecyclerView子項最外層布局
    static class ViewHolder extends RecyclerView.ViewHolder {
        //        ImageView provinceImage;
        TextView provinceName;

        public ViewHolder(View view) {
            super(view);
            provinceName = (TextView) view.findViewById(R.id.province_name);
        }
    }

//    該構造函數作用是將數據源賦值給一個全局變量mProvinceList
    public ProvinceAdapter(List<Province> provinceList) {
        mProvinceList = provinceList;
    }

//  由于ProvinceAdapter是繼承自RecyclerView.Adapter，
//  所以需要重寫三個方法：
// onCreateViewHolder() ：創建ViewHolder實例，將局部加載進來
//  onBindViewHolder() ：對RecyclerView子項數據進行賦值
//  getItemCount()

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.province_item,
                viewGroup,
                false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position
    ) {
        Province province = mProvinceList.get(position);
        holder.provinceName.setText(province.getName());
    }

    @Override
    public int getItemCount() {
        return mProvinceList.size();
    }
}
5.0 在activity_main.xml布局文件中，寫入RecyclerView布局，因為RecyclerView不是SDK內置布局，所以需要把全稱寫進去
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
6.0 province_item.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp">

    <TextView
        android:id="@+id/province_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="left"
        android:layout_marginTop="10dp"/>
</android.support.constraint.ConstraintLayout>
7.0 MainActivity.java
package com.example.recyclerviewtest;

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

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MainActivity extends AppCompatActivity {
    private List<Province> provincelist = new ArrayList<>();
    private String[] data = {
            "廣西壯族自治區", "內蒙古自治區", "寧夏回族自治區", "西藏藏族自治區", "新疆維吾爾自治區", "香港特別行政區", "澳門特別行政區",
            "北京市", "天津市", "上海市", "重慶市", "吉林省", "遼寧省", "黑龍江省",
            "河北省", "河南省", "安徽省", "甘肅省", "山東省",
            "湖南省", "湖北省", "江蘇省", "浙江省", "江西省",
            "云南省", "廣西省", "貴州省", "海南省", "臺灣省",};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initProvince();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,
                StaggeredGridLayoutManager.VERTICAL);


//        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
//        調用下面這行代碼可以實現布局橫向排列
//        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

//        GridLayoutManager 實現網格布局
//        StaggeredGridLayoutManager 實現瀑布流布局


//        和ListView不同的地方在于，ListView的布局排列是由自身去管理
//        而RecyclerView則將這個工作交給LayoutManager，它制定了一套可擴展的布局排列接口
//        子類只要按照接口的規范來實現，就能定制出不同排列方式的布局了
        recyclerView.setLayoutManager(layoutManager);
        ProvinceAdapter adapter = new ProvinceAdapter(provincelist);
        recyclerView.setAdapter(adapter);
    }


    public void initProvince() {
        for (String dataone : data) {
            Province province = new Province(getRandomLengthName(dataone));
            provincelist.add(province);
        }
    }

    private String getRandomLengthName(String name) {
        Random random = new Random();
        int length = random.nextInt(20) + 1;
        StringBuilder builder = new StringBuilder();
        for (int i = 0; i < length; i++) {
            builder.append(name);
        }
        return builder.toString();
    }

}

這里用了一個getRandomLengthName()方法，用于將布局的名字多打印幾次，便于觀察實際顯示效果。

8.0 運行效果如下：
image

END

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.0 新建項目，由于ListView的局限性，RecyclerView是一種很好取代ListView的控件，可以...
    bobokaka閱讀 2,875評論 0贊 2
  • RecyclerView是support:recyclerview-v7中提供的控件，最低兼容到android 3...
    8ba406212441閱讀 741評論 0贊 0
  • 嘴里叼著一袋牛奶，啃著放了一周的蘋果，看著遙遙無期的未來。 是誰說的等待是件耐人尋味的事?在這漫長的等待中，我看到...
    零度以下的境界線閱讀 687評論 0贊 0
  • 最幸福的就是我啦，感賞老公宿舍里的熱水器，可以讓我想什么時候洗澡就什么時候洗澡，非常方便暖和，又不像老家，大冷天只...
    張嘉芮同閱讀 122評論 0贊 0
  • 最近幾天是被人民的名義拖累了，但是并不是完全被它拖累了好嘛？ 我約了靜靜見面，因為有班委通知在前面哦 但是靜靜卻沒...
    Janetff閱讀 98評論 2贊 1