使用FlexboxLayoutManager来实现流式布局

在项目中经常会用到流式布局,以前一直是使用鸿洋开源的哪个版本,然后在其上进行修改,之前看到了google开源了一个FlexboxLayoutManager的控件,也可以实现流式布局,但是一直也没有细看。今天偶然又见到一篇相关的文章,这里简单做一个记录,以备以后使用。
[官方地址](https://github.com/google/flexbox-layout)
这里注意,它默认给出的版本是androidX使用的,你看一下它下面的说明,非X使用的版本在里面有说明。
好不多说,直接上代码,这里的流式布局,采用的是RecyclerView + FlexboxLayoutManager来实现的。
我这里写到了fragment里,主要是当时为了试一下新写的懒惰加载功能。
fragment_one.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">

<android.support.v7.widget.RecyclerView
android:id="@+id/rv_Flexbox"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

</LinearLayout>

FragmentOne.java

public class FragmentOne extends BaseFragment {

private RecyclerView rv_Flexbox;
private List<String> list_data;
private FlexBoxAdapter fAdapter;
//private FlexboxLayoutManager flexboxLayoutManager;

private Context mContext;

public FragmentOne(Context mContext) {

this.mContext = mContext;
}

@Override
protected void initView(View rootView) {
rv_Flexbox = (RecyclerView)rootView.findViewById(R.id.rv_Flexbox);
FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(mContext);
//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<>();
fAdapter = new FlexBoxAdapter(getActivity(),list_data);
rv_Flexbox.setAdapter(fAdapter);

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

@Override
protected int getLayoutRes() {
return R.layout.fragment_one;
}

private void initData()
{
list_data.add("这里");
list_data.add("是设置");
list_data.add("的子元素");
list_data.add("的属性");
list_data.add("设置的");
list_data.add("属性可以参考");
list_data.add("上面的介绍。效");
list_data.add("果图如");
list_data.add("下");
list_data.add("轻轻松松");
fAdapter.notifyDataSetChanged();
}

@Override
public void onFragmentLoad() {
super.onFragmentLoad();

if(list_data.size() == 0)
{
initData();
}
}

@Override
public void onFragmentLoadStop() {
super.onFragmentLoadStop();
}
}

FlexBoxAdapter.java

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));

// 如果设置了回调,则设置点击事件
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;
}
}

fragment_rv_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="@drawable/flex_item_bg">

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标题"
android:textSize="15sp"
android:textColor="#333333"
android:layout_gravity="center"/>

</LinearLayout>

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>

对于 FlexboxLayoutManage,还有很多好玩的使用,这里给出一个兄弟的地址

FlexboxlayoutManage的其它应用

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 使用FlexboxLayoutManager来实现流式布局
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏