基于Dragonboard 410c的智能魔镜设计(8) |
您所在的位置:网站首页 › 魔镜ui › 基于Dragonboard 410c的智能魔镜设计(8) |
在上一篇文章中,已经跟大家介绍如何智能魔镜的UI原型设计,并且采用designer.exe工具完成了原始的魔镜UI界面设计,可以看出,整个魔镜的UI设计非常简单,但是如果要实心较好的效果,我们单独使用designer.exe工具很难完成,这就需要我们在完成原型设计后得到的xml文件进行进一步的修改和细化,以达到我们的设计要求。 这里,大家可以直接修改designer.exe文件的xml的元素的属性等来调节和细化UI,同时也可以使用pyuic5工具将其转换成py脚本,然后对其进行修改,本文在设计中,直接使用pyuic5工具将其进行了转换,然后进行修改,最终得到的UI代码如下: # -*- coding: utf-8 -*- from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName(“MainWindow”) desktopRect=QtWidgets.QDesktopWidget().screenGeometry() MainWindow.resize(desktopRect.width(), desktopRect.height()) icon = QtGui.QIcon() icon.addPixmap(QtGui.QPixmap(“:/images/icon”), QtGui.QIcon.Normal, QtGui.QIcon.Off) MainWindow.setWindowIcon(icon) self.centralWidget = QtWidgets.QWidget(MainWindow) self.centralWidget.setObjectName(“centralWidget”) self.centralWidget.resize(357, 1059) self.temp = QtWidgets.QLabel(self.centralWidget) self.centralWidget.setGeometry(desktopRect.width()-self.centralWidget.width(),0,self.centralWidget.width(),self.centralWidget.height()) self.temp.setGeometry(QtCore.QRect(20, 60, 231, 100)) font = QtGui.QFont() font.setFamily(“楷体”) font.setPointSize(40) font.setBold(False) font.setWeight(50) self.temp.setFont(font) self.temp.setText(“”) self.temp.setAlignment(QtCore.Qt.AlignCenter) self.temp.setObjectName(“temp”) self.city = QtWidgets.QLabel(self.centralWidget) self.city.setGeometry(QtCore.QRect(50, 160, 150, 30)) font = QtGui.QFont() font.setPointSize(13) font.setBold(True) font.setWeight(75) self.city.setFont(font) self.city.setText(“”) self.city.setAlignment(QtCore.Qt.AlignCenter) self.city.setObjectName(“city”) self.date = QtWidgets.QLabel(self.centralWidget) self.date.setGeometry(QtCore.QRect(30, 245, 211, 25)) font = QtGui.QFont() font.setPointSize(10) font.setBold(True) font.setWeight(75) self.date.setFont(font) self.date.setText(“”) self.date.setAlignment(QtCore.Qt.AlignCenter) self.date.setObjectName(“date”) self.closeButton = QtWidgets.QPushButton(self.centralWidget) self.closeButton.setGeometry(QtCore.QRect(240, 5, 25, 25)) self.closeButton.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor)) self.closeButton.setText(“”) self.closeButton.setFlat(True) self.closeButton.setObjectName(“closeButton”) #self.layoutWidget = QtWidgets.QWidget(self.centralWidget) self.layoutWidget = QtWidgets.QWidget(MainWindow) self.layoutWidget.setGeometry(QtCore.QRect(0, desktopRect.height()-170, desktopRect.width(), 170)) self.layoutWidget.setObjectName(“layoutWidget”) self.horizontalLayout = QtWidgets.QHBoxLayout(self.layoutWidget) self.horizontalLayout.setContentsMargins(11, 11, 11, 11) self.horizontalLayout.setSpacing(6) self.horizontalLayout.setObjectName(“horizontalLayout”) self.gridLayout = QtWidgets.QGridLayout() self.gridLayout.setContentsMargins(11, 11, 11, 11) self.gridLayout.setSpacing(8) self.gridLayout.setObjectName(“gridLayout”) self.forecast_0_date = QtWidgets.QLabel(self.layoutWidget) self.forecast_0_date.setMinimumSize(QtCore.QSize(80, 20)) self.forecast_0_date.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_0_date.setFont(font) self.forecast_0_date.setText(“”) self.forecast_0_date.setAlignment(QtCore.Qt.AlignCenter) self.forecast_0_date.setObjectName(“forecast_0_date”) self.gridLayout.addWidget(self.forecast_0_date, 0, 0, 1, 1) self.forecast_0_type = QtWidgets.QLabel(self.layoutWidget) self.forecast_0_type.setMinimumSize(QtCore.QSize(78, 75)) self.forecast_0_type.setText(“”) self.forecast_0_type.setScaledContents(True) self.forecast_0_type.setObjectName(“forecast_0_type”) self.gridLayout.addWidget(self.forecast_0_type, 1, 0, 1, 1) self.forecast_0_temp = QtWidgets.QLabel(self.layoutWidget) self.forecast_0_temp.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_0_temp.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_0_temp.setFont(font) self.forecast_0_temp.setText(“”) self.forecast_0_temp.setAlignment(QtCore.Qt.AlignCenter) self.forecast_0_temp.setObjectName(“forecast_0_temp”) self.gridLayout.addWidget(self.forecast_0_temp, 2, 0, 1, 1) self.horizontalLayout.addLayout(self.gridLayout) self.gridLayout_2 = QtWidgets.QGridLayout() self.gridLayout_2.setContentsMargins(11, 11, 11, 11) self.gridLayout_2.setSpacing(8) self.gridLayout_2.setObjectName(“gridLayout_2”) self.forecast_1_date = QtWidgets.QLabel(self.layoutWidget) self.forecast_1_date.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_1_date.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_1_date.setFont(font) self.forecast_1_date.setText(“”) self.forecast_1_date.setAlignment(QtCore.Qt.AlignCenter) self.forecast_1_date.setObjectName(“forecast_1_date”) self.gridLayout_2.addWidget(self.forecast_1_date, 0, 0, 1, 1) self.forecast_1_type = QtWidgets.QLabel(self.layoutWidget) self.forecast_1_type.setMinimumSize(QtCore.QSize(78, 75)) self.forecast_1_type.setText(“”) self.forecast_1_type.setScaledContents(True) self.forecast_1_type.setObjectName(“forecast_1_type”) self.gridLayout_2.addWidget(self.forecast_1_type, 1, 0, 1, 1) self.forecast_1_temp = QtWidgets.QLabel(self.layoutWidget) self.forecast_1_temp.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_1_temp.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_1_temp.setFont(font) self.forecast_1_temp.setText(“”) self.forecast_1_temp.setAlignment(QtCore.Qt.AlignCenter) self.forecast_1_temp.setObjectName(“forecast_1_temp”) self.gridLayout_2.addWidget(self.forecast_1_temp, 2, 0, 1, 1) self.horizontalLayout.addLayout(self.gridLayout_2) self.gridLayout_3 = QtWidgets.QGridLayout() self.gridLayout_3.setContentsMargins(11, 11, 11, 11) self.gridLayout_3.setSpacing(6) self.gridLayout_3.setObjectName(“gridLayout_3”) self.forecast_2_date = QtWidgets.QLabel(self.layoutWidget) self.forecast_2_date.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_2_date.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_2_date.setFont(font) self.forecast_2_date.setText(“”) self.forecast_2_date.setAlignment(QtCore.Qt.AlignCenter) self.forecast_2_date.setObjectName(“forecast_2_date”) self.gridLayout_3.addWidget(self.forecast_2_date, 0, 0, 1, 1) self.forecast_2_type = QtWidgets.QLabel(self.layoutWidget) self.forecast_2_type.setMinimumSize(QtCore.QSize(78, 75)) self.forecast_2_type.setText(“”) self.forecast_2_type.setScaledContents(True) self.forecast_2_type.setObjectName(“forecast_2_type”) self.gridLayout_3.addWidget(self.forecast_2_type, 1, 0, 1, 1) self.forecast_2_temp = QtWidgets.QLabel(self.layoutWidget) self.forecast_2_temp.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_2_temp.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_2_temp.setFont(font) self.forecast_2_temp.setText(“”) self.forecast_2_temp.setAlignment(QtCore.Qt.AlignCenter) self.forecast_2_temp.setObjectName(“forecast_2_temp”) self.gridLayout_3.addWidget(self.forecast_2_temp, 2, 0, 1, 1) self.horizontalLayout.addLayout(self.gridLayout_3) self.gridLayout_4 = QtWidgets.QGridLayout() self.gridLayout_4.setContentsMargins(11, 11, 11, 11) self.gridLayout_4.setSpacing(6) self.gridLayout_4.setObjectName(“gridLayout_4”) self.forecast_3_date = QtWidgets.QLabel(self.layoutWidget) self.forecast_3_date.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_3_date.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_3_date.setFont(font) self.forecast_3_date.setText(“”) self.forecast_3_date.setAlignment(QtCore.Qt.AlignCenter) self.forecast_3_date.setObjectName(“forecast_3_date”) self.gridLayout_4.addWidget(self.forecast_3_date, 0, 0, 1, 1) self.forecast_3_type = QtWidgets.QLabel(self.layoutWidget) self.forecast_3_type.setMinimumSize(QtCore.QSize(78, 75)) self.forecast_3_type.setText(“”) self.forecast_3_type.setScaledContents(True) self.forecast_3_type.setObjectName(“forecast_3_type”) self.gridLayout_4.addWidget(self.forecast_3_type, 1, 0, 1, 1) self.forecast_3_temp = QtWidgets.QLabel(self.layoutWidget) self.forecast_3_temp.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_3_temp.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_3_temp.setFont(font) self.forecast_3_temp.setText(“”) self.forecast_3_temp.setAlignment(QtCore.Qt.AlignCenter) self.forecast_3_temp.setObjectName(“forecast_3_temp”) self.gridLayout_4.addWidget(self.forecast_3_temp, 2, 0, 1, 1) self.horizontalLayout.addLayout(self.gridLayout_4) self.gridLayout_5 = QtWidgets.QGridLayout() self.gridLayout_5.setContentsMargins(11, 11, 11, 11) self.gridLayout_5.setSpacing(6) self.gridLayout_5.setObjectName(“gridLayout_5”) self.forecast_4_date = QtWidgets.QLabel(self.layoutWidget) self.forecast_4_date.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_4_date.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_4_date.setFont(font) self.forecast_4_date.setText(“”) self.forecast_4_date.setAlignment(QtCore.Qt.AlignCenter) self.forecast_4_date.setObjectName(“forecast_4_date”) self.gridLayout_5.addWidget(self.forecast_4_date, 0, 0, 1, 1) self.forecast_4_temp = QtWidgets.QLabel(self.layoutWidget) self.forecast_4_temp.setMinimumSize(QtCore.QSize(75, 20)) self.forecast_4_temp.setMaximumSize(QtCore.QSize(200, 40)) font = QtGui.QFont() font.setFamily(“微软雅黑”) font.setPointSize(8) self.forecast_4_temp.setFont(font) self.forecast_4_temp.setText(“”) self.forecast_4_temp.setAlignment(QtCore.Qt.AlignCenter) self.forecast_4_temp.setObjectName(“forecast_4_temp”) self.gridLayout_5.addWidget(self.forecast_4_temp, 2, 0, 1, 1) self.forecast_4_type = QtWidgets.QLabel(self.layoutWidget) self.forecast_4_type.setMinimumSize(QtCore.QSize(78, 75)) self.forecast_4_type.setText(“”) self.forecast_4_type.setScaledContents(True) self.forecast_4_type.setObjectName(“forecast_4_type”) self.gridLayout_5.addWidget(self.forecast_4_type, 1, 0, 1, 1) self.horizontalLayout.addLayout(self.gridLayout_5) self.layoutWidget1 = QtWidgets.QWidget(self.centralWidget) self.layoutWidget1.setGeometry(QtCore.QRect(10, 200, 120, 55)) self.layoutWidget1.setObjectName(“layoutWidget1”) self.gridLayout_7 = QtWidgets.QGridLayout(self.layoutWidget1) self.gridLayout_7.setContentsMargins(11, 11, 11, 11) self.gridLayout_7.setSpacing(6) self.gridLayout_7.setObjectName(“gridLayout_7”) self.label_3 = QtWidgets.QLabel(self.layoutWidget1) self.label_3.setMinimumSize(QtCore.QSize(30, 30)) self.label_3.setMaximumSize(QtCore.QSize(60, 30)) font = QtGui.QFont() font.setPointSize(9) font.setBold(True) font.setWeight(75) self.label_3.setFont(font) self.label_3.setText(“”) self.label_3.setScaledContents(True) self.label_3.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter) self.label_3.setObjectName(“label_3”) self.gridLayout_7.addWidget(self.label_3, 0, 0, 1, 1) self.shidu = QtWidgets.QLabel(self.layoutWidget1) #self.shidu.setFont(font) self.shidu.setMinimumSize(QtCore.QSize(30, 30)) self.shidu.setMaximumSize(QtCore.QSize(60, 30)) font = QtGui.QFont() font.setPointSize(9) font.setBold(False) font.setWeight(50) self.shidu.setFont(font) self.shidu.setText(“”) self.shidu.setAlignment(QtCore.Qt.AlignLeading|QtCore.Qt.AlignLeft|QtCore.Qt.AlignVCenter) self.shidu.setObjectName(“shidu”) self.gridLayout_7.addWidget(self.shidu, 0, 1, 1, 1) self.layoutWidget2 = QtWidgets.QWidget(self.centralWidget) self.layoutWidget2.setGeometry(QtCore.QRect(110, 200, 200, 55)) self.layoutWidget2.setObjectName(“layoutWidget2”) self.gridLayout_8 = QtWidgets.QGridLayout(self.layoutWidget2) self.gridLayout_8.setContentsMargins(11, 11, 11, 11) self.gridLayout_8.setSpacing(6) self.gridLayout_8.setObjectName(“gridLayout_8”) self.fengxiang = QtWidgets.QLabel(self.layoutWidget2) self.fengxiang.setMinimumSize(QtCore.QSize(70, 30)) self.fengxiang.setMaximumSize(QtCore.QSize(70, 30)) font = QtGui.QFont() font.setPointSize(9) font.setBold(True) font.setWeight(75) self.fengxiang.setFont(font) self.fengxiang.setText(“”) self.fengxiang.setScaledContents(True) self.fengxiang.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter) self.fengxiang.setObjectName(“fengxiang”) self.gridLayout_8.addWidget(self.fengxiang, 0, 0, 1, 1) self.fengli = QtWidgets.QLabel(self.layoutWidget2) self.fengli.setMinimumSize(QtCore.QSize(80, 30)) self.fengli.setMaximumSize(QtCore.QSize(80, 30)) font = QtGui.QFont() font.setPointSize(9) font.setBold(False) font.setWeight(50) self.fengli.setFont(font) self.fengli.setText(“”) self.fengli.setObjectName(“fengli”) self.gridLayout_8.addWidget(self.fengli, 0, 1, 1, 1) self.webMessageText = QtWebKitWidgets.QWebView(self.centralWidget) self.webMessageText.setGeometry(QtCore.QRect(10, 460, 331, 241)) self.webMessageText.setUrl(QtCore.QUrl(“about:blank”)) self.webMessageText.setObjectName(“webMessageText”) self.webMemorandum = QtWebKitWidgets.QWebView(MainWindow) self.webMemorandum.setGeometry(QtCore.QRect(10, 30, 331, 180)) self.webMemorandum.setUrl(QtCore.QUrl(“about:blank”)) self.webMemorandum.setObjectName(“webMemorandum”) font = QtGui.QFont() font.setPointSize(8) font.setBold(False) font.setWeight(50) self.helloWelcome = QtWidgets.QLabel(self.centralWidget) self.helloWelcome.setGeometry(QtCore.QRect(20, 10, 251, 31)) self.helloWelcome.setFont(font) self.helloWelcome.setText(“”) self.helloWelcome.setObjectName(“helloWelcome”) self.webZhishu = QtWebKitWidgets.QWebView(self.centralWidget) self.webZhishu.setGeometry(QtCore.QRect(10, 290, 301, 150)) self.webZhishu.setUrl(QtCore.QUrl(“about:blank”)) self.webZhishu.setObjectName(“webZhishu”) #MainWindow.setCentralWidget(self.centralWidget) self.retranslateUi(MainWindow) self.closeButton.clicked.connect(MainWindow.close) QtCore.QMetaObject.connectSlotsByName(MainWindow) def retranslateUi(self, MainWindow): _translate = QtCore.QCoreApplication.translate MainWindow.setWindowTitle(_translate(“MainWindow”, “Weather”)) self.closeButton.setToolTip(_translate(“MainWindow”, “关闭”)) from PyQt5 import QtWebKitWidgets #import res_rc 在这里进行的主要修改涉及两个方面,一个方面是字体的调整,还有一个就是自适应的调整,因为设计的过程中是按照横屏模式来进行设计的,而运行的过程中,会通过指令将系统调整成竖屏模式,因此就需要对其进行相关的调整,最终避免横竖屏切换的过程中的字体变化过大,影响界面美观。 以上就是整个智能魔镜的UI设计,利用这个UI文件我们在智能魔镜系统中可以方便的通过import该类来完成UI的生成,实现智能魔镜的UI交互功能。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |