【Android】多种方式实现流式布局

前言

我们经常会遇到那种标签式的布局,宽度固定高度不固定,每个标签的宽度还不固定,这种我们一般称之为"流式布局",下面我就简单实现下

FlexboxLayoutManager+ RecyclerView实现流式布局

这个很简单,就跟我们平时使用RecyclerView是一样的,只不过设置LayoutManager的时候换成FlexboxLayoutManager

具体我们先看效果

这里我们简单帖下代码

首先引入相应的依赖

  implementation 'androidx.recyclerview:recyclerview:1.2.0-alpha01'
    implementation 'com.google.android:flexbox:1.1.0'

接下来就和我们平时一样了

public class RecyclerViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler_view);
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new FlexboxLayoutManager(this));
        FlowRecyclerViewAdapter adapter = new FlowRecyclerViewAdapter(DataManager.getData());
        recyclerView.setAdapter(adapter);
    }
}

public class FlowRecyclerViewAdapter extends RecyclerView.Adapter<FlowRecyclerViewAdapter.ViewHolder> {

    private List<String> mDataList;

    public FlowRecyclerViewAdapter(List<String> list) {
        mDataList = list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_flow, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.mTextView.setText(mDataList.get(position));
    }

    @Override
    public int getItemCount() {
        return mDataList == null ? 0 : mDataList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView mTextView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mTextView = itemView.findViewById(R.id.tv_item);
        }
    }
}

自定义View

这种就是我们自己实现这个效果了,如果你是在不想自己写可以使用现成的,原理都差不多,这里用的是张红洋大神写的一个

github地址

我们先看看效果
具体的原理这里就不多说了,感兴趣的可以看看源码

我们下面帖下用法

public class FlowLayoutActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flow_layout);
        TagFlowLayout tagFlowLayout = findViewById(R.id.flow_layout);
        FlowAdapter adapter = new FlowAdapter(DataManager.getData());
        tagFlowLayout.setAdapter(adapter);
    }
}

public class FlowAdapter extends TagAdapter<String> {
    public FlowAdapter(List<String> datas) {
        super(datas);
    }

    @Override
    public View getView(FlowLayout parent, int position, String s) {
        ItemView itemView = new ItemView(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_flow, parent, false));
        itemView.mTextView.setText(s);
        return itemView.itemView;
    }

    class ItemView extends RecyclerView.ViewHolder {

        private TextView mTextView;

        ItemView(@NonNull View itemView) {
            super(itemView);
            mTextView = itemView.findViewById(R.id.tv_item);
        }
    }
}

public class DataManager {

    public static List<String> getData() {
        List<String> list = new ArrayList<>();

        list.add("Test");
        list.add("Test Android");
        list.add("Test Java");
        list.add("Test Python");
        list.add("Test 444444444444455555555555544444444444444");
        list.add("Test");
        list.add("Test Android");
        list.add("Test Java");
        list.add("Test Python");
        list.add("Test 666666");
        list.add("Test");
        list.add("Test Android");
        list.add("Test Java");
        list.add("Test Python");
        list.add("Test 88888888888888888");

        return list;
    }
}