我想创建一个自定义高度工具栏,它可以正常工作,直到我向其添加内容。然后我的内容被调整为在后退箭头和操作栏按钮之间。
如何让我的内容占据整个宽度,以便我可以创建如下的布局?我想" +"图标需要位于工具栏的父布局中吗?
文档说:
应用程序可能会向工具栏添加任意子视图。它们将出现在布局中的这个位置。如果子视图的Toolbar.LayoutParams指示CENTER_HORIZONTAL的重力值,则在测量完所有其他元素后,视图将尝试以工具栏中剩余的可用空间为中心。
但我没有将重力设置为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时,我的布局会像这样结束:
答案 0 :(得分:25)
我不确定您是否仍然需要这方面的帮助,但它对于android-5.0-lollipop标记中的未回答问题的投票最多,而且现在还有android-toolbar标记。所以,我以为我会给它一个。
这种布局很容易实现,特别是对于新的Design Support Library。
<强>实施强>
您的层次结构的根必须是CoordinatorLayout
。
根据文档:
CoordinatorLayout的孩子可能有一个锚点。此视图ID必须 对应于CoordinatorLayout的任意后代,但它 可能不是锚定的孩子本身或锚定的后代 儿童。这可用于相对于其他视图放置浮动视图 任意内容窗格。
因此,我们会使用此功能将FloatingActionButton
置于需要的位置。
其余的非常简单。我们将使用垂直LinearLayout
来定位Toolbar
,文本容器,标签容器,然后是ViewPager
。因此,完整的布局如下:
<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>
要添加的内容还不多,我唯一提到的另一件事就是如何使用TabLayout
。如果你像我们一样使用ViewPager
,你可能会打电话给其中一个:
备注强>
我只是想象尺寸,试图尽可能地匹配图片。
<强>结果