zaaach / Transformerslayout
🔥 App金刚区导航菜单,类似淘宝、QQ音乐等APP导航,方格布局横向多行滑动翻页带滚动条
Stars: ✭ 258
Programming Languages
java
68154 projects - #9 most used programming language
Projects that are alternatives of or similar to Transformerslayout
Concentriconboarding
Android Concentric Onboarding library
Stars: ✭ 42 (-83.72%)
Mutual labels: viewpager, page, pager
Cardslideview
一行代码实现ViewPager卡片效果,比ViewPager2更强大,底层同样是RecyclerView
Stars: ✭ 301 (+16.67%)
Mutual labels: recyclerview, viewpager, page
navigator
🧿 Build navigation or menu for Laravel and Awes.io. Unlimited complexity and depth, with permissions and sorting support.
Stars: ✭ 47 (-81.78%)
Mutual labels: navigation, menu
Adsorbent
Adsorbent of RecyclerView , RecyclerView吸顶
Stars: ✭ 25 (-90.31%)
Mutual labels: recyclerview, viewpager
Mmenu Js
The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
Stars: ✭ 2,535 (+882.56%)
Mutual labels: navigation, menu
priority-plus
A modern implementation of the priority plus navigation pattern.
Stars: ✭ 30 (-88.37%)
Mutual labels: navigation, menu
Accordion
Silky-smooth accordion widgets with no external dependencies.
Stars: ✭ 32 (-87.6%)
Mutual labels: navigation, menu
Walk-Through-Screen
This library provides easy ways to add onboarding or pager screens with different animation and indicators.
Stars: ✭ 31 (-87.98%)
Mutual labels: viewpager, pager
SlideView
🔖 Card RecycleViewManager, to make your interface cool.Use recyclerView to add cool effects to the view.
Stars: ✭ 16 (-93.8%)
Mutual labels: recyclerview, viewpager
MetalRecyclerPagerView
RecyclerView implementation for Android which makes it look and feel like ViewPager with item margins support (mutliple views effect).
Stars: ✭ 26 (-89.92%)
Mutual labels: recyclerview, viewpager
Side Menu.ios
Animated side menu with customizable UI
Stars: ✭ 2,702 (+947.29%)
Mutual labels: navigation, menu
SidebarOverlay
Yet another implementation of sidebar menu, but here your menu appears over the top view controller.
Stars: ✭ 66 (-74.42%)
Mutual labels: navigation, menu
Dropdownmenukit
UIKit drop down menu, simple yet flexible and written in Swift
Stars: ✭ 246 (-4.65%)
Mutual labels: navigation, menu
bsnav
An extended Bootstrap 4 menu with a bunch of utilities
Stars: ✭ 90 (-65.12%)
Mutual labels: navigation, menu
simple-sidenav
Simple, easily customizable, animated menu.
Stars: ✭ 40 (-84.5%)
Mutual labels: navigation, menu
Fluent-Design
Microsoft's Fluent Design with pure HTML/CSS/JS
Stars: ✭ 36 (-86.05%)
Mutual labels: navigation, scrollbar
Antonio
Android library for the adapter view (RecyclerView, ViewPager, ViewPager2)
Stars: ✭ 89 (-65.5%)
Mutual labels: recyclerview, viewpager
React Site Nav
A kick ass site menu powered by styled components inspired by Stripe.
Stars: ✭ 155 (-39.92%)
Mutual labels: navigation, menu
TransformersLayout
🔥 APP金刚区导航布局,下方带横向滚动条,很多APP都有使用这种,效果还不错就封装了一下😄
整体结构是Recyclerview + 滚动条
Features
- 每页行数、列数可配置
- 滚动状态自动恢复
- 支持数据重新排序,类似viewpager的分页模式
- item布局样式自定义
- scrollbar样式可配置
Preview
Install
📣项目基于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'
}
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_scrollbarMarginBottom="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))
.scrollBarBottomMargin(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;//第二步使用的布局
}
});
😏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_scrollbarMarginBottom | dimension | reference | scrollbar下间距 |
tl_scrollbarRadius | dimension | reference | scrollbar圆角,默认高度的一半 |
tl_scrollbarTrackColor | color | reference | scrollbar轨道颜色 |
tl_scrollbarThumbColor | color | reference | scrollbar高亮颜色 |
Change log
2020-12-04
- 增加scrollbar下间距属性
2020-02-01
- 修复数据更新问题
2020-01-21
- 新方法修复滚动条变长变短问题(很完美)
- 支持数据重新排序
- 回调方法变动
2020-01-05
- 修复滚动条突然变长变短的问题
- 优化默认圆角大小显示效果
2019-12-13
- 修复滚动条颜色配置无效的问题
About me
掘金: https://juejin.im/user/56f3dfe8efa6310055ac719f
简书: https://www.jianshu.com/u/913a8bb93d12
淘宝店: LEON家居生活馆 (动漫摆件)
😉淘宝店求个关注😉
License
Copyright (c) 2020 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].