垂直豎向的Android TabLayout
阿新 • • 發佈：2018-11-21
VerticalTabLayout
垂直豎向的Android TabLayout
一些特性
-
支援自定義Indicator大小
-
支援自定義Indicator位置
-
支援Indicator設定圓角
-
支援Tab設定Badge
-
支援Adapter的方式建立Tab
-
多種Tab高度設定模式
-
Tab支援android:state_selected
-
很方便的和ViewPager結合使用
-
很方便的和Fragment結合使用
1. gradle
compile 'q.rorbin:VerticalTabLayout:1.2.5'2. xml
<q.rorbin.verticaltablayout.VerticalTabLayout android:id="@+id/tablayout" android:layout_width="66dp" android:layout_height="match_parent" android:background="#EDEDED" app:indicator_color="@color/colorPrimary" app:indicator_width="2dp" app:indicator_corners="@dimen/activity_text_padding"app:indicator_gravity="left" app:tab_height="50dp" android:visibility="visible" app:tab_mode="scrollable"> </q.rorbin.verticaltablayout.VerticalTabLayout>
3. 屬性說明
| xml | code | 說明 |
|---|---|---|
| app:indicator_color | setIndicatorColor | 指示器顏色 |
| app:indicator_width | setIndicatorWidth | 指示器寬度 |
| app:indicator_gravity | setIndicatorGravity | 指示器位置 |
| app:indicator_corners | setIndicatorCorners | 指示器圓角 |
| app:tab_mode | setTabMode | Tab高度模式 |
| app:tab_height | setTabHeight | Tab高度 |
| app:tab_margin | setTabMargin | Tab間距 |
4. 建立Tab的方式
- 普通方式建立
tablayout.addOnTabSelectedListener(new VerticalTabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabView tab, int position) {
}
@Override
public void onTabReselected(TabView tab, int position) {
}
});
- Adapter方式建立
List<String> titles;
{
titles = new ArrayList<>();
titles.add("頭條");
titles.add("社會");
titles.add("國際");
titles.add("娛樂");
titles.add("體育");
titles.add("軍事");
titles.add("科技");
titles.add("財經");
titles.add("時尚");
Collections.addAll(titles);
}
@Override
public int getCount() {
return titles.size();
}
@Override
public TabView.TabBadge getBadge(int position) {
return null;
}
@Override
public QTabView.TabIcon getIcon(int position) {
return null;
}
@Override
public QTabView.TabTitle getTitle(int position) {
return new QTabView.TabTitle.Builder()
.setContent(titles.get(position))
.setTextColor(Color.BLUE, Color.BLACK)
.build();
}
@Override
public int getBackground(int position) {
return 0;
}
});
按照自己的需要進行返回相應的值即可，不需要的返回0或者null
也可以選擇使用SimpleTabAdapter，內部空實現了TabAdapter的所有方法
TabBadge、TabIcon、TabTitle使用build模式建立。
- 結合ViewPager使用
tablayout.setupWithViewPager(viewpager);
ViewPager的PagerAdapter可選擇實現TabAdapter介面
如果您需要使用垂直豎向的ViewPager，推薦您使用：https://github.com/youngkaaa/YViewPagerDemo
- 結合Fragment使用
tabLayout.setupWithFragment(FragmentManager manager, int containerResid, List<Fragment> fragments, TabAdapter adapter)
5. 設定badge
int tabPosition = 3; int badgeNum = 55; tablayout.setTabBadge(tabPosition,badgeNum); Badge badge = tablayout.getTabAt(position).getBadgeView(); Badge使用方法請移步https://github.com/qstumn/BadgeView
轉載出處：https://github.com/qstumn/VerticalTabLayout
http://blog.csdn.net/s003603u/article/details/53114250