likes
comments
collection
share

TransformersLayout:类似淘宝APP的金刚区导航菜单

作者站长头像
站长
· 阅读数 6

所谓金刚区

“金刚区"是位于APP顶部Banner下方的功能入口导航区域,通常以“图标+文字”的宫格导航的形式出现(例如淘宝、饿了么app)。之所以叫“金刚区”,是因为该区域会随着业务目标的改变,展示不同的功能图标,就像“变形金刚”一样可以百变.

先看下淘宝和QQ音乐的金刚区样式

TransformersLayout:类似淘宝APP的金刚区导航菜单 TransformersLayout:类似淘宝APP的金刚区导航菜单 简单用RecyclerView和一个可滚动的View封装了一下。

TransformersLayout

主角登场,GitHub地址:github.com/zaaach/Tran…

TransformersLayout:类似淘宝APP的金刚区导航菜单

  • 每页行数、列数可配置
  • 滚动状态自动恢复
  • item布局样式自定义
  • scrollbar样式可配置

如何使用

Step 1: xml布局文件

<com.zaaach.transformerslayout.TransformersLayout                                         
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    app:tl_spanCount="5"
    app:tl_lines="2"
    app:tl_scrollbarWidth="72dp"
    app:tl_scrollbarHeight="4dp"
    app:tl_scrollbarRadius="2dp"
    app:tl_scrollbarMarginTop="6dp"
    app:tl_scrollbarTrackColor="#f0f0f0"
    app:tl_scrollbarThumbColor="#FFC107"/>

Step 2: 自定义ViewHolder,第三步需要用到

public class NavAdapterViewHolder extends Holder<Nav> {
    private ImageView icon;
    private TextView text;

    NavAdapterViewHolder(@NonNull View itemView) {
        super(itemView);
    }

    @Override
    protected void initView(View itemView) {
        icon = itemView.findViewById(R.id.iv_menu_icon);
        text = itemView.findViewById(R.id.tv_menu_text);
    }

    @Override
    public void bindData(Context context, Nav data) {
        text.setText(data.getText());
        Glide.with(context)
                .asBitmap()
                .fitCenter()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .placeholder(R.drawable.default_place_holder)
                .load(data.getUrl())
                .into(icon);
    }
}

Step 3: java代码中使用

List<Nav> navList = DataFactory.loadData();
TransformersLayout<Nav> header = findViewById();
//options可选配置
TransformersOptions options = new TransformersOptions.Builder()
        .lines(2)
        .spanCount(5)
        .scrollBarWidth(Util.dp2px(this, 40))
        .scrollBarHeight(Util.dp2px(this, 3))
        .scrollBarRadius(Util.dp2px(this, 3) / 2f)
        .scrollBarTopMargin(Util.dp2px(this, 6))
        .build();
header.apply(options)
        .addOnTransformersItemClickListener(new OnTransformersItemClickListener() {
            @Override
            public void onItemClick(int position) {
                showToast();
            }
        })
        .load(navList, new TransformersHolderCreator<Nav>() {
            @Override
            public Holder<Nav> createHolder(View itemView) {
                return new NavAdapterViewHolder(itemView);
            }
            @Override
            public int getLayoutId() {
                return R.layout.item_nav_list;
            }
        });

支持的attrs属性:

Attributes Format Description
tl_spanCount integer 每页列数,默认5
tl_lines integer 每页行数,默认2
tl_scrollbarWidth dimension | reference scrollbar宽度,默认36dp
tl_scrollbarHeight dimension | reference scrollbar高度,默认3dp
tl_scrollbarMarginTop dimension | reference scrollbar上间距
tl_scrollbarRadius dimension | reference scrollbar圆角,默认高度的一半
tl_scrollbarTrackColor color | reference scrollbar轨道颜色色
tl_scrollbarThumbColor color | reference scrollbar高亮颜色

最后

既然都看到这里了,就给个star吧!github.com/zaaach/Tran… ღ( ´・ᴗ・` )

转载自:https://juejin.cn/post/6844904009308831757
评论
请登录