TabLayout實現頂部導航(一)
代碼地址如下:
http://www.demodashi.com/demo/14552.html
前言
頂部導航欄,是我們在開發中比較常見的一種顯示布局,它的實現可以有多種方式,那麽今天我們就來講講 TabLayout 對它的實現
今天涉及的內容有:
- 實現導航欄的幾種方式
- 庫的導入
- TabLayout的具體使用
- 效果圖
一.實現導航欄的幾種方式及解析
我們在實現頂部導航的時候,可以有多種選擇:
- ViewPagerIndicator + Fragment + ViewPager
- ActionBar + Fragment + ViewPager
- 自定義一個View實現
基於第一種需要和activity的主題相結合,對activity主題的限制比較高,第二種 actionBar耦合也高,第三種自定義view會比較繁瑣。
二.庫的導入
TabLayout是android中Material Design庫中控件,因此需要做以下庫導入:
//TabLayout
compile 'com.android.support:design:27.1.1'
compile 'com.android.support:support-v4:27.1.1'
三.TabLayout的具體使用
3.1 先展示在mainActivity中的xml代碼
實現頂部導航,所以TabLayout要結合ViewPager使用,xml代碼如下:
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.android.testdemo.main.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="0dp" android:layout_height="@dimen/dp_40" app:tabIndicatorColor="@color/green" app:layout_constraintEnd_toStartOf="@+id/button1" app:layout_constraintStart_toStartOf="parent" app:tabMode="scrollable"> </android.support.design.widget.TabLayout> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="測試" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" tools:ignore="MissingConstraints"/> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginTop="5dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/tablayout" /> </android.support.constraint.ConstraintLayout>
這裏需要註意的是 app:tabIndicatorColor="@color/green" 設置的是每個item切換時下面短橫線的顏色,為了適應導航欄中項目較多,可以滑動顯示的需求,需要設置 app:tabMode="scrollable"
3.2 展示Viewpager的適配器
使用到ViewPager,肯定少不了其對應的適配器,現在給出TabFragmentAdapter類的代碼:
package com.android.testdemo.function; import android.content.Context; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * Title: * Description: * <p> * Created by pei * Date: 2018/9/20 */ public class TabFragmentAdapter extends FragmentPagerAdapter { private String[] mTitles; private Context mContext; private List<Fragment> mFragments; public TabFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) { super(fm); this.mContext = context; this.mFragments = fragments; this.mTitles = titles; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mTitles.length; } @Override public CharSequence getPageTitle(int position) { return mTitles[position]; } }
其中 getPageTitle(int position) 返回的是每個頁面的導航標題。
3.3 ViewPager中需要加載的Fragment
ViewPager滑動時會切換不同的Fragemnt,現在為了簡潔展示起見,就讓加載同一個Fragment,然後展示不同的導航標題
下面給出MyFragment的代碼:
public class MyFragment extends AppFragment {
@BindView(R.id.tv_name)
TextView mTvName;
private String mName;
@Override
public void onCreate(@Nullable Bundle bundle) {
super.onCreate(bundle);
if(getArguments()!=null){
mName = getArguments().getString("text");
}
}
@Override
public int getContentViewId() {
return R.layout.fragment_my;
}
@Override
public void initData() {
mTvName.setText(mName);
}
@Override
public void setListener() {
}
@Override
protected void onVisible(boolean isFirstTimeLoad) {
}
@Override
protected void onInvisible() {
}
}
其中 mName = getArguments().getString("text"); 用於接收並在fragment中展示導航標題
3.4 TabLayout在mainActivity的使用
在mainActivity中需要先聲明一個導航欄數組:
private String mTitles[] = {
"上海", "頭條推薦", "生活", "娛樂八卦", "體育",
"段子", "美食", "電影", "科技", "搞笑",
"社會", "財經", "時尚", "汽車", "軍事",
"小說", "育兒", "職場", "萌寵", "遊戲",
"健康", "動漫", "互聯網"};
然後加載導航對應的fragment:
private List<Fragment> mFragments;
mFragments = new ArrayList<>();
for (int i = 0; i < mTitles.length; i++) {
Fragment fragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putString("text", mTitles[i]);
fragment.setArguments(bundle);
mFragments.add(fragment);
}
再次是加載fragment對應的adapter:
mTabFragmentAdapter = new TabFragmentAdapter(mFragments, mTitles, getSupportFragmentManager(), mContext);
// mViewPager.setOffscreenPageLimit(mFragments.size());// 設置預加載Fragment個數
mViewPager.setOffscreenPageLimit(6);// 設置預加載Fragment個數
mViewPager.setAdapter(mTabFragmentAdapter);
mViewPager.setCurrentItem(0);// 設置當前顯示標簽頁為第一頁
最後再TabLayout綁定到ViewPager上,並設置TabLayout滑動選中和未選中時導航的文字顏色,在默認情況下,導航條是與導航文字寬度一致的,為了保持美觀,一般要設置導航條與兩邊的間隙,這時別忘了調用方法
public void reflex(final TabLayout tabLayout)
具體的demo中都有詳細介紹,這裏就不做大篇幅講解了。
四.項目結構圖和效果圖
項目結構圖如下
運行效果圖如下:
TabLayout實現頂部導航(一)
代碼地址如下:
http://www.demodashi.com/demo/14552.html
註:本文著作權歸作者,由demo大師代發,拒絕轉載,轉載需要作者授權
TabLayout實現頂部導航(一)