所谓金刚区

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

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

淘宝

QQ音乐

简单用RecyclerView和一个可滚动的View封装了一下。

TransformersLayout

主角登场，GitHub地址：https://github.com/zaaach/TransformersLayout

preview

• 每页行数、列数可配置
• 滚动状态自动恢复
• 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属性：

最后

既然都看到这里了，就给个star吧！https://github.com/zaaach/TransformersLayout ღ( ´･ᴗ･` )