前言 Tablayout继承自HorizontalScrollView,可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。 首先上几个效果图。...引入支持包 implementation 'com.android.support:design:26.0.0' 第二步,在布局文件中添加布局 <android.support.design.widget.TabLayout...tabTextColor="#bbb" app:tabSelectedTextColor="#0a0" /> 属性解释: tabIndicatorHeight:这里是设置标签横线的高度...tabNormal; @BindView(R.id.tab_icon) TabLayout tabIcon; @BindView(R.id.tab_more) TabLayout...tabMore; @BindView(R.id.tab_customer) TabLayout tabCustomer; @BindView(R.id.vp_all)
效果图 下面是我使用TabLayout来实现的底部Tab, ? 实现方式也很简单,因为这里没有“小滑块”。只需要去处理,Tab的滑动和点击即可。...代码: public class CustomBotTabItem { private TabLayout mTabLayout; private ViewPager mViewPager...public CustomBotTabItem setTabLayout(TabLayout tabLayout) { mTabLayout = tabLayout;...return this; } //设置与TabLayout关联的ViewPager public CustomBotTabItem setViewPager(ViewPager...() { @Override public void onTabSelected(TabLayout.Tab tab) {
[tablayout01.gif] 布局文件: <android.support.design.widget.TabLayout android:id="@+id...2.点击滑动选中,类似RadioGroup的效果 [tablayout02.gif] 不过它与RadioGroup不同在于它有下划线可以滑动,更动感......布局文件: <android.support.design.widget.TabLayout android:id="@+id/tl\_search"...public void onTabReselected(TabLayout.Tab tab) { } }); 3.点击滑动到屏幕中央,并再次点击可取消 [tablayout03...后来想想TabLayout继承自HorizontalScrollView,选中也会自动滚动并居中,于是就选用了它来实现,相对于直接使用HorizontalScrollView代码量更少。
image.png TabLayout TabLayout是Android support中的一个控件android.support.design.widget.TabLayout,Google在升级了...AndroidX之后,将TabLayout迁移到material包下面去了com.google.android.material.tabs.TabLayout,原来的support下面的TabLayout...TabLayout一般结合ViewPager+Fragment的使用实现滑动的标签选择器。 实战 activity_main.xml: <?...); //添加tab for (int i = 0; i < tabs.length; i++) { tabLayout.addTab(tabLayout.newTab...和ViewPager联动 tabLayout.setupWithViewPager(viewPager,false); } } fragment_tab.xml <?
前言 前面介绍了TabLayout的基本属性和基本的使用方法。我是传送门。 真实的业务场景中,很多的效果,原生的TabLayout,并不支持。...所以我们需要使用TabLayout的自定义tab标签。 先上图。 ?...2、viewpager和TabLayout标签进行联动的时候,不可以使用TabLayout的setupWithViewPager()方法,而是要通过ViewPager的addOnPageChangeListener...()和Tablayout的addOnTabSelectedListener()方法进行两个控件之间的联动效果。...否则会造成自定义的CustomeTab被TabLayout默认生成的标签覆盖掉。 3、在布局文件中,需要将TabLayout的tabIndicatorHeight设为0。
TabLayout就可以很好的完成这一职责,当然也或许各家应用的实现方式不尽相同,这里介绍下TabLayout的用法。...下面来解析下TabLayout的一些基本属性: ? 重要的属性基本就这些,其他简单的属性可以自己去摸索,这里选中和未选中的字体颜色,可以根据自己的设计自行修改,同样指示条的高度颜色也可以随意修改。...有两个思路: 1:把指示条高度设为0: app:tabIndicatorHeight="0dp" 2:把指示条的颜色设为透明: app:tabIndicatorColor="@color/transparent...关于自定义Tablayout我们放在后面再说,我们再来看看Tablayout的一些其他“坑”。 开发过程中有同学需要修改abIndicator这个指示条的长度。...好了,关于TabLayout的用法就探讨这里!
> tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher)); tabLayout.addTab...(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3").setIcon...修改指示器 可以修改指示器的颜色和高度,比如: <android.support.design.widget.TabLayout app:tabIndicatorColor="@android...现有Tab样式,代码如下: tabLayout=findViewById(R.id.tabLayout); for (int i = 0; i < tabLayout.getTabCount...之自定义样式 MaterialDesign之对TabLayout的探索 Design库-TabLayout属性详解
如今,Android中也有自带这种指示器的控件TabLayout。TabLayout存在于android design库中,它提供了一个水平的布局来展示Tabs。...今天我们一起使用TabLayout+ViewPager来实现主界面效果(如上图),也一起了解一下TabLayout的使用。...---- 3、动态添加TabItem标签 TabLayout tabLayout = (TabLayout) findViewById(R.id.tab); for (int i = 0; i...);//添加到tabLayout中 } 结合第三步,创建Tab对象,对其设置文字和图片 ---- 6、修改TabLayout的样式 Tablayout支持定制化修改,提供了不少自定义属性供开发者进行设置...有以下属性支持修改: tabIndicatorColor:指示器颜色 tabBackground:tablayout的背景颜色 tabIndicatorHeight:指示器高度 tabGravity:指示器位置
在Android开发中,经常要使用顶部菜单,如网易新闻、今日头条等,实现顶部菜单以前是ViewPager配合PagerTabStrip来实现,但Android 5.0以后,推荐大家使用MD中的TabLayout...layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout...id="@+id/tabs" android:layout_width="match_parent" android:layout_height="48dp" //菜单高度...FFFFFF" //菜单选中时的颜色 app:tabTextColor="#000000"> //菜单未选中时的颜色 </android.support.design.widget.TabLayout...TabLayout.png -5、注意点 如果真的按上面一字不差走下来的话,会发现TabLayout在ViewPager滑动的时候会出现菜单文字闪烁的现象。
TabLayout tabLayout = new TabLayout(this); tabLayout.setLayoutParams(new ViewGroup.LayoutParams(...); //tab居中显示 tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER); //tab的字体选择器,默认黑色,选择时红色 tabLayout.setTabTextColors...(tabLayout.newTab().setText("TAB" + i)); //2.支持添加图片tab //tabLayout.addTab(tabLayout.newTab().setIcon...final TabLayout tabLayout = new TabLayout(this); tabLayout.setLayoutParams(new ViewGroup.LayoutParams...//tabLayout.addTab(tabLayout.newTab().setText("TAB" + i)); //2.支持添加图片tab //tabLayout.addTab(tabLayout.newTab
0, true); } lastPos = newPos; } 复制代码 tabLayout的点击切换: tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener...所以这里需要处理下最后一个view的高度,当不满全屏时,重新设置他的高度,通过计算让其撑满屏幕。...//监听判断最后一个模块的高度,不满一屏时让最后一个模块撑满屏幕 private ViewTreeObserver.OnGlobalLayoutListener listener; listener...(); //计算内容块所在的高度,全屏高度-状态栏高度-tablayout的高度-内容container的padding 16dp int lastH = screenH...- 16 * 3; AnchorView lastView = anchorList.get(anchorList.size() - 1); //当最后一个view 高度小于内容块高度时
在上一篇文章Android 实现锚点定位中,我们介绍了tablayout+scrollView实现的锚点定位,今天我们使用tablayout+recyclerView 来实现同样的效果。...实现思路 实现的思路与上一篇文章是一致的: 1、监听recyclerView滑动到的位置,tablayout切换到对应标签 2、tablayout各标签点击,recyclerView可滑动到对应区域...数据模拟 数据模拟,使用上一文章的AnchorView作为recyclerView的每个字view,同时这里对recyclerView的最后一个子view的高度进行修改,让其充满屏幕。...< tabTxt.length; i++) { tabLayout.addTab(tabLayout.newTab().setText(tabTxt[i])); } //计算内容块所在的高度,全屏高度...-状态栏高度-tablayout的高度(这里固定高度50dp),用于recyclerView的最后一个item view填充高度 int screenH = getScreenHeight(); int
lastPos = newPos; } tabLayout的点击切换: tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener...所以这里需要处理下最后一个view的高度,当不满全屏时,重新设置他的高度,通过计算让其撑满屏幕。...//监听判断最后一个模块的高度,不满一屏时让最后一个模块撑满屏幕 private ViewTreeObserver.OnGlobalLayoutListener listener; listener =...(); //计算内容块所在的高度,全屏高度-状态栏高度-tablayout的高度-内容container的padding 16dp int lastH = screenH - statusBarH...- tabH - 16 * 3; AnchorView lastView = anchorList.get(anchorList.size() - 1); //当最后一个view 高度小于内容块高度时
引起的 private boolean isScroll; //记录上一次位置,防止在同一内容块里滑动 重复定位到tablayout private int lastPos = 0; //监听判断最后一个模块的高度...ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { //计算让最后一个view高度撑满屏幕...translation); if (isScroll) { for (int i = tabTxt.length - 1; i = 0; i--) { //需要y减去顶部内容区域的高度...(具体看项目的高度,这里demo写死的200dp) if (y - 200 * 3 anchorList.get(i).getTop() - 10) { setScrollPos...(); int top = anchorList.get(pos).getTop(); //同样这里滑动要加上顶部内容区域的高度(这里写死的高度) scrollView.smoothScrollTo
the ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); tabLayout.setupWithViewPager...">#0000FFitem> style> You can then override this style for your TabLayout: .support.design.widget.TabLayout...---- Add Icons+Text to TabLayout Since we are using SpannableString to add icons to TabLayout, it becomes...the ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); tabLayout.setupWithViewPager...extends AppCompatActivity { TabLayout tabLayout; ViewPager viewPager; Next, we can save and
,给ViewPager设置标题(选项卡) tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.addTab(tabLayout.newTab...().setText("UFC"));//添加tab选项卡 tabLayout.addTab(tabLayout.newTab().setText("武林风")); tabLayout.addTab...(tabLayout.newTab().setText("昆仑决")); tabLayout.addTab(tabLayout.newTab().setText("荣耀")); tabLayout.addTab...(tabLayout.newTab().setText("勇士的崛起")); tabLayout.addTab(tabLayout.newTab().setText("K-1")); //第三步...).setText("UFC"); tabLayout.getTabAt(1).setText("武林风"); tabLayout.getTabAt(2).setText("昆仑决"); tabLayout.getTabAt
选择器,底部一个ViewPager ViewPager高度需要动态控制,看自己的需求了,如果是美团那种效果,就是ViewPager高度 = NestedScrollView高度 - TabLayout高度...--相当于分析图中红色标记处TabLayout--> <com.google.android.material.tabs.TabLayout android...for (i in tabTextData.indices) { tabLayout.addTab(tabLayout.newTab())...tabLayout.getTabAt(i)!!....关联ViewPager tabLayout.setupWithViewPager(viewPager) //设置TabLayout数据 for (i in
选择器,底部一个ViewPager ViewPager高度需要动态控制,看自己的需求了,如果是美团那种效果,就是 ViewPager高度 = NestedScrollView高度 - TabLayout...--相当于分析图中红色标记处TabLayout--> <com.google.android.material.tabs.TabLayout android...for (i in tabTextData.indices) { tabLayout.addTab(tabLayout.newTab())...tabLayout.getTabAt(i)!!....关联ViewPager tabLayout.setupWithViewPager(viewPager) //设置TabLayout数据 for (i in
这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写Viewpager+fragment,或者Indicator的深度定制,一直想尝试一下TabLayout,于是就有了下面的坑。 ?...com.android.support:recyclerview-v7:24.2.0' compile 'com.android.support:cardview-v7:24.2.0' } Toolbar与TabLayout...ViewPager viewPager; @BindView(R.id.toolbar_more) ImageView toolbarMore; @BindView(R.id.tabLayout...) TabLayout tabLayout; private List mFragments; private String[] titles = new...为了更好的满足开发需要,TabLayout实现了自定义TabLayout的样式,然后通过引入 app:tabTextAppearance="" 自定义icon添加到tab 当前的TabLayout没有方法让我们去添加
不多说,很快就写出如下代码: tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {...@Override public void onTabSelected(TabLayout.Tab tab) { isClickOnce = false...tab) { } @Override public void onTabReselected(TabLayout.Tab tab...知道了原因,我们想要获取tabLayout的点击事件,必须在setupWithViewPager其之后,相当于我们覆盖系统的,这时,你会发觉我们的代码有点小bug, public void onTabSelected...(TabLayout.Tab tab) { isClickOnce = false; mSelectedPage = tab.getPosition
领取专属 10元无门槛券
手把手带您无忧上云