Android 如何创建新的LinkedIn应用程序风格的ActionBar，其中包含选项卡？

我正在尝试创建一个包含5个选项卡和一个按钮/图像视图的操作栏，它将从右侧打开NavigationDrawer。与LinkedIn在其新Android应用程序中所做的非常相似，下面是一幅图像：

我尝试了两种方法，但没有一种适合我：

我尝试创建一个新的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>

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

我尝试实现它的另一种方法是使用带有ActionBar和ActionBar.Tab的AppCompat。当我使用AI自动机查看此布局时，它似乎是由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提供的答案非常有效，这是它在横向模式下的结果：

---

“纵向”也可以正常工作。

为什么不使用第一个选项，将“表格布局”放在工具栏内？这就是我通过这样做得到的：

布局侧：

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

您也可以不使用CoordinatorLayout以及AppBarLayout，因为它们不起作用。布局\滚动标记和布局\行为也将继续

编辑：

我使用UI Automator Viewer来检查LinkedIn对他们的布局做了什么。他们没有使用操作栏/工具栏。相反，它们有一个水平线性布局，其中TabLayout作为第一个子项，两个独立图标作为第二和第三个子项

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

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>

---

此解决方案的问题是，在工具栏的左侧有一个空白，而右侧没有。这个解决方案的另一个问题是，除了标签，我需要为抽屉布局添加另一个图标，使其大小与标签相同。这在本例中是非常有问题的。@EmilAdz空空间由样式attr toolbarStyle下的contentInsetStart管理。默认情况下，它设置为16dp，可以更改为0dp以删除左侧的空间…是的，我已经找到了。但是我有一个很大的问题，就是在工具栏的末端添加另外两个与其他选项卡宽度相同的ImageView。因为它在LinkedIn应用程序中起作用。对，我想创建他们使用动作栏所做的一切。但是，他们所做的和您所做的不同之处在于，这里所有的工具栏都填充了选项卡。LinkedIn应用程序在工具栏的末端有两个图像视图，它们不作为选项卡使用，而是像往常一样作为按钮使用。因此，所选选项卡指示器不会滑动到这两个图像。这正是我需要实现的。你试过了吗？

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

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