TransformersLayout

Introduction: :fire: App 金刚区导航菜单,类似淘宝、QQ 音乐等 APP 导航,方格布局横向滑动翻页带滚动条
More: Author   ReportBugs   
Tags:

Platform Licence jitpack

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

整体结构是 Recyclerview + 滚动条

Features

  • 每页行数、列数可配置
  • 滚动状态自动恢复
  • 支持数据重新排序,类似 viewpager 的分页模式
  • item 布局样式自定义
  • scrollbar 样式可配置

Preview

gif

下载 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替换为jitpack中的数字

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_pagingMode="true"
    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 onBind(Context context, List<T> list, @Nullable Nav data, int position) {
        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)
        .pagingMode(true)
        .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_pagingMode boolean 分页模式,数据会重新排序,默认 false
tl_scrollbarWidth dimension \ reference scrollbar 宽度,默认 48dp
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

2020-1-21

  • 新方法修复滚动条变长变短问题(很完美)
  • 支持数据重新排序
  • 回调方法变动

2020-1-5

  • 修复滚动条突然变长变短的问题
  • 优化默认圆角大小显示效果

2019-12-13

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

About me

掘金主页: https://juejin.im/user/56f3dfe8efa6310055ac719f

简书主页: https://www.jianshu.com/u/913a8bb93d12

我的淘宝店: https://shop238932691.taobao.com

:smile:是时候来一波三连了~

License

Copyright (c) 2019 zaaach

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea