在http://blog.csdn.net/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交互功能。
扫一扫
8256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
