Flexbox+ReclyclerView實現(xiàn)流式布局
本文實例為大家分享了Flexbox+ReclyclerView實現(xiàn)流式布局的具體代碼,供大家參考,具體內(nèi)容如下
效果:

module build.gradle引入
implementation 'com.google.android.flexbox:flexbox:3.0.0'
布局
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_Flexbox"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
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<String> 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<FlexBoxAdapter.myHolder> {
private Context mContext;
private List<String> list_data;
private LayoutInflater inflater;
public FlexBoxAdapter(Context mContext, List<String> 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));
// 如果設置了回調(diào),則設置點擊事件
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
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- 填充-->
<solid android:color="#00000000"/>
<!-- 描邊 -->
<stroke
android:width="1dp"
android:color="#7F7F7F" />
<!-- 圓角 -->
<corners
android:radius="2dp" />
</shape>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android流式布局FlowLayout詳解
- Android流式布局實現(xiàn)歷史搜索記錄功能
- Android實現(xiàn)熱門標簽的流式布局
- Java Swing組件布局管理器之FlowLayout(流式布局)入門教程
- Android簡單實現(xiàn)自定義流式布局的方法
- Android自定義ViewGroup之實現(xiàn)FlowLayout流式布局
- Android 簡單實現(xiàn)一個流式布局的示例
- Android自定義流式布局/自動換行布局實例
- python GUI框架pyqt5 對圖片進行流式布局的方法(瀑布流flowlayout)
- android流式布局onLayout()方法詳解
相關文章
Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫
這篇文章主要介紹了Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01
詳解Android——藍牙技術(shù) 帶你實現(xiàn)終端間數(shù)據(jù)傳輸
藍牙技術(shù)在智能硬件方面有很多用武之地,本篇文章主要介紹了Android——藍牙技術(shù),實現(xiàn)兩個終端間數(shù)據(jù)的傳輸,有興趣的朋友可以了解一下。2016-12-12
Android中的SQL查詢語句LIKE綁定參數(shù)問題解決辦法(sqlite數(shù)據(jù)庫)
這篇文章主要介紹了Android中的SQL查詢語句LIKE綁定參數(shù)問題解決辦法,本文使用的是sqlite數(shù)據(jù)庫,需要的朋友可以參考下2014-06-06
Android中oncreate中獲得控件高度或?qū)挾鹊膶崿F(xiàn)方法
這篇文章主要介紹了Android中oncreate中獲得控件高度或?qū)挾鹊膶崿F(xiàn)方法的相關資料,希望通過本文大家能實現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09

