基于dragonboard 410c的智能魔镜设计（8）——UI的python脚本实现

      在http://blog.youkuaiyun.com/andymfc/article/details/54580647中，已经跟大家介绍如何智能魔镜的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交互功能。