酷狗音乐模仿还在继续

前一段时间刚好有时间，就试着去写一写酷狗音乐的界面，无奈好多资源图片找不到，只能凑合着用吧，界面做的还很粗糙，有待细化。仔细观察酷狗音乐界面，主要可以分为四部分构成：

• 标题栏
• 左边工具栏
• 右边歌曲、歌词、MV等界面
• 底部控制栏

---

下面主要说说界面的组成

界面的组成是这样的，标题栏、左边工具栏、右边内容区域、底部工具栏都是继承自QWidget的，主界面是继承自QFrame的，在主界面将其他各个界面进行了一个布局，最终实现了如上图所示的界面。

1. 标题栏
   标题栏中实现了各个按钮菜单的初始化，全部敲的代码。
   TitleWidget.h

/*************************************************Copyright:kevinAuthor:Kevin LiQiDate:2016-02-09Email:[e-mail]:936563422Version:V1.0Description:音乐播放器---标题栏的实现**************************************************/#ifndef TITLEWIDGET_H#define TITLEWIDGET_H#include <QWidget>class PushButton;class QLabel;class QHBoxLayout;class SearchLineEdit;class MyMenu;class RemoteWidget;typedef enum TbnStatus{    BtnMax = 0,    BtnMin}TBNSTATUS;class TitleWidget : public QWidget{    Q_OBJECTpublic:    explicit TitleWidget(QWidget *parent = 0);    ~TitleWidget();    void Translator();Q_SIGNALS:    void signalClose();    void signalHideWidget();    void signalMax();    void signalMix();    void signalShowSkin();    //转发遥控器信号    void signalShowOrHideWidget(int);private Q_SLOTS:    void slotChangeBtnStatus(int status);    void slotOpenOrHideRemote();    void slotHideRemote();private:    void initForm();    void initWidget();    void initConnect();private:    QLabel *m_labelIcon;    PushButton *m_TbnLogin;            //登录    QLabel *m_label_div;    PushButton *m_TbnRegister;         //注册    SearchLineEdit *m_search;           //索索框    PushButton *m_TbnGame;             //游戏    PushButton *m_TbnNews;             //消息通知    PushButton *m_TbnSkin;             //皮肤    PushButton *m_TbnMenu;             //主菜单    PushButton *m_TbnRemote;           //遥控器    PushButton *m_TbnMenu_max;         //最大化    PushButton *m_TbnMenu_min;         //最小化    PushButton *m_TbnMenu_close;       //关闭    QHBoxLayout *m_mainLayout;    MyMenu *m_menu;    RemoteWidget *m_remoteWidget;    bool m_isOpenRemote;                  //是否打开遥控器};#endif // TITLEWIDGET_H

TitleWidget.cpp

void TitleWidget::initWidget(){    m_labelIcon = new QLabel(this);    //登录和注册    m_TbnLogin = new PushButton(this);    m_label_div = new QLabel(this);    m_label_div->setFixedSize(1,16);    m_label_div->setStyleSheet("background-color:#FDF7F7");    m_TbnRegister = new PushButton(this);    //搜索框    m_search = new SearchLineEdit(this);    m_TbnGame = new PushButton(this);          //游戏    m_TbnNews = new PushButton(this);          //消息通知    m_TbnSkin = new PushButton(this);          //皮肤    //创建菜单按钮    m_TbnMenu = new PushButton(this);    m_TbnRemote = new PushButton(this);        //遥控器    m_TbnMenu_min = new PushButton(this);    m_TbnMenu_max = new PushButton(this);    m_TbnMenu_close = new PushButton(this);    //标题栏布局    m_mainLayout = new QHBoxLayout(this);    m_mainLayout->addSpacing(20);    m_mainLayout->addWidget(m_labelIcon);    m_mainLayout->addSpacing(10);    m_mainLayout->addWidget(m_TbnLogin);    m_mainLayout->addWidget(m_label_div);    m_mainLayout->addWidget(m_TbnRegister);    m_mainLayout->addSpacing(220);    m_mainLayout->addWidget(m_search);    m_mainLayout->addStretch();    m_mainLayout->addWidget(m_TbnGame);    m_mainLayout->addWidget(m_TbnNews);    m_mainLayout->addWidget(m_TbnSkin);    m_mainLayout->addSpacing(10);    m_mainLayout->addWidget(m_TbnMenu);    m_mainLayout->addWidget(m_TbnRemote);    m_mainLayout->addWidget(m_TbnMenu_min);    m_mainLayout->addWidget(m_TbnMenu_max);    m_mainLayout->addWidget(m_TbnMenu_close);    m_mainLayout->addSpacing(6);    m_mainLayout->setContentsMargins(0,20,0,0);    this->setLayout(m_mainLayout);    m_menu = new MyMenu(this);    m_TbnMenu->setMenu(m_menu);    m_remoteWidget = new RemoteWidget();}//翻译标题栏void TitleWidget::Translator(){    m_menu->translator();    m_TbnLogin->setText(tr("tbn_login"));    m_TbnRegister->setText(tr("tbn_register"));    m_TbnLogin->setToolTip(tr("login"));    m_TbnRegister->setToolTip(tr("register"));    m_TbnGame->setToolTip(tr("tbn_game"));    m_TbnNews->setToolTip(tr("tbn_news"));    m_TbnSkin->setToolTip(tr("tbn_skin"));    m_TbnMenu->setToolTip(tr("tbn_menu"));    m_TbnRemote->setToolTip(tr("tbn_start_remote"));    m_TbnMenu_close->setToolTip(tr("tbn_close"));    m_TbnMenu_max->setToolTip(tr("tbn_max"));    m_TbnMenu_min->setToolTip(tr("tbn_min"));}

标题栏中有个菜单按钮，主要是子类化QMenu，然后添加各个Action即可：
MainMenu.cpp:

/*************************************************Copyright:kevinAuthor:Kevin LiQiDate:2016-02-12Email:[e-mail]:936563422Version:V1.0Description:音乐播放器--主菜单的实现**************************************************/#include "mymenu.h"#include "iconhelper.h"#include <QApplication>#include <QDesktopWidget>#include "Common/menu.h"#include "BottomBar/play_mode_menu.h"#include "aboutkugoudialog.h"MyMenu::MyMenu(QWidget *parent)    :Menu(parent){    this->initForm();    this->initWidget();    this->initConnect();}MyMenu::~MyMenu(){}void MyMenu::translator(){    m_playMode->translator();    m_aboutKugou->translator();    m_actionLogin->setText(tr("action_login"));    m_menuAddMusic->setTitle(tr("menu_add_music"));    m_actionAddLocalMusic->setText(tr("action_add_local_music.."));    m_actionAddLocalFolderMusic->setText(tr("action_add_music_local_folder_music"));    m_actionMagicRemote->setText(tr("action_magic_remote"));    m_actionStripRemote->setText(tr("action_strip_remote"));    m_actionHideRemote->setText(tr("action_hide_remote"));    m_actionAverageBalance->setText(tr("average_balance"));    m_actionMusicPlug->setText(tr("action_music_plug"));    m_actiontimingSetting->setText(tr("action_timingSetting"));    m_actionAlwaysFront->setText(tr("action_alwaysFront"));    m_actionRecoveryStatus->setText(tr("action_recovery"));    m_actionAllSpeedDownload->setText(tr("action_all_speed_download"));    m_actionCustomDownload->setText(tr("action_custom_download"));    m_actionBroadband->setText(tr("action_broadband"));    m_actionOnLineUpdate->setText(tr("action_online_update"));    m_actionShowTodayRecommend->setText(tr("action_show_today_recommend"));    m_actionHelp->setText(tr("action_help"));    m_actionSuggest->setText(tr("action_suggest"));    m_actionAboutKugou->setText(tr("action_about_kugou"));    m_actionSetting->setText(tr("action_setting"));    m_actionQuit->setText(tr("action_quit"));}void MyMenu::slotShowAboutKugou(){    m_aboutKugou->exec();}void MyMenu::initForm(){}void MyMenu::initWidget(){    m_actionLogin = new QAction(this);    //添加音乐二级菜单    m_menuAddMusic = new Menu(this);    m_actionAddLocalMusic = new QAction(m_menuAddMusic);    m_actionAddLocalFolderMusic = new QAction(m_menuAddMusic);    m_menuAddMusic->addAction(m_actionAddLocalMusic);    m_menuAddMusic->addAction(m_actionAddLocalFolderMusic);    m_playMode = new Play_Mode_Menu(this);    m_playMode->setTitle(tr("play_mode"));    //遥控器二级菜单    m_menuRemote = new Menu(this);    m_menuRemote->setTitle(tr("menu_remote"));    m_actionMagicRemote = new QAction(this);    m_actionStripRemote = new QAction(this);    m_actionHideRemote = new QAction(this);    m_menuRemote->addAction(m_actionMagicRemote);    m_menuRemote->addAction(m_actionStripRemote);    m_menuRemote->addAction(m_actionHideRemote);    m_actionAverageBalance = new QAction(this);    m_actionMusicPlug  = new QAction(this);    m_actiontimingSetting  = new QAction(this);    m_actionAlwaysFront  = new QAction(this);    m_actionRecoveryStatus  = new QAction(this);    //下载设置二级菜单    m_menuDownloadSetting = new Menu(this);    m_menuDownloadSetting->setTitle(tr("menu_downloadSetting"));    m_actionAllSpeedDownload = new QAction(this);    m_actionCustomDownload = new QAction(this);    m_actionBroadband = new QAction(this);    m_menuDownloadSetting->addAction(m_actionAllSpeedDownload);    m_menuDownloadSetting->addAction(m_actionCustomDownload);    m_menuDownloadSetting->addAction(m_actionBroadband);    //在线更新    m_actionOnLineUpdate = new QAction(this);    //显示今日推荐    m_actionShowTodayRecommend = new QAction(this);    //帮助与意见反馈二级菜单    m_menuHelp = new Menu(this);    m_menuHelp->setTitle(tr("menu_help"));    m_actionHelp = new QAction(this);    m_actionSuggest = new QAction(this);    m_actionAboutKugou = new QAction(this);    m_menuHelp->addAction(m_actionHelp);    m_menuHelp->addAction(m_actionSuggest);    m_menuHelp->addAction(m_actionAboutKugou);    m_actionSetting  = new QAction(this);    m_actionQuit  = new QAction(this);    m_actionLogin->setIcon(QIcon(":/image/mainMenu/help.png"));    m_actionAverageBalance->setIcon(QIcon(":/image/mainMenu/open.png"));    m_actionSetting->setIcon(QIcon(":/image/mainMenu/setting.png"));    m_actionQuit->setIcon(QIcon(":/image/mainMenu/quit.png"));    this->addAction(m_actionLogin);    this->addSeparator();    this->addMenu(m_menuAddMusic);    this->addMenu(m_playMode);    this->addSeparator();    this->addMenu(m_menuRemote);    this->addAction(m_actionAverageBalance);    this->addAction(m_actionMusicPlug);    this->addAction(m_actiontimingSetting);    this->addSeparator();    this->addAction(m_actionAlwaysFront);    this->addAction(m_actionRecoveryStatus);    this->addMenu(m_menuDownloadSetting);    this->addAction(m_actionOnLineUpdate);    this->addAction(m_actionShowTodayRecommend);    this->addMenu(m_menuHelp);    this->addAction(m_actionSetting);    this->addSeparator();    this->addAction(m_actionQuit);    //菜单子功能    m_aboutKugou = new AboutKugouDialog;          //关于酷狗}void MyMenu::initConnect(){    connect(m_actionAboutKugou,SIGNAL(triggered(bool)),            this,SLOT(slotShowAboutKugou()));    connect(m_actionQuit,SIGNAL(triggered(bool)),            this,SIGNAL(signal_quit()));}

1. 左边工具栏
   
   左边工具栏是继承自QToolButton,然后通过一个垂直布局二实现的：
   LeftToolBar.cpp

/*************************************************Copyright:kevinAuthor:Kevin LiQiDate:2016-02-09Email:[e-mail]:936563422Version:V1.0Description:音乐播放器---左边工具按钮的实现**************************************************/#include "lefttoolbar.h"#include "iconhelper.h"#include "Common/toolbutton.h"#include <QLabel>#include <QVBoxLayout>LeftToolBar::LeftToolBar(QWidget *parent)    : QWidget(parent){    this->initWidget();    this->initForm();    this->initConnect();}void LeftToolBar::traanslator(){    m_tbnLocalList->setToolTip(tr("local_list"));    m_tbnNetworkCollect->setToolTip(tr("network_collect"));    m_tbnMusicRadio->setToolTip(tr("music_radio"));    m_tbnPhoneManage->setToolTip(tr("phone_manaage"));    m_tbnLocalMusic->setToolTip(tr("local_music"));    m_tbnMore->setToolTip(tr("more"));}void LeftToolBar::initForm(){    this->setMaximumWidth(40);    m_tbnLocalList->setIcon(QIcon(":/image/appTools/music_button_playlist.png"));    m_tbnNetworkCollect->setIcon(QIcon(":/image/appTools/music_button_cloud.png"));    m_tbnMusicRadio->setIcon(QIcon(":/image/appTools/music_button_radio.png"));    m_tbnLocalMusic->setIcon(QIcon(":/image/appTools/music_button_mydownl.png"));    m_tbnPhoneManage->setIcon(QIcon(":/image/appTools/music_button_mobile.png"));    m_tbnMore->setIcon(QIcon(":/image/appTools/music_button_tools.png"));    m_vecTbn.push_back(m_tbnLocalList);    m_vecTbn.push_back(m_tbnNetworkCollect);    m_vecTbn.push_back(m_tbnMusicRadio);    m_vecTbn.push_back(m_tbnLocalMusic);    m_vecTbn.push_back(m_tbnPhoneManage);    m_vecTbn.push_back(m_tbnMore);    for (int i = 0; i != m_vecTbn.size();i++)    {        m_vecTbn.at(i)->setCursor(Qt::ArrowCursor);        m_vecTbn.at(i)->setCheckable(true);        m_vecTbn.at(i)->setAutoExclusive(true);    }}void LeftToolBar::initWidget(){    m_tbnLocalList = new ToolButton(this);    m_tbnNetworkCollect = new ToolButton(this);    m_tbnMusicRadio = new ToolButton(this);    m_tbnPhoneManage = new ToolButton(this);    m_tbnLocalMusic = new ToolButton(this);    m_tbnMore = new ToolButton(this);    this->setButtonStyle(m_tbnLocalList);    this->setButtonStyle(m_tbnNetworkCollect);    this->setButtonStyle(m_tbnMusicRadio);    this->setButtonStyle(m_tbnPhoneManage);    this->setButtonStyle(m_tbnLocalMusic);    this->setButtonStyle(m_tbnMore);    m_mainLayout = new QVBoxLayout(this);    m_mainLayout->addSpacing(15);    m_mainLayout->addWidget(m_tbnLocalList);    m_mainLayout->addWidget(m_tbnNetworkCollect);    m_mainLayout->addWidget(m_tbnMusicRadio);    m_mainLayout->addWidget(m_tbnPhoneManage);    m_mainLayout->addWidget(m_tbnLocalMusic);    m_mainLayout->addWidget(m_tbnMore);    m_mainLayout->addStretch();    m_mainLayout->setContentsMargins(0,0,10,0);    this->setLayout(m_mainLayout);}void LeftToolBar::initConnect(){    connect(m_tbnLocalList,SIGNAL(clicked(bool)),            this,SIGNAL(signalLocalList()));    connect(m_tbnNetworkCollect,SIGNAL(clicked(bool)),            this,SIGNAL(signalNetCollect()));    connect(m_tbnMusicRadio,SIGNAL(clicked(bool)),            this,SIGNAL(signalMusicRadio()));    connect(m_tbnPhoneManage,SIGNAL(clicked(bool)),            this,SIGNAL(signalPhoneManage()));    connect(m_tbnLocalMusic,SIGNAL(clicked(bool)),            this,SIGNAL(signalLocalMusic()));    connect(m_tbnMore,SIGNAL(clicked(bool)),            this,SIGNAL(signalMoreTool()));}void LeftToolBar::setButtonStyle(ToolButton *tbn){    tbn->setFixedSize(48,50);    tbn->setObjectName("leftToolBar");}

1. 右边内容区域
   右边内容区域就是一个QWidget,暂时设置为背景透明而已，后期还得继续处理！

2. 底部工具栏

   
   底部工具栏主要有上一首、播放/暂停、下一首、播放进度条、收藏、下载、播放模式、声音、播放列表等等组成：

/*************************************************Copyright:kevinAuthor:Kevin LiQiDate:2016-02-09Email:[e-mail]:936563422Version:V1.0Description:音乐播放器---底部控制界面**************************************************/#include "bottomwidget.h"#include "iconhelper.h"#include "Common/toolbutton.h"#include "sliderwidget.h"#include "play_mode_menu.h"         //播放模式菜单#include <QLabel>#include <QVBoxLayout>#include <QHBoxLayout>#include <QDebug>BottomWidget::BottomWidget(QWidget *parent)    :QWidget(parent){       this->initWidget();    this->initForm();    this->initConnect();}BottomWidget::~BottomWidget(){}void BottomWidget::translator(){    m_playMode->translator();    m_tbnPerious->setToolTip(tr("perious_music"));    m_tbnNext->setToolTip(tr("nect_music"));    m_tbnPlay->setToolTip(tr("play_music"));    m_tbnLove->setToolTip(tr("i_love_it"));    m_tbnDownload->setToolTip(tr("download_music"));    m_tbnSimilarMusic->setToolTip(tr("similar_music"));    m_tbnCircleMode->setToolTip(tr("list_circle_model"));    m_tbnVoice->setToolTip(tr("no_voice"));    m_tbnSoundEffect->setToolTip(tr("snake_effect"));                   //蝰蛇音效    m_tbnMusicWords->setToolTip(tr("open_desktop_music_words"));        //打开桌面歌词    m_label_misic_num->setText("10");    m_labelMusicName->setText(tr("label_music_name"));    m_labelMusicTotalTime->setText("00:00");    m_labelMusicCurTime->setText("00:00");}void BottomWidget::initForm(){    this->setMaximumHeight(60);}void BottomWidget::initWidget(){    m_tbnPerious = new ToolButton();    m_tbnPlay = new ToolButton();    m_tbnNext = new ToolButton();    m_tbnLove = new ToolButton();    m_tbnDownload = new ToolButton();    m_tbnSimilarMusic = new ToolButton();    m_tbnCircleMode = new ToolButton(this);    m_tbnCircleMode->setObjectName("tbnMenu");    m_playMode = new Play_Mode_Menu(this);    m_playMode->setObjectName("MenuplayMode");    m_tbnCircleMode->setMenu(m_playMode);    m_tbnVoice = new ToolButton();    m_tbnSoundEffect = new ToolButton();    m_tbnMusicWords = new ToolButton();    m_tbnMusicPlayQueue = new ToolButton();    m_label_misic_num = new QLabel(this);    m_label_misic_num->setObjectName("whitelabel");    m_label_misic_num->setStyleSheet("color:rgb(255,255,255)");    //歌曲信息标签    m_labelMusicName = new QLabel(this);    m_labelMusicName->setObjectName("whitelabel");    m_labelMusicTotalTime = new QLabel(this);    m_labelMusicTotalTime->setObjectName("whitelabel");    QLabel *label_music_time_div = new QLabel(this);    label_music_time_div->setText("/");    label_music_time_div->setObjectName("whitelabel");    m_labelMusicCurTime = new QLabel(this);    m_labelMusicCurTime->setObjectName("whitelabel");    m_sliderWidget = new SliderWidget();            //播放进度条    m_MusicInfoLayout = new QHBoxLayout;    m_MusicInfoLayout->addWidget(m_labelMusicName);    m_MusicInfoLayout->addStretch();    m_MusicInfoLayout->addWidget(m_labelMusicCurTime);    m_MusicInfoLayout->addWidget(label_music_time_div);    m_MusicInfoLayout->addWidget(m_labelMusicTotalTime);    m_MusicInfoLayout->setContentsMargins(0,0,0,0);    QVBoxLayout *MusicLayout = new QVBoxLayout();    MusicLayout->addLayout(m_MusicInfoLayout);    MusicLayout->addWidget(m_sliderWidget);    MusicLayout->setContentsMargins(0,0,0,0);    m_mainLayout = new QHBoxLayout(this);    m_mainLayout->addSpacing(25);    m_mainLayout->addWidget(m_tbnPerious);    m_mainLayout->addSpacing(5);    m_mainLayout->addWidget(m_tbnPlay);    m_mainLayout->addSpacing(5);    m_mainLayout->addWidget(m_tbnNext);    //m_mainLayout->addStretch();    m_mainLayout->addLayout(MusicLayout);    m_mainLayout->addWidget(m_tbnLove);    m_mainLayout->addWidget(m_tbnDownload);    m_mainLayout->addWidget(m_tbnSimilarMusic);    m_mainLayout->addWidget(m_tbnCircleMode);    m_mainLayout->addWidget(m_tbnVoice);    m_mainLayout->addWidget(m_tbnSoundEffect);    m_mainLayout->addWidget(m_tbnMusicWords);    m_mainLayout->addWidget(m_tbnMusicPlayQueue);    m_mainLayout->addWidget(m_label_misic_num);    m_mainLayout->addSpacing(20);    m_mainLayout->setContentsMargins(0,10,0,20);    setLayout(m_mainLayout);}//信号和槽的关联void BottomWidget::initConnect(){    connect(m_tbnPerious,SIGNAL(clicked(bool)),            this,SIGNAL(signalPreious()));    connect(m_tbnPlay,SIGNAL(clicked(bool)),            this,SIGNAL(signalPlay()));    connect(m_tbnNext,SIGNAL(clicked(bool)),            this,SIGNAL(signalNext()));    //循环模式信号和槽连接    connect(m_tbnCircleMode,SIGNAL(clicked(bool)),            m_playMode,SLOT(slotMenuVisiable()));}

以上就是各个界面的详细代码，在主界面中，将各个子界面按照一定的布局方式进行布局即可。

//初始化界面void MusicWidget::initWidget(){    m_title = new TitleWidget(this);        //标题栏    m_title->installEventFilter(this);      //标题栏安装事件监听器,识别鼠标的双击    m_midWidget = new MidWidget(this);      //中间内容    m_bottom = new BottomWidget(this);      //底部工具栏    m_leftToolBar = new LeftToolBar(this);  //左边工具按钮    m_midLayout = new QHBoxLayout();    m_midLayout->addWidget(m_leftToolBar);    m_midLayout->addWidget(m_midWidget);    m_midLayout->setContentsMargins(2,0,0,0);    m_maintLayout = new QVBoxLayout(this);    m_maintLayout->addWidget(m_title);    m_maintLayout->addLayout(m_midLayout);    m_maintLayout->addWidget(m_bottom);    m_maintLayout->setContentsMargins(0,0,0,0);    this->setLayout(m_maintLayout);}

以上就是酷狗音乐界面的大致结构，以后会抽时间继续完善。

技术在于交流、分享……博客地址：http://blog.csdn.net/u013704336\Email：[e-mail]：936563422