Android 开发:(十四)NavigationBar篇-自定义顶部导航栏

本文详细介绍了如何在Android应用中自定义顶部导航栏,包括新建NavigationBar布局文件,设置NoActionBar主题,布局设计,以及封装公共方法进行标题、图片等元素的赋值和事件处理。通过这些步骤,开发者可以灵活地定制导航栏满足各种需求。
摘要由CSDN通过智能技术生成

本篇记录了navigation bar顶部导航栏的自定义方法,抛砖引玉,简单实现了常用的布局,在此基础上可添加较复杂的布局。

第一步:新建NavigationBar文件,继承与FrameLayout。

创建文件

第二步:设置系统AppTheme为NoActionBar

在res/values目录下style.xml文件:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
第三步: navigationbar.xml 布局

在navigationbar.xml文件中布局:

1. 在app.json中设置navigationBar样式和背景色 ``` { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "自定义导航栏", } ``` 2. 在需要自定义navigationBar的页面的json文件中设置navigationBar样式和背景色 ``` { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "自定义导航栏", "enablePullDownRefresh": true } ``` 3. 在需要自定义navigationBar的页面的wxml文件中添加导航栏 ``` <view class="nav-bar"> <view class="nav-bar-left"> <image class="nav-bar-back" src="/images/back.png"></image> </view> <view class="nav-bar-middle"> <text class="nav-bar-title">自定义导航栏</text> </view> <view class="nav-bar-right"> <image class="nav-bar-share" src="/images/share.png"></image> </view> </view> ``` 4. 在需要自定义navigationBar的页面的wxss文件中设置导航栏样式和位置 ``` .nav-bar { display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; height: 48rpx; background-color: #ffffff; z-index: 100; } .nav-bar-left { display: flex; align-items: center; margin-left: 16rpx; } .nav-bar-middle { display: flex; align-items: center; } .nav-bar-right { display: flex; align-items: center; margin-right: 16rpx; } .nav-bar-title { font-size: 18rpx; font-weight: bold; } .nav-bar-back { width: 24rpx; height: 24rpx; } .nav-bar-share { width: 24rpx; height: 24rpx; } ``` 5. 在需要自定义navigationBar的页面的js文件中添加返回和分享功能 ``` Page({ onBack: function () { wx.navigateBack({ delta: 1 }) }, onShare: function () { wx.showShareMenu({ withShareTicket: true }) } }) ``` 6. 在需要自定义navigationBar的页面的wxml文件中绑定返回和分享功能 ``` <view class="nav-bar"> <view class="nav-bar-left" bindtap="onBack"> <image class="nav-bar-back" src="/images/back.png"></image> </view> <view class="nav-bar-middle"> <text class="nav-bar-title">自定义导航栏</text> </view> <view class="nav-bar-right" bindtap="onShare"> <image class="nav-bar-share" src="/images/share.png"></image> </view> </view> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值