状态栏修改

Signed-off-by: qp <qinping8@huawei.com>
This commit is contained in:
qp 2022-05-23 18:47:27 +08:00
parent 66c8a32b61
commit 099b839bf2
20 changed files with 374 additions and 91 deletions

View File

@ -22,10 +22,10 @@ export default class StyleConfiguration {
const key: string = TAG + "-Common";
return StyleManager.getStyle(key, () => {
return {
statusBarFontSize: '16fp',
statusBarFontSize: $r("app.float.signal_fontSize"),
statusBarIconWidth: '24vp',
statusBarIconHeight: '24vp',
statusBarMarginLeftRight: '5vp',
statusBarMarginLeftRight: $r("app.float.signal_status_margin_Left_right"),
};
});
}

View File

@ -0,0 +1,12 @@
{
"float": [
{
"name": "signal_status_margin_Left_right",
"value": "5vp"
},
{
"name": "signal_fontSize",
"value": "16fp"
}
]
}

View File

@ -0,0 +1,12 @@
{
"float": [
{
"name": "signal_status_margin_Left_right",
"value": "0"
},
{
"name": "signal_fontSize",
"value": "12fp"
}
]
}

View File

@ -23,9 +23,7 @@ import StyleConfiguration from '../common/StyleConfiguration'
import { StatusBarGroupComponentData
} from '../../../../../../screenlock/src/main/ets/com/ohos/common/Constants'
import StatusBarVM from '../../../../../../screenlock/src/main/ets/com/ohos/vM/StatusBarVM'
import deviceInfo from '@ohos.deviceInfo';
const deviceTypeInfo = deviceInfo.deviceType
const TAG = 'BatteryComponent-batteryIcon'
@Component
@ -36,17 +34,11 @@ export default struct BatteryIcon {
@State mStatusBarGroupComponentData: StatusBarGroupComponentData = new StatusBarGroupComponentData()
@State style: any = StyleConfiguration.getBatteryComponentStyle()
@State styleCommon: any = StyleConfigurationCommon.getCommonStyle()
private isPhone: boolean= false
aboutToAppear() {
this.mStatusBarGroupComponentData = StatusBarVM.getStatusBarGroupComponentData(this.mGroupId)
mBatteryModel.initBatteryModel();
Log.showInfo(TAG, 'aboutToAppear');
if (deviceTypeInfo === "phone") {
this.isPhone = true
} else {
this.isPhone = false
}
}
aboutToDisappear() {
@ -55,11 +47,11 @@ export default struct BatteryIcon {
build() {
Row() {
Row().width(this.isPhone ? "2vp" : this.styleCommon.statusBarMarginLeftRight).height('100%')
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
BatterySoc({ mContentColor: this.mStatusBarGroupComponentData.contentColor })
Row().width(this.isPhone ? "2vp" : this.style.componentGap).height('100%')
Row().width(this.style.componentGap).height('100%')
BatteryPic({ mContentColor: this.mStatusBarGroupComponentData.contentColor })
Row().width(this.isPhone ? 0 : this.styleCommon.statusBarMarginLeftRight).height('100%')
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
}
.height('100%')
}

View File

@ -15,9 +15,7 @@
import Log from '../../../../../../../common/src/main/ets/default/Log'
import StyleConfigurationCommon from '../../../../../../../common/src/main/ets/default/StyleConfiguration'
import deviceInfo from '@ohos.deviceInfo';
const deviceTypeInfo = deviceInfo.deviceType
const TAG = 'BatteryComponent-batterySoc'
@Component
@ -25,15 +23,9 @@ export default struct BatterySoc {
@StorageLink('batterySoc') batterySoc: number = 100
@Prop mContentColor: string
@State styleCommon: any = StyleConfigurationCommon.getCommonStyle()
private isPhone: boolean= false
aboutToAppear() {
Log.showInfo(TAG, 'aboutToAppear Start');
if (deviceTypeInfo === "phone") {
this.isPhone = true
} else {
this.isPhone = false
}
}
aboutToDisappear() {
@ -43,7 +35,7 @@ export default struct BatterySoc {
build() {
Text(this.batterySoc + '%')
.fontColor(this.mContentColor)
.fontSize(this.isPhone ? '12fp' : this.styleCommon.statusBarFontSize)
.fontWeight(this.isPhone ? FontWeight.Medium : FontWeight.Normal)
.fontSize(this.styleCommon.statusBarFontSize)
.fontWeight(FontWeight.Medium)
}
}

View File

@ -1,9 +1,5 @@
{
"float": [
{
"name": "battery_component_gap",
"value": "8.5vp"
},
{
"name": "battery_component_pic_gap",
"value": "2vp"
@ -39,6 +35,10 @@
{
"name": "battery_component_pic_head_height",
"value": "10vp"
},
{
"name": "battery_component_gap",
"value": "8.5vp"
}
]
}

View File

@ -1,9 +1,5 @@
{
"float": [
{
"name": "battery_component_gap",
"value": "0vp"
},
{
"name": "battery_component_pic_gap",
"value": "1.2vp"
@ -39,6 +35,10 @@
{
"name": "battery_component_pic_head_height",
"value": "5.75vp"
},
{
"name": "battery_component_gap",
"value": "2vp"
}
]
}

View File

@ -16,13 +16,13 @@
import Log from '../../../../../../../common/src/main/ets/default/Log'
import StyleConfiguration from '../common/styleconfiguration'
import StyleConfigurationCommon from '../../../../../../../common/src/main/ets/default/StyleConfiguration'
import {StatusBarGroupComponentData} from '../../../../../../screenlock/src/main/ets/com/ohos/common/Constants'
import { StatusBarGroupComponentData } from '../../../../../../screenlock/src/main/ets/com/ohos/common/Constants'
import StatusBarVM from '../../../../../../screenlock/src/main/ets/com/ohos/vm/StatusBarVM'
import TimeManager, {
TimeEventArgs,
TIME_CHANGE_EVENT,
} from '../../../../../../../common/src/main/ets/default/TimeManager'
import EventManager, {unsubscribe} from '../../../../../../../common/src/main/ets/default/event/EventManager'
import EventManager, { unsubscribe } from '../../../../../../../common/src/main/ets/default/event/EventManager'
const TAG = 'ClockComponent-clockIcon';
@ -57,6 +57,8 @@ export default struct ClockIcon {
.fontColor(this.mStatusBarGroupComponentData.contentColor)
.fontSize(this.styleCommon.statusBarFontSize)
.width(this.style.statusBarClockMaxWidth)
.fontWeight(FontWeight.Medium)
.margin({ left: $r("app.float.status_bar_clock_margin") })
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
}
}

View File

@ -3,6 +3,10 @@
{
"name": "status_bar_clock_width",
"value": "60vp"
},
{
"name": "status_bar_clock_margin",
"value": "0"
}
]
}

View File

@ -0,0 +1,8 @@
{
"float": [
{
"name": "status_bar_clock_margin",
"value": "2vp"
}
]
}

View File

@ -27,14 +27,14 @@ const TAG = 'ScreenLock-StatusBar'
@Component
export default struct statusBar {
private isPhone: boolean= false
private isShow: boolean
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear`)
if (deviceTypeInfo === "phone") {
this.isPhone = true
this.isShow = false
} else {
this.isPhone = false
this.isShow = true
}
}
@ -47,19 +47,20 @@ export default struct statusBar {
.height(Constants.FULL_CONTAINER_HEIGHT)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.End }) {
if (this.isPhone) {
BatteryIcon()
} else {
BatteryIcon()
BatteryIcon()
if (this.isShow) {
ClockIcon()
}
}.width(Constants.HALF_CONTAINER_WIDTH)
.height(Constants.FULL_CONTAINER_HEIGHT)
}
.width(Constants.FULL_CONTAINER_WIDTH)
.height(this.isPhone ? '24vp' : Constants.FULL_CONTAINER_HEIGHT)
.padding({ left: this.isPhone ? '24vp' : 0, right: this.isPhone ? '24vp' : 0 })
.margin({ top: this.isPhone ? '4vp' : 0 })
.opacity(this.isPhone ? 0.7 : 1)
.height($r("app.float.status_bar_height"))
.padding({
left: $r("app.float.status_bar_padding_left_right"),
right: $r("app.float.status_bar_padding_left_right")
})
.margin({ top: $r("app.float.status_bar_margin_top") })
.opacity($r("app.float.status_bar_opacity"))
}
}

View File

@ -179,6 +179,22 @@
{
"name": "custompsd_key_area_margin_bottom",
"value": "64"
},
{
"name": "status_bar_height",
"value": "48vp"
},
{
"name": "status_bar_padding_left_right",
"value": "0"
},
{
"name": "status_bar_margin_top",
"value": "0"
},
{
"name": "status_bar_opacity",
"value": "1"
}
]
}

View File

@ -0,0 +1,21 @@
{
"float": [
{
"name": "status_bar_height",
"value": "24vp"
},
{
"name": "status_bar_padding_left_right",
"value": "24vp"
},
{
"name": "status_bar_margin_top",
"value": "4vp"
},
{
"name": "status_bar_opacity",
"value": "0.7"
}
]
}

View File

@ -21,9 +21,7 @@ import StyleConfiguration from '../common/StyleConfiguration'
import { StatusBarGroupComponentData
} from '../../../../../../screenlock/src/main/ets/com/ohos/common/Constants'
import StatusBarVM from '../../../../../../screenlock/src/main/ets/com/ohos/vm/StatusBarVM'
import deviceInfo from '@ohos.deviceInfo';
const deviceTypeInfo = deviceInfo.deviceType
const TAG = 'SignalComponent-SignalIcon'
@Component
@ -36,7 +34,6 @@ export default struct SignalIcon {
@State mStatusBarGroupComponentData: StatusBarGroupComponentData = new StatusBarGroupComponentData()
@State styleCommon: any = StyleConfigurationCommon.getCommonStyle()
@State style: any = StyleConfiguration.getSignalComponentStyle()
private isPhone: boolean= false
aboutToAppear() {
Log.showInfo(TAG, 'aboutToAppear');
@ -45,11 +42,6 @@ export default struct SignalIcon {
mSignalModel.initSignalModel();
this.signalObserved = true;
}
if (deviceTypeInfo === "phone") {
this.isPhone = true
} else {
this.isPhone = false
}
}
aboutToDisappear() {
@ -58,17 +50,17 @@ export default struct SignalIcon {
build() {
Row() {
Row().width(this.isPhone ? 0 : this.styleCommon.statusBarMarginLeftRight).height('100%')
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
Text(this.updateNetworkState(this.networkState))
.fontSize(this.isPhone ? '12fp' : this.styleCommon.statusBarFontSize)
.fontWeight(this.isPhone ? FontWeight.Medium : FontWeight.Normal)
.fontColor(this.isPhone ? "#FFFFFF" : this.mStatusBarGroupComponentData.contentColor)
.fontSize(this.styleCommon.statusBarFontSize)
.fontWeight(FontWeight.Medium)
.fontColor(this.mStatusBarGroupComponentData.contentColor)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.constraintSize({ maxWidth: this.style.signalTextMaxWeight })
.flexShrink(0)
.maxLines(1)
.textAlign(TextAlign.Center)
Row().width(this.isPhone ? 0 : this.styleCommon.statusBarMarginLeftRight).height('100%')
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
Stack({ alignContent: Alignment.TopStart }) {
Text(this.updateCellularType(this.cellularType))
@ -76,8 +68,8 @@ export default struct SignalIcon {
.fontColor(this.mStatusBarGroupComponentData.contentColor)
.width(this.style.netSignalTextMaxWidth)
.fontWeight(FontWeight.Bold)
.textAlign(this.isPhone ? TextAlign.Start : TextAlign.Center)
.margin({ left: this.isPhone ? "3vp" : 0 })
.textAlign(TextAlign.Start)
.margin({ left: $r("app.float.signal_margin") })
Image(this.updateCellularImage(this.cellularLevel))
.objectFit(ImageFit.Contain)
.width(this.style.cellularImageWidth)
@ -85,17 +77,16 @@ export default struct SignalIcon {
.fillColor(this.mStatusBarGroupComponentData.contentColor)
}.flexShrink(1)
Row().width(this.isPhone ? 0 : this.styleCommon.statusBarMarginLeftRight).height('100%')
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
}
.height('100%')
}
/**
* Get the string of cellular type
*
* @param {number} type - number of cellular type
* @return {string} typeString type of cellular type
*/
/*
* Get the string of cellular type
*
* @param {number} type - number of cellular type
* @return {string} typeString type of cellular type
*/
private updateCellularType(signalType): string {
Log.showInfo(TAG, `updateCellularType, signalType: ${signalType}`);
let typeString;
@ -122,12 +113,12 @@ export default struct SignalIcon {
return typeString;
}
/**
* Get the cellular signal image
*
* @param {number} level - signal level from signalModel
* @return {string} cellularImage image of cellular signal
*/
/*
* Get the cellular signal image
*
* @param {number} level - signal level from signalModel
* @return {string} cellularImage image of cellular signal
*/
private updateCellularImage(level) {
Log.showInfo(TAG, `updateCellularImage, level: ${level}`);
let cellularImage;
@ -159,12 +150,12 @@ export default struct SignalIcon {
return cellularImage;
}
/**
* Get the NetworkState signal name
*
* @param {string} netWorkState - network state from signal model
* @return {string} vendor's name or signal state
*/
/*
* Get the NetworkState signal name
*
* @param {string} netWorkState - network state from signal model
* @return {string} vendor's name or signal state
*/
private updateNetworkState(netWorkState) {
Log.showInfo(TAG, `updateNetworkState, netWorkState: ${netWorkState}`);
let networkStateName;

View File

@ -23,6 +23,10 @@
{
"name":"status_bar_signal_net_signal_text_max_width",
"value":"18vp"
},
{
"name": "signal_margin",
"value": "0"
}
]
}

View File

@ -23,6 +23,10 @@
{
"name": "status_bar_signal_net_signal_text_max_width",
"value": "15vp"
},
{
"name": "signal_margin",
"value": "3vp"
}
]
}

View File

@ -21,9 +21,7 @@ import StyleConfiguration from '../common/StyleConfiguration'
import { StatusBarGroupComponentData
} from '../../../../../../screenlock/src/main/ets/com/ohos/common/Constants'
import StatusBarVM from '../../../../../../screenlock/src/main/ets/com/ohos/vM/StatusBarVM'
import deviceInfo from '@ohos.deviceInfo';
const deviceTypeInfo = deviceInfo.deviceType
const TAG = 'WifiComponent-WifiIcon'
@Component
@ -34,17 +32,11 @@ export default struct WifiIcon {
@State mStatusBarGroupComponentData: StatusBarGroupComponentData = new StatusBarGroupComponentData()
@State styleCommon: any = StyleConfigurationCommon.getCommonStyle()
@State style: any = StyleConfiguration.getStartsBarWifiComponentStyle()
private isPhone: boolean= false
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear`)
this.mStatusBarGroupComponentData = StatusBarVM.getStatusBarGroupComponentData(this.mGroupId)
mWifiModel.initWifiModel()
if (deviceTypeInfo === "phone") {
this.isPhone = true
} else {
this.isPhone = false
}
}
aboutToDisappear() {
@ -54,13 +46,13 @@ export default struct WifiIcon {
build() {
Row() {
if (this.wifiStatus) {
Row().width(this.isPhone ? 0 : this.styleCommon.statusBarMarginLeftRight).height('100%')
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
Image(this.getImage(this.wifiInfo))
.objectFit(ImageFit.Contain)
.width(this.style.statusBarWifiWidth)
.height(this.style.statusBarWifiHeight)
.fillColor(this.mStatusBarGroupComponentData.contentColor)
Row().width(this.isPhone ? 0 : this.styleCommon.statusBarMarginLeftRight).height('100%')
Row().width(this.styleCommon.statusBarMarginLeftRight).height('100%')
}
}
.height('100%')

View File

@ -3,7 +3,8 @@
{
"name": "status_bar_wifi_width",
"value": "24vp"
},{
},
{
"name": "status_bar_wifi_height",
"value": "24vp"
}

View File

@ -1,6 +1,5 @@
{
"float": [
{
"name": "lockicon_area_height",
"value": "44"
@ -56,6 +55,122 @@
{
"name": "status_bar_height",
"value": "48vp"
},
{
"name": "status_bar_padding_left_right",
"value": "0"
},
{
"name": "status_bar_margin_top",
"value": "0"
},
{
"name": "status_bar_opacity",
"value": "1"
},
{
"name": "signal_status_margin_Left_right",
"value": "5vp"
},
{
"name": "signal_fontSize",
"value": "16fp"
},
{
"name": "signal_margin",
"value": "0"
},
{
"name": "status_bar_signal_type_font_size",
"value": "10fp"
},
{
"name": "status_bar_signal_unknown_font_size",
"value": "14fp"
},
{
"name": "signal_component_icon_width",
"value": "32vp"
},
{
"name": "signal_component_icon_height",
"value": "24vp"
},
{
"name": "signal_text_max_width",
"value": "113vp"
},
{
"name": "status_bar_signal_net_signal_text_max_width",
"value": "18vp"
},
{
"name": "status_bar_wifi_width",
"value": "24vp"
},
{
"name": "status_bar_wifi_height",
"value": "24vp"
},
{
"name": "wifi_margin_left_right",
"value": "5vp"
},
{
"name": "battery_margin_left_right_o",
"value": "5vp"
},
{
"name": "battery_component_gap",
"value": "8.5vp"
},
{
"name": "battery_margin_left_right_t",
"value": "5vp"
},
{
"name": "battery_fontSize",
"value": "16fp"
},
{
"name": "battery_component_pic_gap",
"value": "2vp"
},
{
"name": "battery_component_pic_body_height",
"value": "19vp"
},
{
"name": "battery_component_pic_body_width",
"value": "34.5vp"
},
{
"name": "battery_component_pic_body_padding",
"value": "2vp"
},
{
"name": "battery_component_pic_body_border_width",
"value": "1vp"
},
{
"name": "battery_component_pic_border_radius",
"value": "2vp"
},
{
"name": "battery_component_pic_head_radius",
"value": "2vp"
},
{
"name": "battery_component_pic_head_width",
"value": "3vp"
},
{
"name": "battery_component_pic_head_height",
"value": "10vp"
},
{
"name": "status_bar_clock_margin",
"value": "0"
}
]
}

View File

@ -3,6 +3,122 @@
{
"name": "status_bar_height",
"value": "24vp"
},
{
"name": "status_bar_padding_left_right",
"value": "24vp"
},
{
"name": "status_bar_margin_top",
"value": "4vp"
},
{
"name": "status_bar_opacity",
"value": "0.7"
},
{
"name": "signal_status_margin_Left_right",
"value": "0"
},
{
"name": "signal_fontSize",
"value": "12fp"
},
{
"name": "signal_margin",
"value": "3vp"
},
{
"name": "status_bar_signal_type_font_size",
"value": "5.5fp"
},
{
"name": "status_bar_signal_unknown_font_size",
"value": "7fp"
},
{
"name": "signal_component_icon_width",
"value": "21.5vp"
},
{
"name": "signal_component_icon_height",
"value": "15vp"
},
{
"name": "signal_text_max_width",
"value": "113vp"
},
{
"name": "status_bar_signal_net_signal_text_max_width",
"value": "15vp"
},
{
"name": "status_bar_wifi_width",
"value": "15.75vp"
},
{
"name": "status_bar_wifi_height",
"value": "15vp"
},
{
"name": "wifi_margin_left_right",
"value": "0"
},
{
"name": "battery_margin_left_right_o",
"value": "2vp"
},
{
"name": "battery_component_gap",
"value": "2vp"
},
{
"name": "battery_margin_left_right_t",
"value": "0"
},
{
"name": "battery_fontSize",
"value": "12fp"
},
{
"name": "battery_component_pic_gap",
"value": "1.2vp"
},
{
"name": "battery_component_pic_body_height",
"value": "11vp"
},
{
"name": "battery_component_pic_body_width",
"value": "18.5vp"
},
{
"name": "battery_component_pic_body_padding",
"value": "1vp"
},
{
"name": "battery_component_pic_body_border_width",
"value": "1vp"
},
{
"name": "battery_component_pic_border_radius",
"value": "2.5vp"
},
{
"name": "battery_component_pic_head_radius",
"value": "3vp"
},
{
"name": "battery_component_pic_head_width",
"value": "1.5vp"
},
{
"name": "battery_component_pic_head_height",
"value": "5.75vp"
},
{
"name": "status_bar_clock_margin",
"value": "2vp"
}
]
}