Question

我正在使用Visual Studio中的跨平台可移植项目模板xamarin表单[xaml]的帮助下制作一个Android应用程序

在设计我的应用程序的主页时，我喜欢像普通的Android应用程序那样设计

https://developer.android.com/training/appbar/index.html

但我使用的是Navbar，在主页中使用的代码就像

    public  Homepage()
    {
        InitializeComponent();
        #region toolbar
        ToolbarItem tbi = null;
        if (Device.OS == TargetPlatform.Android)
        {
            tbi = new ToolbarItem("+", "plus", async () =>
            {
                var target_page = new AddStudent();
                await Navigation.PushModalAsync(target_page);
            }, 0, 0);
        }
        ToolbarItems.Add(tbi);
        #endregion             
            this.Title = "Home Page";

    }

它在右侧显示标题和+图标的导航栏，这有助于我显示另一页

但是如何设计一个页面，就像在左侧发布的一些菜单项和事件的链接以及右侧的一些菜单操作一样。

任何示例或有用的链接？

Answer 1

您听说过AppCompat吗？有关初学者的信息，请参阅this。

据我了解，您希望应用程序能够在iOS和Android上查看，就像使用Android Material Theme一样。

您显然需要为导航栏实施custom renderer。这意味着您必须为您希望在其上使用的每个平台编写导航栏的自定义实现。此外，您还需要从PCL编辑部分内容。

例如，您可以使用此代码摆脱导航栏上的Xamarin默认图标（将其添加到您的Droid项目中）：

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))]
namespace App.Droid
{
    public class CustomNavigationRenderer : NavigationRenderer
    {

        protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);
            RemoveAppIconFromActionBar();
        }

        void RemoveAppIconFromActionBar()
        {
            var actionBar = ((Activity)Context).ActionBar;
            actionBar.SetIcon(new ColorDrawable(Color.Transparent.ToAndroid()));
        }
    }
}

对于PCL中的每个UI对象，每个平台都有一个类比。将XF对象转换为本地对象是Renderers的责任。创建对象时，将调用OnElementChanged。从那里，您可以访问本机API并对PCL中没有的元素进行修改。与调用SetIcon一样（请记住，此代码可能是特定于Android的。在大多数情况下，您可能需要复制和修改渲染器才能在其他平台上运行。）

为了在操作栏的右侧添加按钮，我将使用以下xaml：

<ContentPage.ToolbarItems>
    <ToolbarItem x:Name="btn"
             Text="Mail"
             Icon="btn_icon.png"
             Clicked="BtnClickHandler" />
</ContentPage.ToolbarItems>

简单地用后面的代码备份它，比如处理一个简单的按钮点击：

private void BtnClickHandler(object sender, EventArgs e)
{
    // handling
}

您可以添加其中的几个。

此外，如果您想将上下文菜单添加到工具栏并希望它的行为类似于原生Android，您应该阅读一些关于animation并自己绘制/动画的内容，然后例如，使用AbsoluteLayout来协调它。

Answer 2

对于自定义导航栏，我只想隐藏导航栏并制作我自己的自定义导航栏。你确实失去了一些自己的意识，然后确定了尺寸，但它提供了更大的灵活性。

然后，您可以在BoxView内放置一个彩色Grid，然后在Grid上添加按钮，将它们放在BoxView的顶部。

隐藏导航栏和以下内容到ContentPage的构造函数：

NavigationPage.SetHasNavigationBar(this, false);

*编辑：这很容易做到。就像我说的那样，你会创建一个Grid，添加一个绿色的BoxView，然后在左边添加一个图标，在右边增加3个。

这样的事情：

<Grid VerticalOptions="Start"
      HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <BoxView BackgroundColor="Green"
             Grid.Row="0"
             Grid.Column="0"
             Grid.ColumnSpan="5"/>

    <Image Source="hamburger.png"
           Grid.Row="0"
           Grid.Column="0">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

    <Label Text="Sheets"
           Grid.Row="0"
           Grid.Column="1"/>

    <Image Source="search.png"
           Grid.Row="0"
           Grid.Column="2">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

    <Image Source="folder.png"
           Grid.Row="0"
           Grid.Column="3">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

    <Image Source="settingstack.png"
           Grid.Row="0"
           Grid.Column="4">
        <Image.GestureRecognizer>
            <!-- TODO: Add your gesture stuff -->
        </Image.GestureRecognizer>
    </Image>

</Grid>

在Xamarin表单应用程序中使用菜单创建Navbar

2 个答案: