全宽 ActionBar 使用 Google Material 设计
Full width ActionBar using Google Material Design
我几乎用尽了所有努力来寻找解决我的问题的方法。我需要以某种方式扩展 android 主题的 ActionBar 区域。下面是我当前的工具栏项目的屏幕截图,我想将其扩展为全宽。
在 Xamarin.Forms ContentPage 中,我将工具栏项设置如下。
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconhome.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconpyxus.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconcareloop.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconnotificationbell.png", Priority = 0, Order = ToolbarItemOrder.Primary });
我不认为那里有任何问题,接下来我在主菜单中设置工具栏 activity
ToolbarResource = Resource.Layout.Toolbar;
下面是工具栏布局文件的代码。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@drawable/ab_gradient"
app:contentInsetEnd="80dp"
app:contentInsetStart="80dp"
app:contentInsetStartWithNavigation="80dp" />
然后最后,我的styles.xml在下面..
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<item name="android:actionBarSize">200dp</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
<item name="android:textAllCaps">false</item>
<!--NAV BAR SHADOW-->
<item name="android:elevation">4dp</item>
<item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>
<!--NAV BAR HEIGHT-->
<item name="android:actionBarSize">40dp</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>
</resources>
androidmanifest.xml中的主题如下
@style/Theme.AppCompat.Light.NoActionBar
如果你知道我如何让这些图标一直延伸到左端,我真的需要帮助
因此,在与 XF 社区中的一些人交谈后,我发现这可以通过自定义渲染器来完成,尽管这非常困难,或者我可以创建一个 ContentView 来按照我想要的方式模仿工具栏, 并将其添加到每个页面,然后禁用导航栏。
我几乎用尽了所有努力来寻找解决我的问题的方法。我需要以某种方式扩展 android 主题的 ActionBar 区域。下面是我当前的工具栏项目的屏幕截图,我想将其扩展为全宽。
在 Xamarin.Forms ContentPage 中,我将工具栏项设置如下。
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconhome.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconpyxus.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconcareloop.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconnotificationbell.png", Priority = 0, Order = ToolbarItemOrder.Primary });
我不认为那里有任何问题,接下来我在主菜单中设置工具栏 activity
ToolbarResource = Resource.Layout.Toolbar;
下面是工具栏布局文件的代码。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@drawable/ab_gradient"
app:contentInsetEnd="80dp"
app:contentInsetStart="80dp"
app:contentInsetStartWithNavigation="80dp" />
然后最后,我的styles.xml在下面..
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<item name="android:actionBarSize">200dp</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
<item name="android:textAllCaps">false</item>
<!--NAV BAR SHADOW-->
<item name="android:elevation">4dp</item>
<item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>
<!--NAV BAR HEIGHT-->
<item name="android:actionBarSize">40dp</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>
</resources>
androidmanifest.xml中的主题如下
@style/Theme.AppCompat.Light.NoActionBar
如果你知道我如何让这些图标一直延伸到左端,我真的需要帮助
因此,在与 XF 社区中的一些人交谈后,我发现这可以通过自定义渲染器来完成,尽管这非常困难,或者我可以创建一个 ContentView 来按照我想要的方式模仿工具栏, 并将其添加到每个页面,然后禁用导航栏。