Xamarin.Forms——"顶部导航栏"文字居中的技巧

标签: xamarin+
541人阅读 评论(0) 收藏 举报
分类:

刚学习forms技术一个月,总觉得在安卓端Navigation他的导航栏不好用,不能够将导航栏文字居中。在git上也看到不少设置导航栏居中的一些自定义控件,但是自己用起来都感觉很困难(每次看到git上大神的代码就感觉好牛逼好牛逼),例如:
https://github.com/Peefy/Xamarin.Forms.BottomTabView在安卓端,有底部导航栏,在上方标题栏还可以文字居中
——github上的截图

太复杂了,完全看不懂啊….
今天突然冒出一个小聪明的想法,就是直接在一个页面顶部设置一个横条遮罩作为顶部导航栏的背景,再在左边设置一个label标签,想给大家分享一下。
首先先上效果图把。
这里写图片描述![这里写图片描述]

设置一个grid遮罩

   <Grid x:Name="TopBar"  BackgroundColor="#2196F3"  >
            <Grid.RowDefinitions>
                <RowDefinition Height="60" />
            </Grid.RowDefinitions>
            <!--* 7* *便于在文字左右两端能够插入新的图片或则文字 -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="7*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="1"  x:Name="TopBarTitle" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="White"  HorizontalOptions="Center" />
        </Grid>

————————————————————————————————
这里写图片描述

如果想在标题栏左侧加上<

<StackLayout Orientation="Vertical" x:Name="Main" >
        <Grid x:Name="TopBar"  BackgroundColor="#2196F3"  >
            <Grid.RowDefinitions>
                <RowDefinition Height="60" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="7*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label  Grid.Row="0" Grid.Column="0"  x:Name="TopBarBack"  Text="&lt;" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="White"  HorizontalOptions="Center"  />
            <Label Grid.Row="0" Grid.Column="1"  x:Name="TopBarTitle"  Text="{Binding Text}" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="White"  HorizontalOptions="Center" />
        </Grid>

再在上面加上手势事件

  var tapGestureRecognizer = new TapGestureRecognizer() { NumberOfTapsRequired = 1 };
            tapGestureRecognizer.Tapped += (s, e) => {
                //  handle the tap
                Navigation.PopModalAsync();
            };
            TopBarBack.GestureRecognizers.Add(tapGestureRecognizer);

这样就可以做到像导航栏一样的功能了,大家都可以修改他的高度,加上图片,或则导航栏背景颜色。

希望哪位大神看见了能够把这个想法做成一个自定义控件,用什么renderer来着,我目前不会用- -
源码:

查看评论

4.Xamarin.Forms中的几种页面

这些是官网上说的可以用的几种页面: 1.MasterDetailPage 代码如下,前面的那段实际没什么用,只是主页用的一个页面。 MasterDetailPage中必须要定义Master和...
  • qq_22033759
  • qq_22033759
  • 2015-10-18 15:30:17
  • 1997

Xamarin安卓开发:去掉Activity的头部标题栏及全屏显示

【原文】http://blog.csdn.net/jonahzheng/article/details/8776552
  • u012234115
  • u012234115
  • 2014-06-29 19:56:47
  • 3836

Xamarin.Forms 用户界面——控件——布局——LayoutOptions

LayoutOptions PDF用于离线使用 下载PDF 示例代码: LayoutOptions 相关API: LayoutOptions 让我们知道你对此的感受 ...
  • pfjgeng
  • pfjgeng
  • 2017-08-14 10:17:33
  • 867

Xamarin.Forms 之 样式Styles

Xamarin.Forms 版本1.3以下是没有样式的。这里的样式其实跟写html中的样式是一个意思。在Xamarin中一般的元素都具有Style这个属性。 以下是样式种类及设置样式的方式: C#...
  • cdf881125
  • cdf881125
  • 2015-08-27 18:14:46
  • 3331

Xamarin.Forms 用户界面——控件——Style——全局样式

全球样式 PDF用于离线使用 下载PDF 示例代码: 基本款式 使用样式 相关文章: XAML标记扩展 相关API: 资源字典 样式 二传手 让我们知道你对此的...
  • pfjgeng
  • pfjgeng
  • 2017-08-28 09:55:41
  • 813

Xamarin.Forms 用户界面——控件——主题——Light Theme

Light Theme PDF用于离线使用 下载PDF 让我们知道你对此的感受 主题要求Xamarin.Forms 2.3预览版。 如果发生错误, 请查看 ...
  • pfjgeng
  • pfjgeng
  • 2017-08-21 09:03:28
  • 590

xamarin android自定义标题栏(自定义属性、回调事件)

自定义控件的有3种方式: 自绘控件:继承View类,所展示的内容在OnDraw方法中绘制出来 组合控件:不需要绘制视图显示的内容,只用系统原生的控件,将几个控件组合起来(这就是这篇文章要写的自定义标题...
  • kebi007
  • kebi007
  • 2017-07-19 21:45:55
  • 3274

xamarin Tablayout+Viewpager+Fragment顶部导航栏

最近几天不忙,所以把项目中的顶部导航栏的实现归集一下。android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单。当然我这个导航栏是基于xam...
  • kebi007
  • kebi007
  • 2017-04-22 19:02:42
  • 3546

xamarin android实现Toolbar+DrawerLayout完美侧滑导航栏

#### 前言 #### 如果你有关注Material Design,会发现国内的一些app也在使用material Design这种设计,我常用的网易有道词典就使用了Material Design...
  • kebi007
  • kebi007
  • 2017-09-05 23:34:44
  • 2230

2.Xamarin.Forms里的文本控制

先是定义Label的位置和颜色,这里是重新声明了一个类继承的ContentPage来作为一个页面:using System; using System.Collections.Generic; usi...
  • qq_22033759
  • qq_22033759
  • 2015-10-14 21:18:28
  • 1508
    个人资料
    等级:
    访问量: 869
    积分: 39
    排名: 191万+
    文章分类
    文章存档