将自定义布局添加到ActionBar/Toolbar中，不留空白 [英] Add custom layout to ActionBar/Toolbar with no margins
问题描述
我想创建一个自定义的高度工具栏，并且在向其添加内容之前它可以正常工作.然后，将我的内容调整为在后退箭头和操作栏按钮之间.
I want to create a custom height toolbar and it works fine until I add content to it. Then my content is adjusted to be between the back arrow and the actionbar buttons.
如何使我的内容占据整个宽度，以便创建如下所示的布局?我猜"+"图标需要在工具栏的父级布局中吗?
How can I make my content take the entire width so I can create a layout like below? I guess the "+" icon needs to be in a parent layout of the toolbar?
文档说:
应用程序可以向工具栏添加任意子视图.它们将出现在布局中的此位置.如果子视图的Toolbar.LayoutParams的Gravity值为CENTER_HORIZONTAL，则在测量完所有其他元素之后，该视图将尝试在工具栏剩余的可用空间内居中.
The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
但是我没有将引力设置为CENTER_HORIZONTAL ...
But I don't have the gravity set to CENTER_HORIZONTAL...
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:iosched="http://schemas.android.com/apk/res-auto"
iosched:theme="@style/ActionBarThemeOverlay"
iosched:popupTheme="@style/ActionBarPopupThemeOverlay"
android:id="@+id/toolbar_actionbar"
android:background="@color/theme_primary"
iosched:titleTextAppearance="@style/ActionBar.TitleText"
iosched:contentInsetStart="16dp"
iosched:contentInsetEnd="16dp"
android:layout_width="match_parent"
android:layout_height="128dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
... My Content
当前，我的布局在将左边距设置为168的情况下以这种方式结束:
Currently my layout ends up like this when running with left margin set to 168:
推荐答案
我不确定您是否仍需要帮助，但是对于未回答的问题，它的票数最多，不仅是 android-toolbar 标签.所以，我以为我会给它一个.
I'm not sure if you still need help with this, but it has the most votes for an unanswered question in not only the android-5.0-lollipop tag, but also the android-toolbar tag right now. So, I thought I'd give it one.
这种布局非常容易实现，尤其是使用新的设计支持库时.
This layout is pretty easy to achieve, especially with the new Design Support Library.
实施
您的层次结构的根必须为 CoordinatorLayout
The root of your hierarchy will need to be the CoordinatorLayout.
根据文档:
CoordinatorLayout的子级可能有一个锚点.此视图ID必须 对应于CoordinatorLayout的任意后代，但它 可能不是被锚定的孩子本身或被锚定的孩子的后代 孩子.这可用于放置相对于其他视图的浮动视图 任意内容窗格.
Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.
因此，我们将使用它来定位 FloatingActionButton 它需要去哪里.
So, we'll use this to position the FloatingActionButton where it needs to go.
其余的非常简单.我们将使用垂直的LinearLayout来放置Toolbar，文本容器，标签容器，然后是ViewPager.因此，整个布局如下所示:
The rest is pretty straightforward. We're going to use a vertical LinearLayout to position the Toolbar, text container, tab container, and then a ViewPager. So, the full layout looks like:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#181E80"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:paddingTop="8dp">
<ImageView
android:id="@android:id/icon"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:importantForAccessibility="no"
android:src="@drawable/logo" />
<TextView
android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@android:id/icon"
android:layout_marginStart="14dp"
android:layout_toEndOf="@android:id/icon"
android:text="Chelsea"
android:textColor="@android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="@android:id/text1"
android:layout_below="@android:id/text1"
android:text="England - Premier League"
android:textColor="@android:color/white"
android:textSize="12sp" />
</RelativeLayout>
<FrameLayout
android:id="@+id/tab_container"
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#272F93">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabContentStart="70dp"
app:tabGravity="center"
app:tabIndicatorColor="#F1514A"
app:tabMode="scrollable"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="#99ffffff" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="16dp"
android:src="@drawable/ic_star_white_24dp"
app:backgroundTint="#F1514A"
app:borderWidth="0dp"
app:elevation="8dp"
app:layout_anchor="@id/tab_container"
app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>
There's not a whole lot more to add, the only other thing I'd mention is how to use the TabLayout. If you're using a ViewPager like we are, you'd probably call one of the two:
注释
我只是盯着尺寸，试图尽可能地匹配图片.
I just kind of eyeballed the dimensions, trying to match the picture as much as possible.
结果
这篇关于将自定义布局添加到ActionBar/Toolbar中，不留空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
