这里就说下tablayout+viewpager的实现方式;tablayout是android5.0推出来的一个MaterialDesign风格的控件,是专门用来实现tab栏效果的;功能强大,使用方便灵活;

一、引入依赖库

使用非常方便,Android Studio只需要在gradle中引入即可使用 .

apply plugin: 'com.android.application'

android {
compileSdkVersion 28
defaultConfig {
applicationId "com.example.panzq.tablayout"
minSdkVersion 22
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles 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.ViewPager
android: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.TabLayout
android: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.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_call_black_24dp"
android:text="@string/recents" /> <android.support.design.widget.TabItem
android: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.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_person_black_24dp"
android:text="@string/contacts" /> <android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_dialpad_black_24dp"
android:text="@string/keypad" /> <android.support.design.widget.TabItem
android: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 {

    @Override
protected 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栏切换效果就实现了。

如果发现程序出现如下错误

- ::47.677 -/com.example.panzq.tablayout E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.example.panzq.tablayout, PID:
android.view.InflateException: Binary XML file line #: Binary XML file line #: Error inflating class android.support.design.button.MaterialButton
Caused by: android.view.InflateException: Binary XML file line #: Error inflating class android.support.design.button.MaterialButton
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Constructor.newInstance0(Native Method)
at java.lang.reflect.Constructor.newInstance(Constructor.java:)
at android.view.LayoutInflater.createView(LayoutInflater.java:)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:)
at android.view.LayoutInflater.inflate(LayoutInflater.java:)
at android.view.LayoutInflater.inflate(LayoutInflater.java:)
at com.example.panzq.tablayout.fragments.KeypadCallFragment.onCreateView(KeypadCallFragment.java:)
at android.support.v4.app.Fragment.performCreateView(Fragment.java:)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:)
at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:)
at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:)
at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:)
at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:)
at android.support.v4.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:)
at android.support.v4.app.FragmentManagerImpl.execSingleAction(FragmentManager.java:)
at android.support.v4.app.BackStackRecord.commitNowAllowingStateLoss(BackStackRecord.java:)
at android.support.v4.app.FragmentStatePagerAdapter.finishUpdate(FragmentStatePagerAdapter.java:)
at android.support.v4.view.ViewPager.populate(ViewPager.java:)
at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:)
at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:)
at android.support.v4.view.ViewPager.setCurrentItem(ViewPager.java:)
at android.support.design.widget.TabLayout$ViewPagerOnTabSelectedListener.onTabSelected(TabLayout.java:)
at android.support.design.widget.TabLayout.dispatchTabSelected(TabLayout.java:)
at android.support.design.widget.TabLayout.selectTab(TabLayout.java:)
at android.support.design.widget.TabLayout.selectTab(TabLayout.java:)
at android.support.design.widget.TabLayout$Tab.select(TabLayout.java:)
at android.support.design.widget.TabLayout$TabView.performClick(TabLayout.java:)
at android.view.View$PerformClick.run(View.java:)
at android.os.Handler.handleCallback(Handler.java:)
at android.os.Handler.dispatchMessage(Handler.java:)
at android.os.Looper.loop(Looper.java:)
at android.app.ActivityThread.main(ActivityThread.java:)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:)
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:)
at android.support.design.internal.ThemeEnforcement.obtainStyledAttributes(ThemeEnforcement.java:)
at android.support.design.button.MaterialButton.<init>(MaterialButton.java:)
at android.support.design.button.MaterialButton.<init>(MaterialButton.java:)
at java.lang.reflect.Constructor.newInstance0(Native Method) 
at java.lang.reflect.Constructor.newInstance(Constructor.java:) 
at android.view.LayoutInflater.createView(LayoutInflater.java:) 
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:) 
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:) 
at android.view.LayoutInflater.rInflate(LayoutInflater.java:) 
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:) 
at android.view.LayoutInflater.inflate(LayoutInflater.java:) 
at android.view.LayoutInflater.inflate(LayoutInflater.java:) 
at com.example.panzq.tablayout.fragments.KeypadCallFragment.onCreateView(KeypadCallFragment.java:) 
at android.support.v4.app.Fragment.performCreateView(Fragment.java:) 
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:) 
at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:) 
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:) 
at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:) 
at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:) 
at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:) 
at android.support.v4.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:) 
at android.support.v4.app.FragmentManagerImpl.execSingleAction(FragmentManager.java:) 
at android.support.v4.app.BackStackRecord.commitNowAllowingStateLoss(BackStackRecord.java:) 
at android.support.v4.app.FragmentStatePagerAdapter.finishUpdate(FragmentStatePagerAdapter.java:) 
at android.support.v4.view.ViewPager.populate(ViewPager.java:) 
at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:) 
at android.support.v4.view.ViewPager.setCurrentItemInternal(ViewPager.java:) 
at android.support.v4.view.ViewPager.setCurrentItem(ViewPager.java:) 
at android.support.design.widget.TabLayout$ViewPagerOnTabSelectedListener.onTabSelected(TabLayout.java:) 
at android.support.design.widget.TabLayout.dispatchTabSelected(TabLayout.java:) 
at android.support.design.widget.TabLayout.selectTab(TabLayout.java:) 
at android.support.design.widget.TabLayout.selectTab(TabLayout.java:) 
at android.support.design.widget.TabLayout$Tab.select(TabLayout.java:) 
at android.support.design.widget.TabLayout$TabView.performClick(TabLayout.java:) 
at android.view.View$PerformClick.run(View.java:) 
at android.os.Handler.handleCallback(Handler.java:) 
at android.os.Handler.dispatchMessage(Handler.java:) 
at android.os.Looper.loop(Looper.java:) 
at android.app.ActivityThread.main(ActivityThread.java:) 
at java.lang.reflect.Method.invoke(Native Method) 
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:) 
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:) 

则需要修改style.xml文件

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

改为

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

代码地址:https://github.com/MichealPan9999/TabLayout-ViewPager

最新文章

  1. iOS中block的用法 以及和函数用法的区别
  2. css之px自动转rem—“懒人”必备
  3. UIAlertController 使用
  4. Log4Net指南
  5. 学习Shell脚本编程(第5期)_表达式的比较
  6. Jsoncpp 数组的使用
  7. ECSHOP模板标签
  8. WPF与输入法冲突研究之二:汉字输入法会导致WPF程序的崩溃!
  9. Hibernate 、多表关联映射-多对一关系(many-to-one)
  10. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: SELECT command denied to user &#39;xxxx&#39;@&#39;&#39;
  11. Mr. Kitayuta vs. Bamboos
  12. Ionic2 开发笔记(1)ionic2 +angular2搭建
  13. 性能测试培训:sql server性能测试分析局部变量的性能影响
  14. 【Android应用开发】Android Studio - MAC 版 - 快捷键详解
  15. iOS----------面试常问
  16. 工作经验-Oracle定时数据备份
  17. php 常用正则
  18. redhat7 配置使用centos的yum源
  19. APP中的图片如何长按可以下载并保存图片到相册
  20. How to change and add some params to request in Laravel controller?

热门文章

  1. Struts2基础2
  2. 【节点-添加标签】【节点-删除标签】【显示年-月-日-星期】【math算数】【正则表达式】
  3. Kotlin数据模型
  4. A - Arcade Game Gym - 100814A (概率思维题)
  5. cubeui
  6. 【NLP CS224N笔记】Lecture 3 GloVe: Global Vectors for Word Representation
  7. SpringMVC中前后端Date交互
  8. Boost.Asio的使用技巧
  9. 第三章 Models详解
  10. php-GatewayWorker搭建实时聊天室