Android开发记录(九)-Flexbox和RecyclerView实现流式布局

通过Flexbox实现流式布局,效果:

  1. RecyclerView结合FlexboxLayoutManager实现流式布局

        FlexboxLayoutManager manager=new FlexboxLayoutManager(getContext());
        //设置主轴排列形式
        manager.setFlexDirection(FlexDirection.ROW);
        //设置是否换行
        manager.setFlexWrap(FlexWrap.WRAP);
        binding.navRv.setLayoutManager(manager);
        navListAdapter = new NavListAdapter(navResponseList,getContext());
        binding.navRv.setAdapter(navListAdapter);
  1. 通过getItemViewType重写,实现RecyclerView二级列表展示,根据type区分不同View展示数据

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.databinding.DataBindingUtil;
import androidx.recyclerview.widget.RecyclerView;

import com.jetpack.demo.R;
import com.jetpack.demo.databinding.NavItemBinding;
import com.jetpack.demo.databinding.NavSuperItemBinding;
import com.jetpack.demo.databinding.TopItemBinding;
import com.jetpack.demo.model.home.TopResponse;
import com.jetpack.demo.model.nav.NavResponse;

public class NavListAdapter extends RecyclerView.Adapter {
    private List<NavResponse.Articles> navResponses;
    private Context mContext;
    private int TYPE_SUPER = 0;
    private int TYPE_CHILD = 1;
    public NavListAdapter(List<NavResponse.Articles> navResponses, Context mContext) {
        this.navResponses = navResponses;
        this.mContext = mContext;
    }

    @NonNull
    @NotNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        if (viewType == TYPE_CHILD){
            NavItemBinding binding = DataBindingUtil.inflate(inflater, R.layout.nav_item,parent,false);
            return new MyViewHolder(binding.getRoot());
        }else {
            NavSuperItemBinding binding = DataBindingUtil.inflate(inflater, R.layout.nav_super_item,parent,false);
            return new MyViewHolder(binding.getRoot());
        }
    }

    @Override
    public void onBindViewHolder(@NonNull @NotNull RecyclerView.ViewHolder holder, int position) {
        NavResponse.Articles articles = navResponses.get(position);
        if (articles.chapterName == null){
            NavSuperItemBinding binding = DataBindingUtil.getBinding(holder.itemView);
            binding.tvNav.setText(navResponses.get(position).title);
            binding.executePendingBindings();
        }else {
            NavItemBinding binding = DataBindingUtil.getBinding(holder.itemView);
            binding.tvNav.setText(navResponses.get(position).title);
            binding.executePendingBindings();
        }
    }

    @Override
    public int getItemViewType(int position) {
        NavResponse.Articles articles = navResponses.get(position);
        return articles.chapterName == null?TYPE_SUPER:TYPE_CHILD;
    }

    @Override
    public int getItemCount() {
        return navResponses.size();
    }
    class MyViewHolder extends RecyclerView.ViewHolder{

        public MyViewHolder(@NonNull @NotNull View itemView) {
            super(itemView);
        }
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flexbox(Flexible Box)是CSS3中的新特性,是一种用于页面布局的模型,它可以让我们更加简单和高效地进行页面布局。下面是使用Flexbox实现盒子布局的步骤: 1. 父容器设置为flex布局 在父容器中,我们需要将其设置为flex布局,这可以通过设置display属性为flex来实现,例如: ``` .container { display: flex; } ``` 2. 设置子元素的排列方式 在父容器中,我们需要设置子元素的排列方式,这可以通过设置flex-direction属性来实现,例如: ``` .container { display: flex; flex-direction: row; } ``` 上述代码中,我们设置子元素按照行(row)方向排列。 3. 设置子元素的对齐方式 在父容器中,我们还可以设置子元素的对齐方式,这可以通过设置justify-content和align-items两个属性来实现,例如: ``` .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } ``` 上述代码中,我们设置子元素在水平方向上居中对齐,并且在垂直方向上也居中对齐。 4. 设置子元素的大小和位置 在父容器中,我们还可以设置子元素的大小和位置,这可以通过设置flex属性来实现,例如: ``` .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .item { flex: 1; } ``` 上述代码中,我们设置子元素的flex属性为1,表示子元素会根据父容器的剩余空间来分配大小和位置。 综上所述,使用Flexbox可以让我们更加便捷地进行页面布局,同时也提高了页面的响应能力和可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值