0
点赞
收藏
分享

微信扫一扫

Flexbox+ReclyclerView实现流式布局(简单好用)

效果:
Flexbox+ReclyclerView实现流式布局(简单好用)_xml
module build.gradle引入

implementation 'com.google.android.flexbox:flexbox:3.0.0'

布局
activity_main.xml


android:layout_width="match_parent"
android:layout_height="match_parent">

android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:id="@+id/rv_Flexbox"
android:layout_width="match_parent"
android:layout_height="match_parent"/>






MainActivity

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.util.Log;
import android.view.View;

import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;

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

public class MainActivity extends AppCompatActivity {

private RecyclerView rv_Flexbox;
private List list_data;
private FlexBoxAdapter fAdapter;

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

rv_Flexbox = (RecyclerView)findViewById(R.id.rv_Flexbox);
FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
//flexDirection 属性决定主轴的方向(即项目的排列方向)。类似 LinearLayout 的 vertical 和 horizontal。
flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主轴为水平方向,起点在左端。
//flexWrap 默认情况下 Flex 跟 LinearLayout 一样,都是不带换行排列的,但是flexWrap属性可以支持换行排列。
// flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向换行
//justifyContent 属性定义了项目在主轴上的对齐方式。
// flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉轴的起点对齐。
rv_Flexbox.setLayoutManager(flexboxLayoutManager);

list_data = new ArrayList<>();
list_data.add("小米手机");
list_data.add("平衡車");
list_data.add("无人机");
list_data.add("神舟笔记本电脑");
list_data.add("小鹏汽车");
list_data.add("特斯拉");
fAdapter = new FlexBoxAdapter(this,list_data);
// fAdapter.notifyDataSetChanged();
rv_Flexbox.setAdapter(fAdapter);

fAdapter.setOnItemClickLitener(new FlexBoxAdapter.OnItemClickLitener() {
@Override
public void OnItemClick(View view, int positon) {
Log.e("wy", "position: "+positon+" data:" + list_data.get(positon));
}
});
}
}

FlexBoxAdapter

package com.example.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class FlexBoxAdapter extends RecyclerView.Adapter {

private Context mContext;
private List list_data;
private LayoutInflater inflater;

public FlexBoxAdapter(Context mContext, List list_data) {
this.mContext = mContext;
this.list_data = list_data;
this.inflater = LayoutInflater.from(mContext);
}

@NonNull
@Override
public myHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

View view = inflater.inflate(R.layout.fragment_rv_item,viewGroup,false);

return new myHolder(view);
}



@Override
public void onBindViewHolder(@NonNull final myHolder myHolder, int i) {
myHolder.tv_title.setText(list_data.get(i));

// 如果设置了回调,则设置点击事件
if (mOnItemClickLitener != null)
{
myHolder.itemView.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v)
{
int pos = myHolder.getLayoutPosition();
mOnItemClickLitener.OnItemClick(myHolder.itemView, pos);
}
});


}
}

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

class myHolder extends RecyclerView.ViewHolder
{

TextView tv_title;

public myHolder(@NonNull View itemView) {
super(itemView);

tv_title = (TextView)itemView.findViewById(R.id.tv_title);
}
}

/**
* 定义点击每项的接口
*/
public interface OnItemClickLitener
{
void OnItemClick(View view, int positon);
}

private OnItemClickLitener mOnItemClickLitener;

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


drawable下
flex_item_bg.xml






android:width="1dp"
android:color="#7F7F7F" />

android:radius="2dp" />


fragment_rv_item


android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
android:id="@+id/tv_title"
android:text="@string/about"
android:padding="5dp"
android:background="@drawable/flex_item_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>



举报

相关推荐

0 条评论