android - 使用 SupportToolbar 进行手机布局，使用独立操作栏进行平板电脑布局

标签 android android-layout material-design tablet screen-orientation

今天我在想办法改进我的平板电脑设计，我发现了这张图片

A default toolbar and a standalone toolbar

我非常想要它，因为它看起来很棒。我现在在谷歌上搜索了大约一个小时，但我还没有遇到任何好的教程。我找到了这个:v21 Material Design for Pre Lollipop .

我立即开始实现，但我尝试的一切都完全出错了。独立操作栏的主题需要是 ThemeOverlay.AppCompat.ActionBar 但是在我的手机布局上我扩展了 Theme.AppCompat.NoActionBar 主题。 (主题如下)

只是不清楚我应该怎么做才能在 Tablets 上制作类似上图的东西并在 Phone 上显示正常(自定义)supportActionBar 而不会弄乱其中一个.

这是我的 AppTheme 样式(我应用于我的应用)

<!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.NoActionBar">
        <!--   your app branding color for the app bar -->
        <item name="colorPrimary">@color/primaryColor</item>
        <!--   darker variant for the status bar and contextual app bars -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--   theme UI controls like checkboxes and text fields -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>

在你问之前，是的，我找到了 this关于 SO 的问题，但这不是重复的问题。 Chris Banes 写的帖子对我来说也没有说清楚。

是否可以在不破坏两个布局的情况下执行此操作？大声思考，我选择自定义工具栏的原因是因为我包含了一个自定义搜索 View ，但删除了它。工具栏中还有另一个 View ，但我认为如果确实有必要，可以将其删除。

这是我手机版的布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:theme="@style/Theme.AppCompat.NoActionBar">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:orientation="vertical">

        <include android:id="@+id/toolbar" layout="@layout/toolbar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:background="@color/primaryColor"
            android:minHeight="?attr/actionBarSize"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appBarLayout"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/replaceFrameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/errorWarnings"
                    android:visibility="gone"
                    android:gravity="center"
                    android:layout_gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorIcon"
                        android:tint="@color/fab_material_red_500"
                        android:layout_centerVertical="true"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorDescription"
                        android:layout_below="@+id/errorIcon"/>

                </RelativeLayout>

            <com.tim.koers.wallpapers.UI.FilterButton
                android:id="@+id/filterButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|bottom"
                android:layout_margin="16dp"
                android:clickable="true"
                android:src="@drawable/ic_menu_filter"
                android:elevation="6dp"
                android:tint="@color/fab_material_white"
                android:visibility="gone"/>

        </FrameLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/drawer"/>

    </android.support.v4.widget.DrawerLayout>

</android.support.design.widget.CoordinatorLayout>

这是我的平板电脑布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fitsSystemWindows="true">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:animateLayoutChanges="true"
                android:orientation="vertical"
                android:background="@android:color/white"
                android:layout_marginEnd="64dp"
                android:layout_marginStart="64dp"
                android:layout_marginTop="56dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <!-- This is the secondary toolbar, 72dp also according to specs -->
                    <include android:id="@+id/toolbar" layout="@layout/toolbar"
                        app:layout_scrollFlags="scroll|enterAlways" />

                    <android.support.design.widget.TabLayout
                        android:id="@+id/tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/toolbar"
                        android:background="@color/primaryColor"
                        android:minHeight="?attr/actionBarSize"/>

                </RelativeLayout>

            </android.support.design.widget.AppBarLayout>



            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="56dp"
                android:layout_marginEnd="64dp"
                android:layout_marginStart="64dp"
                tools:context=".MainActivity" />

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <FrameLayout
                    android:id="@+id/replaceFrameLayout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/errorWarnings"
                    android:visibility="gone"
                    android:gravity="center"
                    android:layout_gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorIcon"
                        android:tint="@color/fab_material_red_500"
                        android:layout_centerVertical="true"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorDescription"
                        android:layout_below="@+id/errorIcon"/>

                </RelativeLayout>

                <com.tim.koers.wallpapers.UI.FilterButton
                    android:id="@+id/filterButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right|bottom"
                    android:layout_margin="16dp"
                    android:clickable="true"
                    android:src="@drawable/ic_menu_filter"
                    android:elevation="6dp"
                    android:tint="@color/fab_material_white"
                    android:visibility="gone"/>

            </FrameLayout>

            <android.support.design.widget.NavigationView
                android:id="@+id/navigation_view"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                app:menu="@menu/drawer"/>

        </android.support.v4.widget.DrawerLayout>

    </FrameLayout>

</android.support.design.widget.CoordinatorLayout>

最佳答案

我找到了一篇实现这种布局的文章。

Create a Card Toolbar (Nested Toolbar) in Android

您可以将其应用到您的平板电脑布局中。

它由一个扩展高度的工具栏(蓝色)和一个带有标题和常规菜单的 CardView 组成。

基本结构:

<FrameLayout>
<!-- Extended Toolbar holding Drawer icon -->
    <android.support.v7.widget.Toolbar />
    <android.support.v7.widget.CardView>
        <LinearLayout>
            <!-- Card Toolbar -->
            <android.support.v7.widget.Toolbar />
            <!-- Divider -->
            <View />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>

step1 工具栏高度加倍

step2 将CardView设置为辅助工具栏

step3 Java代码

  1. 原始工具栏:设置导航图标
  2. CardView 工具栏:设置菜单和标题

查看更多

  1. Android 5.0 - How to implement this tablet layout from Material Design guidelines
  2. Googling this Picture

关于android - 使用 SupportToolbar 进行手机布局，使用独立操作栏进行平板电脑布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33858818/

上一篇：android - 深度链接不适用于 Chrome for Android 应用程序以外的任何其他浏览器

下一篇：android - 有人成功地在 Android 的 React Native 中使用本地镜像吗？

相关文章：

Android如何从/res/raw/获取文件路径

android - 将一个 Android JSON 应用程序迁移到 Android 中的一个简单应用程序

android - 如何在 Android 中为 TextView 设置 LAYOUTGRAVITY？

android - Android中如何通过TabLayout使用TabItem

javascript - Angular 5 : Prevent to reload tab content when changing between tabs

android - react-native-keyboard-aware-scroll-view 无法正常工作

android - 如何使用 google place api 根据附近的偏好获取 "colleges"的列表？

android - 工具栏未满

android - MutableLiveData 中 setValue() 和 postValue() 的区别

android - TransitionManager 手动进行

©2024 IT工具网  联系我们