1、前言

在Android開發前期時，實現一個業務分明的導航欄對后面各業務開發與解耦都有重要意義。現在各種廠商的導航欄樣式都比較類似，Tab型的導航是當下被大家所選擇的形式，今天我們就來快速搭建一個Tab類型的導航欄。底下可參考源碼。

2、效果圖

今日頭條.gif

豌豆莢.gif

可以看到不同業務情況下，導航欄可以固定或者滑動。廢話不多說，直接上代碼。

3、實現

1、添加依賴

compile 'com.android.support:design:26.1.0'

2、頁面布局

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="app.main.wangliwei.enablehands.view.MainActivity">

android:layout_width="match_parent"

android:layout_height="wrap_content"

style="@style/Theme.AppCompat.Light"

android:elevation="0dp">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="25dp"

app:layout_scrollFlags="scroll|enterAlways"

android:layout_marginTop="30dp">

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabMode="scrollable"

app:tabIndicatorColor="@color/white"

android:layout_marginTop="10dp">

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

根布局為CoordinatorLayout從上到下依次為toolbar、tabLayout、viewpager，由于我做了沉浸式布局處理，所以在toolbar上面留出了狀態欄的空間，陰影高度elevation，設置app:tabMode="scrollable"使導航欄在顯示不全的情況下可滑動。而Tab頁面切換關鍵在于將TabLayout與ViewPager進行綁定。

3、代碼

因為ViewPager是一個容器，我們把Fragment看作數據的話，則必須有一個adapter將數據按順序地放入我們的容器中，這時需要新建一個類繼承自FragmentPagerAdapter。與TabLayout搭配使用時必須復寫getPageTitle這一方法，在獲取adapter實例時將title傳入，getItem返回的實例與title一一對應。

ViewPagerAdapter

public class ViewPagerAdapter extends FragmentPagerAdapter {

private List fragmentList;

private List titleList;

public ViewPagerAdapter(FragmentManager fm, List fragmentList, List titleList) {

super(fm);

this.fragmentList = fragmentList;

this.titleList = titleList;

}

@Override

public int getCount() {

return fragmentList.size();

}

@Override

public Fragment getItem(int position) {

return fragmentList.get(position);

}

@Override

public CharSequence getPageTitle(int position) {

return titleList.get(position);

}

}

設置Toolbar以及TabLayout與ViewPager的對應關系

private void initToolBar() {

toolbar.setNavigationIcon(R.mipmap.other);

List list_fragment = new ArrayList<>();

for(int i=0;i<6;i++) {

list_fragment.add(new PictureFragment());

}

ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),

list_fragment,Arrays.asList(tabTitle));

viewPager.setAdapter(viewPagerAdapter);

tabLayout.setupWithViewPager(viewPager);

}

沉浸式效果

理論上來說現在的沉浸式都不是意義上的沉浸式，這里先不考慮5.1以下沉浸式實現，5.1以上是可以直接通過設置Window 類中的setStatusBarColor(int color)和setNavigationBarColor(int color)來實現，具體原理都是先設置狀態欄和導航欄的顏色為透明，然后讓主體內容占用它們的空間。

更多的了解可以參考這篇文章。

private int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE

|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;

private void setTransParent(){

getWindow().getDecorView().setSystemUiVisibility(option);

getWindow().setStatusBarColor(Color.TRANSPARENT);

getWindow().setNavigationBarColor(Color.TRANSPARENT);

getSupportActionBar().hide();

}

實現效果

tablayout.gif

項目以后會繼續增加其他內容，參考MainActivity中的內容即可。

查看源碼

總結

以上是生活随笔為你收集整理的android顶部导航高度,快速实现顶端导航栏(ToolBar+TabLayout+Viewpager)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。