如何在其中创建带有标签的新 LinkedIn 应用程序样式 ActionBar？

Question

我正在尝试创建一个带有 5 个选项卡和一个按钮/图像视图的 ActionBar，它将从右侧打开 NavigationDrawer。与 LinkedIn 在他们的新 Android 应用程序中所做的非常相似，这是一张图片：

我尝试了两种方法，但都不适合我：

1. 我尝试创建一个新的 TabbedActivity 项目，结果布局包括：

   <android.support.design.widget.CoordinatorLayout
       android:id="@+id/main_content"                                                    
       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"
       android:fitsSystemWindows="true"
       tools:context="com.emildesign.linkedinstyleactionbar.MainActivity">
       <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/appbar_padding_top"
            android:theme="@style/AppTheme.AppBarOverlay">
   
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay">
            </android.support.v7.widget.Toolbar>
      </android.support.design.widget.AppBarLayout>
   
      <android.support.v4.view.ViewPager
          android:id="@+id/container"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
   
       <android.support.design.widget.FloatingActionButton
           android:id="@+id/fab"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="end|bottom"
           android:layout_margin="@dimen/fab_margin"
           android:src="@android:drawable/ic_dialog_email"/>
   </android.support.design.widget.CoordinatorLayout>
   

现在我尝试从此处删除 ToolBar 并将 AppBarLayout 方向设置为水平，以便在操作栏中添加另一个用于打开抽屉的图标。但是 AppBarLayout 不能有水平方向。所以这个解决方案不起作用。

1. 我尝试实现它的另一种方法是使用带有 ActionBar 和 ActionBar.Tab 的 AppCompat。当我使用 AI Automator 查看此布局时，它看起来像是由 LinkedIn 创建的，使用以下代码：

   public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   
   // Create the adapter that will return a fragment for each of the three primary sections
   // of the app.
   mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getSupportFragmentManager());
   
   // Set up the action bar.
   final ActionBar actionBar = getActionBar();
   
   // Specify that the Home/Up button should not be enabled, since there is no hierarchical
   // parent.
   actionBar.setHomeButtonEnabled(false);
   
   // Specify that we will be displaying tabs in the action bar.
   actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
   
   // Set up the ViewPager, attaching the adapter and setting up a listener for when the
   // user swipes between sections.
   mViewPager = (ViewPager) findViewById(R.id.pager);
   mViewPager.setAdapter(mAppSectionsPagerAdapter);
   mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
       @Override
       public void onPageSelected(int position) {
           // When swiping between different app sections, select the corresponding tab.
           // We can also use ActionBar.Tab#select() to do this if we have a reference to the
           // Tab.
           actionBar.setSelectedNavigationItem(position);
       }
   });
   
   // For each of the sections in the app, add a tab to the action bar.
   for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {
       // Create a tab with text corresponding to the page title defined by the adapter.
       // Also specify this Activity object, which implements the TabListener interface, as the
       // listener for when this tab is selected.
       actionBar.addTab(
               actionBar.newTab()
                       .setText(mAppSectionsPagerAdapter.getPageTitle(i))
                       .setTabListener(this));
   }
   }
   

但我无法达到预期的结果。有没有人创造了这样的东西，可以让我朝着正确的方向前进？

结果： Vikram 提供的答案效果很好，这是它在横向模式下的结果：

人像也可以正常工作。

Answer 1

为什么不使用将TabLayout 放置在内部 Toolbar 的第一个选项？这就是我这样做的结果：

布局方面：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

    </android.support.v7.widget.Toolbar>

活动端：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);

tabLayout.getTabAt(0).setIcon(R.drawable.icon1);
....
....
tabLayout.getTabAt(5).setIcon(R.drawable.icon6);

您也可以不使用 CoordinatorLayout 和 AppBarLayout，因为它们不会起作用。 layout_scrollFlags & layout_behavior 也会去。

编辑：

我使用 UI Automator Viewer 来检查 LinkedIn 对他们的布局做了什么。他们没有使用ActionBar/Toolbar。相反，它们有一个水平的LinearLayout，TabLayout 作为第一个孩子，几个独立的图标作为第二个和第三个。

接下来，我检查了TabLayout's 源以确定选项卡使用的确切布局。 TabLayout's 选项卡由 TabLayout.TabView 定义，LinearLayout 以编程方式创建：

class TabView extends LinearLayout implements OnLongClickListener {
    ....
}

我把它翻译成 XML：

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:paddingStart="12dp"
    android:paddingEnd="12dp"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/icon5"/>

</LinearLayout>

注意：上面分配的尺寸不是任意的。它们在设计支持库中定义。

所以，最终的ActionBar 布局将是：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:orientation="horizontal"
    android:background="?attr/colorPrimary">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="4"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/icon5"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/icon6"/>

    </LinearLayout>

</LinearLayout>