所謂金剛區(qū)

“金剛區(qū)"是位于APP頂部Banner下方的功能入口導航區(qū)域西潘，通常以“圖標+文字”的宮格導航的形式出現(xiàn)（例如淘寶士修、餓了么app）破加。之所以叫“金剛區(qū)”骡技，是因為該區(qū)域會隨著業(yè)務目標的改變色建，展示不同的功能圖標论衍，就像“變形金剛”一樣可以百變.

先看下淘寶和QQ音樂的金剛區(qū)樣式

淘寶

QQ音樂

簡單用RecyclerView和一個可滾動的View封裝了一下购裙。

TransformersLayout

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

preview

• 每頁行數(shù)晨另、列數(shù)可配置
• 滾動狀態(tài)自動恢復
• 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 ?( ′???` )