问题描述
我想创建一个自定义的高度工具栏,并且在向其添加内容之前它可以正常工作.然后,将我的内容调整为在后退箭头和操作栏按钮之间.
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?
文档说:
但是我没有将引力设置为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:
推荐答案
我不确定您是否仍需要帮助,但是对于未回答的问题,它的票数最多,不仅是标签,但标签.所以,我以为我会给它一个.
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
.
根据文档:
因此,我们将使用它来定位 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>
没有太多要添加的内容,我唯一提到的另一件事是如何使用.如果您像我们一样使用ViewPager
,则可能会调用两者之一:
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中,不留空白的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!