TabLayout和ViewPager
2024-05-12 21:52:59
这里就说下tablayout+viewpager的实现方式；tablayout是android5.0推出来的一个MaterialDesign风格的控件，是专门用来实现tab栏效果的；功能强大，使用方便灵活；
一、引入依赖库
使用非常方便,Android Studio只需要在gradle中引入即可使用 .
apply plugin: 'com.android.application'android {compileSdkVersion 28defaultConfig {applicationId "com.example.panzq.tablayout"minSdkVersion 22targetSdkVersion 28versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'}}
}dependencies {implementation fileTree(dir: 'libs', include: ['*.jar'])implementation 'com.android.support:appcompat-v7:28.0.0'implementation 'com.android.support.constraint:constraint-layout:1.1.3'testImplementation 'junit:junit:4.12'androidTestImplementation 'com.android.support.test:runner:1.0.2'androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'com.android.support:design:28.0.0'implementation 'com.android.support:recyclerview-v7:28.0.0'implementation 'com.android.support:support-v4:28.0.0'
}二、layout中定义TabLayout控件及ViewPager控件
<!-- app:tabGravity="center" 对齐方式，可选fill和center app:tabIndicatorColor="@color/colorAccent" 设置tab下划线的颜色 app:tabMode="scrollable" scrollable是可以横行滚动,fixed是指固定个数 app:tabSelectedTextColor="@color/colorPrimaryDark" 选择tab的文本颜色 app:tabTextColor="@color/colorPrimary" 普通tab字体颜色
app:tabIndicatorHeight 指示器高度
app:tabBackground tab背景颜色
app:tabMaxWidth tab栏最大宽度
app:tabTextAppearance tab栏字体样式
app:tabMinWidth tab栏最小宽度
-->
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/linear"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabBackground="@color/colorPrimary"app:tabGravity="fill"app:tabMode="scrollable"app:tabSelectedTextColor="@color/colorAccent"app:tabIndicatorColor="@color/colorPrimaryLight"app:tabTextColor="#ffffff"><android.support.design.widget.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:icon="@drawable/ic_call_black_24dp"android:text="@string/recents" /><android.support.design.widget.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:icon="@drawable/ic_star_border_black_24dp"android:text="@string/favourite" /><android.support.design.widget.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:icon="@drawable/ic_person_black_24dp"android:text="@string/contacts" /><android.support.design.widget.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:icon="@drawable/ic_dialpad_black_24dp"android:text="@string/keypad" /><android.support.design.widget.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:icon="@drawable/ic_voicemail_black_24dp"android:text="@string/voicemail" /></android.support.design.widget.TabLayout></android.support.v4.view.ViewPager></LinearLayout>
三 设置TabLayout和ViewPager关联
MainActivity
public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);TabLayout tabLayout = findViewById(R.id.tabLayout);ViewPager viewPager = findViewById(R.id.viewPager);CallPagerAdapter callPagerAdapter = new CallPagerAdapter(getSupportFragmentManager());callPagerAdapter.addFragment(new RecentCallFragment(), "RECENT");callPagerAdapter.addFragment(new FavouriteCallFragment(), "FAVOURITE");callPagerAdapter.addFragment(new ContactCallFragment(), "CONTACTS");callPagerAdapter.addFragment(new KeypadCallFragment(), "KEYPAD");callPagerAdapter.addFragment(new VoicemailCallFragment(), "VOICEMAIL");viewPager.setAdapter(callPagerAdapter);tabLayout.setupWithViewPager(viewPager);tabLayout.getTabAt(0).setIcon(R.drawable.ic_call_black_24dp);tabLayout.getTabAt(1).setIcon(R.drawable.ic_star_border_black_24dp);tabLayout.getTabAt(2).setIcon(R.drawable.ic_person_black_24dp);tabLayout.getTabAt(3).setIcon(R.drawable.ic_dialpad_black_24dp);tabLayout.getTabAt(4).setIcon(R.drawable.ic_voicemail_black_24dp);}
}需要注意的是setupWithViewPager();方法的调用必须在viewpager设置完适配器后调用，如果在设置适配器之前调用会抛异常，至于为什么会抛异常，后面tablayout的源码会说到；这样tab栏切换效果就实现了。
如果发现程序出现如下错误
10-23 06:29:47.677 25503-25503/com.example.panzq.tablayout E/AndroidRuntime: FATAL EXCEPTION: mainProcess: com.example.panzq.tablayout, PID: 25503android.view.InflateException: Binary XML file line #31: Binary XML file line #31: Error inflating class android.support.design.button.MaterialButtonCaused by: android.view.InflateException: Binary XML file line #31: Error inflating class android.support.design.button.MaterialButtonCaused by: java.lang.reflect.InvocationTargetExceptionat java.lang.reflect.Constructor.newInstance0(Native Method)at java.lang.reflect.Constructor.newInstance(Constructor.java:430)at android.view.LayoutInflater.createView(LayoutInflater.java:645)at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:787)at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:727)at android.view.LayoutInflater.rInflate(LayoutInflater.java:858)at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:821)at android.view.LayoutInflater.inflate(LayoutInflater.java:518)at android.view.LayoutInflater.inflate(LayoutInflater.java:426)at com.example.panzq.tablayout.fragments.KeypadCallFragment.onCreateView(KeypadCallFragment.java:37)at android.support.v4.app.Fragment.performCreateView(Fragment.java:2439)at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460)at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784)at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852)at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:802)at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625)at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411)at android.support.v4.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366)at android.support.v4.app.FragmentManagerImpl.execSingleAction(FragmentManager.java:2243)at android.support.v4.app.BackStackRecord.commitNowAllowingStateLoss(BackStackRecord.java:654)at android.support.v4.app.FragmentStatePagerAdapter.finishUpdate(FragmentStatePagerAdapter.java:168)at android.support.v4.view.ViewPager.populate(ViewPager.java:1244)at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:669)at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:631)at android.support.v4.view.ViewPager.setCurrentItem(ViewPager.java:612)at android.support.design.widget.TabLayout$ViewPagerOnTabSelectedListener.onTabSelected(TabLayout.java:2831)at android.support.design.widget.TabLayout.dispatchTabSelected(TabLayout.java:1608)at android.support.design.widget.TabLayout.selectTab(TabLayout.java:1601)at android.support.design.widget.TabLayout.selectTab(TabLayout.java:1569)at android.support.design.widget.TabLayout$Tab.select(TabLayout.java:1874)at android.support.design.widget.TabLayout$TabView.performClick(TabLayout.java:2059)at android.view.View$PerformClick.run(View.java:22265)at android.os.Handler.handleCallback(Handler.java:751)at android.os.Handler.dispatchMessage(Handler.java:95)at android.os.Looper.loop(Looper.java:154)at android.app.ActivityThread.main(ActivityThread.java:6077)at java.lang.reflect.Method.invoke(Native Method)at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)Caused by: java.lang.IllegalArgumentException: This component requires that you specify a valid TextAppearance attribute. Update your app theme to inherit from Theme.MaterialComponents (or a descendant).at android.support.design.internal.ThemeEnforcement.checkTextAppearance(ThemeEnforcement.java:170)at android.support.design.internal.ThemeEnforcement.obtainStyledAttributes(ThemeEnforcement.java:75)at android.support.design.button.MaterialButton.<init>(MaterialButton.java:140)at android.support.design.button.MaterialButton.<init>(MaterialButton.java:133)at java.lang.reflect.Constructor.newInstance0(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:430) at android.view.LayoutInflater.createView(LayoutInflater.java:645) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:787) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:727) at android.view.LayoutInflater.rInflate(LayoutInflater.java:858) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:821) at android.view.LayoutInflater.inflate(LayoutInflater.java:518) at android.view.LayoutInflater.inflate(LayoutInflater.java:426) at com.example.panzq.tablayout.fragments.KeypadCallFragment.onCreateView(KeypadCallFragment.java:37) at android.support.v4.app.Fragment.performCreateView(Fragment.java:2439) at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1460) at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1784) at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1852) at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:802) at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:2625) at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2411) at android.support.v4.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2366) at android.support.v4.app.FragmentManagerImpl.execSingleAction(FragmentManager.java:2243) at android.support.v4.app.BackStackRecord.commitNowAllowingStateLoss(BackStackRecord.java:654) at android.support.v4.app.FragmentStatePagerAdapter.finishUpdate(FragmentStatePagerAdapter.java:168) at android.support.v4.view.ViewPager.populate(ViewPager.java:1244) at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:669) at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:631) at android.support.v4.view.ViewPager.setCurrentItem(ViewPager.java:612) at android.support.design.widget.TabLayout$ViewPagerOnTabSelectedListener.onTabSelected(TabLayout.java:2831) at android.support.design.widget.TabLayout.dispatchTabSelected(TabLayout.java:1608) at android.support.design.widget.TabLayout.selectTab(TabLayout.java:1601) at android.support.design.widget.TabLayout.selectTab(TabLayout.java:1569) at android.support.design.widget.TabLayout$Tab.select(TabLayout.java:1874) at android.support.design.widget.TabLayout$TabView.performClick(TabLayout.java:2059) at android.view.View$PerformClick.run(View.java:22265) at android.os.Handler.handleCallback(Handler.java:751) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:154) at android.app.ActivityThread.main(ActivityThread.java:6077) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)
则需要修改style.xml文件
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
改为
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
代码地址：https://github.com/MichealPan9999/TabLayout-ViewPager
转载于:https://www.cnblogs.com/qiangge-python/p/9837758.html
TabLayout和ViewPager相关推荐
- Android之TabLayout和ViewPager组合跳转到指定页面
1 问题 TabLayout和ViewPager组合跳转到具体一个页面 2 解决办法 viewPager?.setCurrentItem(index) index为0说明是第一页,如果是1的话就是第二 ...
- TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签
首先来看下实现的效果吧: 最近在项目中实现这个效果的时候.尽管自己磕磕绊绊的实现了,可是知识确实模模糊糊的,今天天气异常的冷,在加上这个知识不太熟练,实在是没有心情进行接下来的计划,干脆借着这个时间, ...
- Android TabLayout和ViewPager
In this tutorial we'll be implementing a ViewPager under the TabLayout that we'd already implemented ...
- Android MVVM框架搭建（九）TabLayout、ViewPager、城市地图天气切换
Android MVVM框架搭建(九)TabLayout.ViewPager.城市地图切换 前言 正文 一.父Fragment加载子Fragment ① Fragment适配器 ② TabLayout ...
- TabLayout和ViewPager实现今日头条效果
一.效果图 二.实现原理 TabLayout+ViewPager+Fragment 三.实现 MainActivity.java public class MainActivity extends A ...
- TabLayout联动ViewPager
大家好:凡是过往,皆为序章.自力更生,艰苦奋斗!衷心希望各位坚守本心,实现中华民族伟大复兴的中国梦! 一.问题背景 上一篇文章向大家介绍了如何解决Android Studio不提示控件的XML属性.本 ...
- android——CollapsingToolbarLayout、半透明、TabLayout、ViewPager、顶部状态栏透明，顶部和滑动互动
效果图: xml代码: <?xml version="1.0" encoding="utf-8"?> <androidx.coordinato ...
- ViewPager,TabLayout,Fragment实现tabs滑动
工作半年了,准备在新的一年开始写点博客,记录自己的成长,如果能给别人一些参考就更好了. Demo实现: 前段时间公司的项目遇到了使用 ViewPager,TabLayout 和 Fragment实现一 ...
- TabLayout+Viewpager+Fragment实现分页滚动
效果如上,顶部标签滚动底下的页面也跟着滚动 灰色的标签只是一个recyclerview装起来的 这里用TabLayout+Viewpager+Fragment实现 先看布局 <?xml vers ...
最新文章
- 【numpy】np.genfromtxt非常的慢，并且需要读取文件的10倍内存
- Android 正则表达式
- python最大公约数
- oracle的高水位和低水位实验,Oracle 高水位问题
- 分页携带请求参数_一个值得深思的小问题 请求中的参数值为空要不要携带该参数？...
- 增强型for和Iterator学习
- mac vs 返回上一步_mac电脑打不开应用程序的解决方法
- 它是真实的“盗梦空间”？在这里，一切都可能是数据
- Verdi的使用技巧总结
- Bailian2815 城堡问题【DFS】
- 无法加载站点/服务的所有 ISAPI 筛选器，因此启动中止——Service Unavailable解决方法合集...
- android pdf阅读工具,Android手机上最好用的PDF阅读器，没有之一！
- Oracle DB audit
- Datawhale组队学习周报（第029周）
- 五伤四损 - 万全《养生四要》
- Gizmo for Linux 1.1.0.39
- Vue常用经典开源项目汇总参考-海量
- windows安装maven
- 动物判别系统python实现
- 动态内存管理——tlsf