酷狗音乐模仿还在继续

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

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

下面主要说说界面的组成

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

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

/*************************************************
Copyright:kevin
Author:Kevin LiQi
Date:2016-02-09
Email:kevinlq0912@163.com
QQ:936563422
Version:V1.0
Description:音乐播放器---标题栏的实现
**************************************************/
#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_OBJECT
public:
    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:kevin
Author:Kevin LiQi
Date:2016-02-12
Email:kevinlq0912@163.com
QQ:936563422
Version:V1.0
Description:音乐播放器--主菜单的实现
**************************************************/
#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:kevin
Author:Kevin LiQi
Date:2016-02-09
Email:kevinlq0912@163.com
QQ:936563422
Version:V1.0
Description:音乐播放器---左边工具按钮的实现
**************************************************/
#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:kevin
Author:Kevin LiQi
Date:2016-02-09
Email:kevinlq0912@163.com
QQ:936563422
Version:V1.0
Description:音乐播放器---底部控制界面
**************************************************/
#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.****.net/u013704336\
Email：kevinlq0912@163.com
QQ：936563422