TabLayout和ViewPager

其他 2018-10-23 17:18:58 阅读次数: 0

　　这里就说下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栏切换效果就实现了。

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

10-23 06:29:47.677 25503-25503/com.example.panzq.tablayout E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.panzq.tablayout, PID: 25503
    android.view.InflateException: Binary XML file line #31: Binary XML file line #31: Error inflating class android.support.design.button.MaterialButton
    Caused by: android.view.InflateException: Binary XML file line #31: 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: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

猜你喜欢

转载自www.cnblogs.com/qiangge-python/p/9837758.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022