开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

TabLayout和ViewPager在方向改变后消失

TabLayout和ViewPager是Android开发中常用的两个组件，用于实现页面切换和导航功能。

TabLayout是一个水平的导航栏，通常位于页面顶部或底部，用于显示多个标签页，用户可以通过点击标签页来切换页面内容。TabLayout可以根据标签页的数量自动调整宽度，支持滑动和固定模式，可以自定义标签样式和指示器样式。

ViewPager是一个可滑动的容器，用于展示多个页面，每个页面对应一个Fragment或View。ViewPager可以通过滑动或点击TabLayout的标签页来切换页面内容，支持左右滑动切换页面，也可以通过设置动画效果来实现页面切换的过渡效果。

当屏幕方向改变时，TabLayout和ViewPager默认会重新创建并重新加载页面内容。为了避免页面切换后数据的丢失，可以通过保存和恢复状态的方式来保持页面数据的一致性。可以在Activity的onSaveInstanceState和onRestoreInstanceState方法中保存和恢复ViewPager的当前页面索引，以及TabLayout的选中状态。

在Android开发中，可以使用TabLayout和ViewPager来实现各种功能，例如底部导航栏、标签页切换、图片浏览器等。通过结合不同的Fragment或View，可以实现多种页面布局和交互效果。

腾讯云提供了一系列与移动开发相关的产品和服务，包括移动推送、移动分析、移动测试等。其中，推荐的与TabLayout和ViewPager相关的产品是腾讯移动分析（https://cloud.tencent.com/product/ma）和腾讯移动推送（https://cloud.tencent.com/product/tpns），可以帮助开发者实现用户行为分析和消息推送功能。

相关搜索:在片段中使用TabLayout和ViewPager OptionsMenu在方向改变时从片段中消失在每个活动中使用ViewPager + TabLayout和NavigationDrawer -问题当FragmentPagerAdapter在ViewPager和TabLayout中调用时，getItem()运行两次在coordinatorLayout和tablayout的情况下，viewPager正在导航栏下扩展在daemon-reload后Docker镜像和容器消失 css vh和vw，为什么大众的值在改变方向时不会改变？在Android Pre-lollipop上单击另一个选项卡后，Tablayout Drop Shadow消失如何在不改变平移方向的情况下，在旋转后应用平移？在方向改变后，片段管理器是否恢复屏幕上最后显示的片段？TextField和ComboBox中的用户输入在切换场景后消失 Firefox和Safari在“透视”改变后不尊重z-index 如何使用DispatchQueue使视图在一段时间后出现和消失？WPF MVVM在高度和宽度改变后在屏幕上重新居中应用程序？为什么变异函数next在迭代后不改变结构(符合序列和IteratorProtocol)？如何让一个矩形在第一次和第二次击球时改变颜色，然后在第三次击球时消失？在Instagram改变了API进程后，如何使用Python和Selenium来抓取Instagram？我找不到所有的条目，只能找到12个

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。...exitUntilCollapsed"> 记住：我们刚才上面也说了AppBarLayout是一个竖直方向的线性布局...除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：设置导航栏图标；设置App的logo；支持设置标题和子标题...TabLayout提供一个水平布局来显示选项卡。TabLayout一般都是配合ViewPager一起来使用。...如果设计的需求不要求选项卡在切换时附带有图标的切换效果，仅仅文字的颜色发生变化以响应用户的点击事件，那么TabLayout和ViewPager建立联系可以用官方提供的方法，它可以做到交互双向联动，也就是点击

2.3K9 0

使用CoordinatorLayout打造各种炫酷的效果

结合ViewPager ? 结合ViewPager的视觉特差 ? ---- AppBarLayout 它是继承与LinearLayout的，默认的方向是Vertical ?...int SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 另一种enterAlways，但是只显示折叠后的高度。...其实相对于前一个例子，只是把摆放RecyclerView 的位置替换成ViewPager而已，为了有页面导航器的效果，再使用 TabLayout而已，而TabLayout 在我们滑动的时候最终会停靠在...和TabLayout mViewPager = (ViewPager) findViewById(R.id.viewpager); mTabLayout = (TabLayout...的变化从前面的描述我们已经知道当没有指定app:layout_scrollFlags的时候，最终TabLayout会静止，不会随着滑动的时候消失不见拓展如果我们仅仅改变CollapsingToolbarLayout

5K1 0

使用TabLayout看这篇就够了

代码逻辑上，我们在setupWithViewPager()方法最终remove掉了标题栏之后再重新设置标题，这样就不会出现标题栏消失的问题了。...好像ViewPager和TabLayout之间的纽带断了，不会联动了。那我们就模仿setupWithViewPager()方法的源码让它们联动起来。...当然这个需求本身还是很简单的，假如不用Tablayout也无非就是写个布局，切换viewpager的时候对应的状态改变。但这里我就非要用Tablayout，通过这个例子来说明我们要讲的问题。...没准切换的时候，产品经理让icon还要带点动画效果，所以这里我们随便来了个属性动画，在点击和切换的时候触发： ?...这个切换或者点击时候的事件就要我们自己实现了，所以我们要实现addOnTabSelectedListener这个接口，并在onTabSelected和onTabUnselected里做出相应的改变：

3K3 0

TabLayout+ViewPager实现切页的示例代码

安卓使用TabLayout+ViewPager+Fragment 实现页面切换，可实现左右滑动切换视图界面和点击切换可自定义菜单栏是在顶部还是在底部一、实现效果： ?...'com.android.support:design:23.3.0' 主布局文件编写：顶部或者底部显示，只要更改ViewPager和TabLayout排列顺序即可 <?...(viewPager); tabLayout.getTabAt(1).select();//设置第一个为选中 } } 2.3 字符和图片菜单栏实现图片加汉字菜单栏，菜单栏每项都是一个视图可以自定义设计...菜单栏每项的布局文件设计：一个图片显示和一个文字显示，定义为垂直布局，其中android:layout_gravity=”center”是把控件居中，这里不写，在菜单栏显示时可能会出现错位 <?...= (TabLayout) findViewById(R.id.tabs2); viewPager = (ViewPager) findViewById(R.id.viewpager); //添加tablayout

1.7K4 0

使用TabLayout遇到的几个坑

1.setupWithViewPager以后之前已经设置好的tab的视图消失了看源码： setupWithViewPager里面有这段 final PagerAdapter...先关联，在设置 2.tabLayout切换时文字颜色当未选中时没有恢复 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener...AppCompatActivity { private TabLayout tabLayout; private ViewPager mViewPager; private...) findViewById(R.id.viewpager); tabLayout = (TabLayout) findViewById(R.id.tabLayout);...(mViewPager);//将TabLayout和ViewPager关联起来。

1.8K6 0

炫酷~RecyclerView视差装饰器-ParallaxDecoration

选择器，底部一个ViewPager ViewPager高度需要动态控制，看自己的需求了，如果是美团那种效果，就是ViewPager高度 = NestedScrollView高度 - TabLayout高度...源码在文章末尾！...，所以，网络请求完毕后要再次实现post设置coordinatorScrollView最大滑动距离，如第80行代码和第90行代码，在这里，我并不推荐使用多次回调监听的方法！...viewPager.adapter = ViewPagerAdapter(supportFragmentManager, fragmentData) //TabLayout...关联ViewPager tabLayout.setupWithViewPager(viewPager) //设置TabLayout数据 for (i in

7680 0

进来看看是不是你想要的效果，Android吸顶效果，并有着ViewPager左右切换

选择器，底部一个ViewPager ViewPager高度需要动态控制，看自己的需求了，如果是美团那种效果，就是 ViewPager高度 = NestedScrollView高度 - TabLayout...源码在文章末尾！...，所以，网络请求完毕后要再次实现post设置coordinatorScrollView最大滑动距离，如第80行代码和第90行代码，在这里，我并不推荐使用多次回调监听的方法！...viewPager.adapter = ViewPagerAdapter(supportFragmentManager, fragmentData) //TabLayout...关联ViewPager tabLayout.setupWithViewPager(viewPager) //设置TabLayout数据 for (i in

2K3 0

Android--TableLayout的基本使用

Tablayout为谷歌在Design包中提供给开发者使用的ViewPager指示器，兼容到2.2以上版本，包括2.2 使用它需要先导入design包，下面介绍它的基本使用方法 <?...:tabIndicatorColor="@android:color/holo_orange_light" 改变整个TabLayout的颜色 app:tabBackground="color" 改变...TabLayout内部字体大小app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//设置文字的外貌改变指示器下标的高度...= findViewById(R.id.tablayout); viewpager = findViewById(R.id.viewpager); MyAdapter...//设置和ViewPager的联动 tablayout.setupWithViewPager(viewpager); } class MyAdapter extends

1.2K3 0

Android开发笔记（一百七十二）第二代翻页视图ViewPager2

正如RecyclerView横空出世取代ListView和GridView那样，Android也推出了二代翻页视图ViewPager2，打算替换原来的翻页视图ViewPager。...其中ViewPager2.ORIENTATION_HORIZONTAL表示水平方向，ViewPager2.ORIENTATION_VERTICAL表示垂直方向。...现在有了ViewPager2，搭配TabLayout便轻松多了，只要一行代码即可绑定ViewPager2与TabLayout。下面是将二者联结起来的操作步骤。...1、创建测试页面，并往页面的XML文件先后加入TabLayout标签和ViewPager2标签，具体内容如下所示： <LinearLayout xmlns:android="http://schemas.android.com...<em>和</em><em>ViewPager</em>2的视图对象，再利用TabLayoutMediator把标签布局跟翻页视图连为一体，关键代码示例如下： // 从布局文件中获取名叫tab_title的标签布局 <em>TabLayout</em>

2.3K3 0

Material Design整理（八）——TabLayout

今天我们一起使用TabLayout+ViewPager来实现主界面效果（如上图），也一起了解一下TabLayout的使用。...当然了，不仅可以在不居中直接添加TabItem子标签，这样可变性不好，我们可以在代码中动态添加，节后会介绍到！...因为TabLayout一般会结合ViewPager使用，而标签内容，标签数量也可以随着ViewPager来改变。下文会提到TabItem结合ViewPager动态添加。...);//添加到tabLayout中 } 结合第三步，创建Tab对象，对其设置文字和图片 ---- 6、修改TabLayout的样式 Tablayout支持定制化修改，提供了不少自定义属性供开发者进行设置...---- 6、TabLayout结合ViewPager 关键的来了！ ·a 创建布局 <?xml version="1.0" encoding="utf-8"?

1.4K1 0

CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

，因为TabLayout没有标记scrollFlags事件，相反，如果TabLayout也标记了ScrollFlags事件，那么LinearLayout的下滑时ToolBar和TabLayout都会隐藏了...TabLayout TabLayout-Android M新控件说到TabLayout，就是实现多个Tab之间的切换，不过Google在Design library新推出的TabLayout既实现了固定的选项卡...固定的Tab，在TabLayout中居中显示 ? 可滑动的Tab ?...tabMode="fixed" app:tabSelectedTextColor="#ff0000" app:tabTextColor="#ffffff" /> 上面有几个参数我来详细介绍下吧，其实就是通过改变这几个参数来改变...TabLayout显示效果的： tabGravity —Tab的重心，有填充和居中两个值，为别为fill和center。

2.1K3 0

TabLayout使用指南

TabLayout是开发中经常使用到的控件，经常与ViewPager一起配合使用，一组tab，可以点击、可以滚动。...修改指示器可以修改指示器的颜色和高度，比如： <android.support.design.widget.TabLayout app:tabIndicatorColor="@android...当在xml布局中添加了很多TabItem后，预览效果如下图：这时使用的就是FIXED模式，可以看到TabLayout默认就是FIXED模式；当改成MODE_SCROLLABLE后，预览样式如下图...TabItem样式自定义以上的xml样式，都可以通过相应的set方法进行设置，但是如果想改变默认的tab样式，那么就需要代码的操作了。...，文字在右的样式。

1.8K3 1

TabLayout用法，android顶部导航栏，android底部导航栏

TabLayout是android.support.design里的一个控件，使用它可以很方便的做出顶部导航和底部导航。类似于这样的，能设置选中时字体的颜色和选中时的图片。 ? ?...(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色 // tabLayout.setSelectedTabIndicatorColor(Color.WHITE...以上就是TabLayout和viewpager结合的简单例子。...不需要改变背景的话就不用设置这个属性了。...以上的代码可以从oschina的git托管http://git.oschina.net/tianyalei/MDDesignLib获取，TabLayout相关的在Sample的TabActivity那里

4.1K1 0

Android TabLayout 使用进阶（含源码）

tabLayout.addTab(tabLayout.newTab().setText(titles[i]).setIcon(icons[i])); } 这里你必须保证标题和图标数量一致...当然更多实际需求是修改下划线的长度可以随文字大小改变而改变，这个设置其实也比较的简单，超出你想象之外的简单。通过 app:tabIndicatorFullWidth="false" ?...分析一下可能就是TabLayout + ViewPager + Fragment构成的，这三个组合在写分类页面和App主页面时稍有不同，文中都会讲到的，莫急。...ViewPager，ViewPager改变的时候切换Tab选中。...(fragTabAdapter); tabLayout.setupWithViewPager(viewPager); } } 设置一个50以内的随机数，然后设置菜单和Fragment

3.1K3 3

Tablayout简单使用方法总结

一、TabLayout普通用法在项目中使用viewpager的时候大多数都是和TabPagerIndicator结合使用，TabPagerIndicator是第三方的，使用起来比较繁琐； 2015谷歌大会官方发布了...设置标题第三步：将Tablayout和ViewPager关联到一起 //第一步：初始化ViewPager并设置adapter viewPager = (ViewPager) findViewById...但是我在写这个demo的时候碰到一个坑：标题死活显示不出来，浪费了很长时间，最后在Tablayout关联Viewpager之后添加从新设置下标题即可： //在关联ViewPager之后添加如下代码...” 限制标签宽度（更改更改标签对齐方式需在第一步（Tablayout普通用法）的基础上更改使用） ?...tablayout后添加如下代码： LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0); linearLayout.setShowDividers

1.5K2 0

Android开发之漫漫长途 Fragment番外篇——TabLayout+ViewPager+Fragment

该文章是一个系列文章，是本人在Android开发的漫漫长途上的一点感想和记录，我会尽量按照先易后难的顺序进行编写该系列。...TabLayout的动态使用在布局文件中我们可以很方便定义顶部/底部导航的布局。...ViewPager经常和Fragment一起使用。...中使用的remove()不同,此时fragment的状态依然保持着,在使用attach()时会再次调用onCreateView()来重绘视图,注意使用detach()后fragment.isAdded(...本篇总结我们在本篇博客中比较详细的探讨了TabLayout+ViewPager+Fragment的使用，我们在许多主流App中都能看到这种顶部、底部导航的效果，并且在此基础上我们探讨了TabLayout

1.7K1 0

Carson带你学Android：底部顶部Tab导航栏快速实现-TabLayout+ViewPager+Fragment

底部Tab菜单栏实现(FragmentTabHost+ViewPager+Fragment) 今天我手把手教大家如何使用TabLayout+ViewPager+Fragment的组合来实现顶部和底部...注： 1.ViewPager类直接继承了ViewGroup类，和LinearLayout等布局一样，都是一个容器，需要在里面添加我们想要显示的内容。...步骤1：在Gradle中添加依赖 //TabLayout compile 'com.android.support:support-v4:23.4.0' compile 'com.android.support...与TabLayout绑定后，这里获取到PageTitle就是Tab的Text @Override public CharSequence getPageTitle(int position...只需要在上面步骤5：定义主布局activity_main.xml中将TabLayout和ViewPager的位置交换就可以了！

1.6K2 1

学习使用Material Design控件（四）Android实现标题栏自动缩放、放大效果

可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout其中的控件，在响应...collapse时是移除屏幕和固定在最上面 TabLayout 结合ViewPager，实现多个TAB的切换的功能 NestedScrollView 与ScrollView基本相同，不过包含在NestedScrollView...match_parent” / </LinearLayout </android.support.design.widget.CoordinatorLayout CollapsingToolbarLayout和TabLayout...mViewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(mViewPager); //给TabLayout增加...Tab, 并关联ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); tabLayout.addTab

1.2K3 1

一篇博客让你了解Material Design的使用

例如Google给出了沉浸式状态栏等“工具”，希望通过改变StatusBar和NavigationBar来给用户更强的融入感，专注于应用本身提供的内容。...（onBindViewHolder() 方法中的位置参数 position 不是实时更新的，例如在我们删除元素后，item 的 position 并没有改变。）...下面以TabLayout+ViewPager+Fragment为例，讲述TabLayout的基本使用。...viewPager = (ViewPager) findViewById(R.id.vp); tabLayout = (TabLayout) findViewById(R.id.tablayout...和Viewpager关联 // tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { //

3.3K3 0

android TabLayout实现京东详情效果

这两天需要做一个仿京东详情的页面，上面的Tab切换，以前都是自己写Viewpager+fragment，或者Indicator的深度定制，一直想尝试一下TabLayout，于是就有了下面的坑。 ?...其他的用法和Indicator的用法差不多，都需要设置适配器，然后通过数据实现页面的适配。...viewPager; @BindView(R.id.toolbar_more) ImageView toolbarMore; @BindView(R.id.tabLayout)...tabLayout.setupWithViewPager(viewPager); } @OnClick(R.id.back) public void backClick()...创建的tab默认设置textAllCaps属性为true，这阻止了ImageSpan被渲染出来，可以通过下面的样式文件定义来改变： <style name="MyCustomTabLayout" parent

1.3K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭