如何创建与里面的标签新LinkedIn应用风格的动作条？ [英] How to create new LinkedIn app style ActionBar with Tabs inside it?

问题描述

我试图创建5个选项卡和一个按钮/ ImageView的会从右侧打开NavigationDrawer的动作条。非常相似，LinkedIn在其新的Andr​​oid应用程序都做了，这里是一个图像：

I'm trying to create an ActionBar with 5 tabs and a button/imageview that will open NavigationDrawer from the right side. Very similar to what LinkedIn have done in their new Android application, here is an image:

我试了两种方法，但其中不顺利对我来说：

I tried two methods, but non of them went well for me:

1. 我试图创建一个新的项目Tabb​​edActivity，所得到的布局包括这样的：

1. I tried to created a new TabbedActivity project, the resulted layout included this:

<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不能有水平方向。所以这个解决方案没有工作。

Now I tried to remove ToolBar from here and set AppBarLayout orientation as horizontal in order to add to the action bar another icon for opening the drawer. But the AppBarLayout can't have horizontal orientation. So this solutions does not works.

另一种方式我试图实现它是使用应用程序兼容性与动作条和ActionBar.Tab。因为它看起来就像是由LinkedIn创建时我看了看使用AI的Automator这个布局，使用以下code：

1. Another way I tried to implement it is using an AppCompat with ActionBar and ActionBar.Tab. as it looks like it was created by LinkedIn when I looked at this layout using the AI Automator, using the following code:

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));
}
}

但我不能达到预期的效果。

but I could not reach the desired result.

结果： @Vikram提供答案的伟大工程，这是它的结果，在横向模式下：

Result: @Vikram provided answer works great and this is it's result in landscape mode:

肖像作品如预期好。

先谢谢了。

推荐答案

为什么不使用与第一个选项 TabLayout 放置的在的的工具栏？这就是我得到这样做：

Why not use the first option with the TabLayout placed inside the Toolbar? This is what I get by doing so:

布局侧：

<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 将去为好。

You can also do without CoordinatorLayout, along with AppBarLayout, since they do not come into play. layout_scrollFlags & layout_behavior will go as well.

编辑：

我用UI的Automator查看器来检查什么LinkedIn与它们的布局做。他们不使用动作条 / 工具栏。相反，他们有一个水平的LinearLayout 与 TabLayout 作为第一个孩子，和几个独立的图标作为第二和第三。

I used UI Automator Viewer to check what LinkedIn was doing with their layout. They are not using an ActionBar/Toolbar. Instead, they have a horizontal LinearLayout with TabLayout as the first child, and a couple of independent icons as the second and third.

接下来，我检查 TabLayout的源代码，以确定标签使用的确切布局。 TabLayout的标签是由 TabLayout.TabView 定义了一个的LinearLayout 创建编程方式：

Next, I checked TabLayout's source to determine the exact layout that tabs use. TabLayout's tabs are defined by TabLayout.TabView which is a LinearLayout created programmatically:

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

我翻译这XML：

I translated this to 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>

请注意：以上所分配的尺寸不乱。它们在设计支持库中定义。

Note: The dimensions assigned above are not arbitrary. They are defined in the design support library.

所以，最后的动作条布局将是：

So, the final ActionBar layout will be:

<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应用风格的动作条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！