當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

TabLayout和ViewPager

發(fā)布時(shí)間：2024/4/15 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 TabLayout和ViewPager 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

　　這里就說(shuō)下tablayout+viewpager的實(shí)現(xiàn)方式；tablayout是android5.0推出來(lái)的一個(gè)MaterialDesign風(fēng)格的控件，是專門用來(lái)實(shí)現(xiàn)tab欄效果的；功能強(qiáng)大，使用方便靈活；

一、引入依賴庫(kù)

使用非常方便,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" 對(duì)齊方式，可選fill和center
app:tabIndicatorColor="@color/colorAccent" 設(shè)置tab下劃線的顏色
app:tabMode="scrollable" scrollable是可以橫行滾動(dòng),fixed是指固定個(gè)數(shù)
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>

三設(shè)置TabLayout和ViewPager關(guān)聯(lián)

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();方法的調(diào)用必須在viewpager設(shè)置完適配器后調(diào)用，如果在設(shè)置適配器之前調(diào)用會(huì)拋異常，至于為什么會(huì)拋異常，后面tablayout的源碼會(huì)說(shuō)到；這樣tab欄切換效果就實(shí)現(xiàn)了。

如果發(fā)現(xiàn)程序出現(xiàn)如下錯(cuò)誤

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文件

改為

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

轉(zhuǎn)載于:https://www.cnblogs.com/qiangge-python/p/9837758.html

總結(jié)

以上是生活随笔為你收集整理的TabLayout和ViewPager的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Codeforces 527C Glas
下一篇： Android 7.0 Gallery图