Flexbox+ReclyclerView實(shí)現(xiàn)流式布局
本文實(shí)例為大家分享了Flexbox+ReclyclerView實(shí)現(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 屬性決定主軸的方向(即項(xiàng)目的排列方向)。類(lèi)似 LinearLayout 的 vertical 和 horizontal。
flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主軸為水平方向,起點(diǎn)在左端。
//flexWrap 默認(rèn)情況下 Flex 跟 LinearLayout 一樣,都是不帶換行排列的,但是flexWrap屬性可以支持換行排列。
// flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向換行
//justifyContent 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
// flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉軸的起點(diǎn)對(duì)齊。
rv_Flexbox.setLayoutManager(flexboxLayoutManager);
list_data = new ArrayList<>();
list_data.add("小米手機(jī)");
list_data.add("平衡車(chē)");
list_data.add("無(wú)人機(jī)");
list_data.add("神舟筆記本電腦");
list_data.add("小鵬汽車(chē)");
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));
// 如果設(shè)置了回調(diào),則設(shè)置點(diǎn)擊事件
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);
}
}
/**
* 定義點(diǎn)擊每項(xiàng)的接口
*/
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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android流式布局FlowLayout詳解
- Android流式布局實(shí)現(xiàn)歷史搜索記錄功能
- Android實(shí)現(xiàn)熱門(mén)標(biāo)簽的流式布局
- Java Swing組件布局管理器之FlowLayout(流式布局)入門(mén)教程
- Android簡(jiǎn)單實(shí)現(xiàn)自定義流式布局的方法
- Android自定義ViewGroup之實(shí)現(xiàn)FlowLayout流式布局
- Android 簡(jiǎn)單實(shí)現(xiàn)一個(gè)流式布局的示例
- Android自定義流式布局/自動(dòng)換行布局實(shí)例
- python GUI框架pyqt5 對(duì)圖片進(jìn)行流式布局的方法(瀑布流flowlayout)
- android流式布局onLayout()方法詳解
相關(guān)文章
Android自定義View實(shí)現(xiàn)支付寶支付成功-極速get花式Path炫酷動(dòng)畫(huà)
這篇文章主要介紹了Android自定義View實(shí)現(xiàn)支付寶支付成功-極速get花式Path炫酷動(dòng)畫(huà)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01
Android指紋識(shí)別API講解,一種更快更好的用戶(hù)體驗(yàn)
今天小編就為大家分享一篇關(guān)于Android指紋識(shí)別API講解,一種更快更好的用戶(hù)體驗(yàn),小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-10-10
Android畢業(yè)設(shè)計(jì)備忘錄APP
這篇文章主要介紹了一個(gè)Android畢業(yè)設(shè)計(jì)備忘錄APP,它很小,但是功能很全,可實(shí)現(xiàn)添加、刪除、修改、查看的功能,使用Java語(yǔ)言開(kāi)發(fā),風(fēng)格簡(jiǎn)練2021-08-08
詳解Android——藍(lán)牙技術(shù) 帶你實(shí)現(xiàn)終端間數(shù)據(jù)傳輸
藍(lán)牙技術(shù)在智能硬件方面有很多用武之地,本篇文章主要介紹了Android——藍(lán)牙技術(shù),實(shí)現(xiàn)兩個(gè)終端間數(shù)據(jù)的傳輸,有興趣的朋友可以了解一下。2016-12-12
Android中的SQL查詢(xún)語(yǔ)句LIKE綁定參數(shù)問(wèn)題解決辦法(sqlite數(shù)據(jù)庫(kù))
這篇文章主要介紹了Android中的SQL查詢(xún)語(yǔ)句LIKE綁定參數(shù)問(wèn)題解決辦法,本文使用的是sqlite數(shù)據(jù)庫(kù),需要的朋友可以參考下2014-06-06
Android中oncreate中獲得控件高度或?qū)挾鹊膶?shí)現(xiàn)方法
這篇文章主要介紹了Android中oncreate中獲得控件高度或?qū)挾鹊膶?shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文大家能實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09
android實(shí)現(xiàn)在圖標(biāo)上顯示數(shù)字
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)在圖標(biāo)上顯示數(shù)字,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

