自定义Window标题栏titleBar

自定义Window标题栏titleBar

    在进行OS X软件开发时,Window自带的标题栏十分简易,往往不能达到我们的需求,如下图:

在实际开发中,我们需要根据项目的需要对标题栏进行自定义。自定义标题栏主要有如下两种思路:

1.去掉系统的标题栏,使用自定义的View来做标题栏。

2.隐藏系统的标题栏,进行标题栏的透明处理。

上面两种思路中第2种要更好一些,我们可以服用系统的功能按钮,即关闭、最小化和最大化按钮。

    首先,现在Window的contentView中添加一个自定义的View,作为标题栏视图,View上可以添加图标或任意自定义的功能按钮。如下:

通过如下代码来设置标题栏:

//将系统的标题栏设置透明    
self.window.titlebarAppearsTransparent = YES;
//将系统标题进行隐藏
self.window.titleVisibility = NSWindowTitleHidden;
//设置可以通过拖拽window背景视图进行窗口的移动
[self.window setMovableByWindowBackground:YES];
//设置window的内容部分充满整个窗口
[self.window setStyleMask:[self.window styleMask] | NSWindowStyleMaskFullSizeContentView];
//获取到windows的主视图    
NSView * themeView = self.window.contentView.superview;
//根据层级结构获取到标题栏视图
NSView * titleView = themeView.subviews[1];
titleView.autoresizesSubviews = YES;
//重新对标题栏视图的尺寸进行布局,使得系统的功能按钮出现在自定义标题中的竖直中间
[titleView mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(@10);
    make.width.equalTo(@70);
    make.top.equalTo(@9);
    make.height.equalTo(@22);
}];

需要注意,上面对标题栏的布局进行了重设,这样是为了让系统的3个功能按钮显示在自定义标题栏的中间,但是当用户使用全屏功能进行全屏与非全屏切换时,系统会对标题栏的尺寸进行重新布局,将功能按钮放回原来的位置,为了避免这样的问题,可以监听用户全屏切换事件,退出全屏时,进行重新布局。

    整体效果如下:

转载于:https://my.oschina.net/u/2340880/blog/993691

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 Electron-Vue 构建应用程序时,可以自定义应用程序窗口的标题栏。以下是一些步骤: 1. 在 `main.js` 文件中,找到 `createWindow` 函数,并将 `frame: false` 改为 `frame: true`。这将启用原生窗口边框。 2. 在 `App.vue` 文件中,添加以下代码: ``` <template> <div class="app"> <div class="titlebar"> <div class="title">{{ title }}</div> <div class="buttons"> <div class="minimize" @click="minimizeWindow"></div> <div class="maximize" @click="toggleMaximize"></div> <div class="close" @click="closeWindow"></div> </div> </div> <router-view/> </div> </template> <script> export default { data() { return { title: 'My App' } }, methods: { minimizeWindow() { this.$store.dispatch('minimizeWindow') }, toggleMaximize() { this.$store.dispatch('toggleMaximize') }, closeWindow() { this.$store.dispatch('closeWindow') } } } </script> <style scoped> .titlebar { -webkit-app-region: drag; height: 30px; background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .title { font-size: 14px; font-weight: bold; } .buttons { display: flex; } .minimize, .maximize, .close { width: 12px; height: 12px; margin-left: 5px; background-repeat: no-repeat; background-position: center; -webkit-app-region: no-drag; } .minimize { background-image: url(./assets/img/minimize.png); } .maximize { background-image: url(./assets/img/maximize.png); } .close { background-image: url(./assets/img/close.png); } </style> ``` 3. 在 `store.js` 文件中,添加以下代码: ``` const state = { window: null, isMaximized: false } const mutations = { SET_WINDOW(state, window) { state.window = window }, SET_IS_MAXIMIZED(state, isMaximized) { state.isMaximized = isMaximized } } const actions = { createWindow({ commit }) { const win = new BrowserWindow({ width: 800, height: 600, show: false, frame: false, webPreferences: { nodeIntegration: true } }) win.on('closed', () => { app.quit() }) commit('SET_WINDOW', win) }, minimizeWindow({ state }) { state.window.minimize() }, toggleMaximize({ state, commit }) { if (state.isMaximized) { state.window.unmaximize() commit('SET_IS_MAXIMIZED', false) } else { state.window.maximize() commit('SET_IS_MAXIMIZED', true) } }, closeWindow({ state }) { state.window.close() } } ``` 4. 在 `index.html` 文件中,添加以下代码: ``` <head> ... <style> .app { -webkit-app-region: no-drag; } </style> </head> ``` 5. 在 `static/img` 文件夹中添加 `minimize.png`、`maximize.png` 和 `close.png` 图片。 现在,您可以自定义标题栏样式并添加标题栏按钮。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值