Recycler實現瀑布流

(開發環境Android studio)java

首先,在開發環境中添加引用(在外層的build.gradle文件下的dependencies裏面添加以下引用)android

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'

創造咱們須要的Java Bean對象類 myDogs.javaapp

對應代碼以下:ide

public class myDogs {
    
    private String dogName;
    
    private int imgId;

    public String getDogName() {
        return dogName;
    }

    public void setDogName(String dogName) {
        this.dogName = dogName;
    }

    public int getImgId() {
        return imgId;
    }

    public void setImgId(int imgId) {
        this.imgId = imgId;
    }
}

對於咱們的RecyclelerView子項,咱們建立子項佈局文件佈局

my_dog_item.xml(對於子項,咱們使用cardview佈局,這也就是第剛開始的時候第二行引用的做用)gradle

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    android:padding="4dp"
    app:cardBackgroundColor="#ffffffff"
    app:cardCornerRadius="15dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/myDog_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/myDog_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.v7.widget.CardView>

其中:ui

cardCornerRadius="15dp"

保證每個子項擁有15dp的圓角this

而後建立適配器myDogAdapter.java從RecyclerView.Adapter<>繼承spa

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.ImageView;
import android.widget.TextView;

import java.util.List;

public class myDogAdapter extends RecyclerView.Adapter<myDogAdapter.myDogViewHolder> {

    private Context mcontext;

    private List<myDog> myDogs;

    public myDogAdapter(List<myDog> myDogs , Context context){
        this.myDogs = myDogs;
        this.mcontext = context;
    }

    @NonNull
    @Override
    public myDogAdapter.myDogViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.my_dog_item,viewGroup,false);
        return new myDogViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull myDogAdapter.myDogViewHolder holder, int position) {
        myDog myDogDemo = myDogs.get(position);
        holder.myDogImage.setImageResource(myDogDemo.getImgId());
        holder.myDogName.setText(myDogDemo.getDogName());
    }

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


    class myDogViewHolder extends RecyclerView.ViewHolder{
        ImageView myDogImage;
        TextView myDogName;
        public myDogViewHolder(@NonNull View itemView) {
            super(itemView);
            myDogImage = itemView.findViewById(R.id.myDog_image);
            myDogName = itemView.findViewById(R.id.myDog_name);
        }
    }
}

而後,編寫MainActivity裏面的內容:code

<?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"
    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="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

這裏面只放置了一個RecyclerView並讓它填充佈局

而後咱們開始編寫MainActivity.java裏面的內容

package edu.henu.www.recyclelerview;

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

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;
import java.util.ListIterator;

public class MainActivity extends AppCompatActivity {

    //建立與佈局中相對應的對象;
    private RecyclerView recyclerView;
    //建立用於顯示的對象集;
    private List<myDog> myDogs = new ArrayList<>();


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

        //將佈局中相應的對象傳入
        recyclerView = this.findViewById(R.id.recycler_view);

        //設置瀑布流核心代碼,設置瀑布流列數,並設置瀑布流方向;
        StaggeredGridLayoutManager recyclerViewLayoutManager = new StaggeredGridLayoutManager(2 , StaggeredGridLayoutManager.VERTICAL);

        //設置佈局管理器
        recyclerView.setLayoutManager(recyclerViewLayoutManager);

        //初始化對象;
        initDogs();

        //建立Adapter對象;
        myDogAdapter adapter = new myDogAdapter(this.myDogs , this);

        //設置適配器
        recyclerView.setAdapter(adapter);

    }

    private void initDogs(){
        myDog dog;
        for (int i = 0; i < 10; i++) {
            dog = new myDog("小狗狗" + i,R.drawable.d1);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i ,R.drawable.d2);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d3);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d4);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d5);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d6);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d6);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d7);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d8);
            myDogs.add(dog);
            dog = new myDog("小狗狗" + i,R.drawable.d9);
            myDogs.add(dog);
        }
    }


}

圖片資源須要本身填充到Android項目目錄下

 實現效果如圖

 

 

參考文章:https://www.jianshu.com/p/02be426fda0a

相關文章
相關標籤/搜索