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

Question

我正在尝试创建一个带有 5 个选项卡和一个 button/imageview 的 ActionBar，它将从右侧打开 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>

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

我尝试实现它的另一种方法是使用带有 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>

Activity 边:

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 作为第一个 child，以及几个独立的图标作为第二个和第三个。

接下来，我检查了 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>

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

How to create new LinkedIn app style ActionBar with Tabs inside it?

tabs

android

android-actionbar

android-tabs