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()方法詳解
相關(guān)文章
Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫
這篇文章主要介紹了Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01詳解Android——藍牙技術(shù) 帶你實現(xiàn)終端間數(shù)據(jù)傳輸
藍牙技術(shù)在智能硬件方面有很多用武之地,本篇文章主要介紹了Android——藍牙技術(shù),實現(xiàn)兩個終端間數(shù)據(jù)的傳輸,有興趣的朋友可以了解一下。2016-12-12Android中的SQL查詢語句LIKE綁定參數(shù)問題解決辦法(sqlite數(shù)據(jù)庫)
這篇文章主要介紹了Android中的SQL查詢語句LIKE綁定參數(shù)問題解決辦法,本文使用的是sqlite數(shù)據(jù)庫,需要的朋友可以參考下2014-06-06Android中oncreate中獲得控件高度或?qū)挾鹊膶崿F(xiàn)方法
這篇文章主要介紹了Android中oncreate中獲得控件高度或?qū)挾鹊膶崿F(xiàn)方法的相關(guān)資料,希望通過本文大家能實現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09