App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条

TransformersLayout

项目地址：zaaach/TransformersLayout 

简介： :fire: App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条

更多：作者   提 Bug   

标签：

 

  

:fire: APP 金刚区导航布局，下方带横向滚动条，很多 APP 都有使用这种，效果还不错就封装了一下:smile:

整体结构是 Recyclerview + 滚动条

Features

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

Preview

 

点击下载 APK 体验

Install

:mega:项目基于 AndroidX 构建，参考迁移指南：AndroidX 迁移

Step 1： 项目根目录的 build.gradle 添加如下配置：

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Step 2： app 添加依赖：

dependencies {
     implementation 'com.github.zaaach:TransformersLayout:x.y.z'
}

记得把x.y.z替换为中的数字

How to use

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 可选配置，会覆盖 xml 里的属性
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))
        .scrollBarTrackColor(Color.parseColor("#e5e5e5"))
        .scrollBarThumbColor(Color.parseColor("#658421"))
        .build();
header.apply(options)//options 可为 null
        .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;
            }
        });

:smirk:Good luck！！！

支持的 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 高亮颜色

Change log

2019-12-13

• 修复滚动条颜色配置无效的问题