实现UI中的搜索框

zhongyang219 · Aug 29, 2024 · 21fd536 · 21fd536
1 parent 0aa7a51
commit 21fd536
Show file tree

Hide file tree

Showing 12 changed files with 292 additions and 43 deletions.
diff --git a/MusicPlayer2/CPlayerUIBase.cpp b/MusicPlayer2/CPlayerUIBase.cpp
@@ -712,7 +712,7 @@ bool CPlayerUIBase::SetCursor()
 {
     if (m_buttons[BTN_PROGRESS].hover)
     {
-        ::SetCursor(::LoadCursor(NULL, MAKEINTRESOURCE(32649)));
+        ::SetCursor(::LoadCursor(NULL, IDC_HAND));
         return true;
     }
     return false;
@@ -3352,6 +3352,53 @@ void CPlayerUIBase::DrawMiniSpectrum(CRect rect)
     m_draw.DrawSpectrum(CRect(pos_icon, size_icon), col_width, gap_width, 4, icon_color, false, false, Alignment::CENTER, false, 180);
 }
 
+void CPlayerUIBase::DrawSearchBox(CRect rect, UiElement::SearchBox* search_box)
+{
+    //绘制背景
+    COLORREF back_color;
+    if (search_box->hover)
+        back_color = m_colors.color_button_hover;
+    else
+        back_color = m_colors.color_control_bar_back;
+    bool draw_background{ IsDrawBackgroundAlpha() };
+    BYTE alpha;
+    if (!draw_background)
+        alpha = 255;
+    else if (theApp.m_app_setting_data.dark_mode || search_box->hover)
+        alpha = ALPHA_CHG(theApp.m_app_setting_data.background_transparency) * 2 / 3;
+    else
+        alpha = ALPHA_CHG(theApp.m_app_setting_data.background_transparency);
+    if (!theApp.m_app_setting_data.button_round_corners)
+        m_draw.FillAlphaRect(rect, back_color, alpha);
+    else
+        m_draw.DrawRoundRect(rect, back_color, CalculateRoundRectRadius(rect), alpha);
+    //绘制文本
+    CRect rect_text{ rect };
+    rect_text.left += DPI(4);
+    rect_text.right -= rect.Height();
+    std::wstring text = search_box->key_word;
+    COLORREF text_color = m_colors.color_text;
+    if (text.empty())
+    {
+        text = theApp.m_str_table.LoadText(L"TXT_SEARCH_PROMPT");
+        text_color = m_colors.color_text_heighlight;
+    }
+    m_draw.DrawWindowText(rect_text, text.c_str(), text_color, Alignment::LEFT, true);
+    //绘制图标
+    search_box->icon_rect = rect;;
+    search_box->icon_rect.left = rect_text.right;
+    if (search_box->key_word.empty())
+    {
+        DrawUiIcon(search_box->icon_rect, IconMgr::IT_Find);
+    }
+    else
+    {
+        CRect btn_rect{ search_box->icon_rect };
+        btn_rect.DeflateRect(DPI(2), DPI(2));
+        DrawUIButton(btn_rect, search_box->clear_btn, IconMgr::IT_Close);
+    }
+}
+
 void CPlayerUIBase::DrawUiIcon(const CRect& rect, IconMgr::IconType icon_type, IconMgr::IconStyle icon_style, IconMgr::IconSize icon_size)
 {
     // style为IS_Auto时根据深色模式设置向IconMgr要求深色/浅色图标，没有对应风格图标时IconMgr会自行fallback
@@ -3518,4 +3565,6 @@ void CPlayerUIBase::AddToolTips()
     AddMouseToolTip(BTN_PLAY_MY_FAVOURITE, theApp.m_str_table.LoadText(L"UI_TIP_BTN_PLAY_MY_FAVOURITE").c_str());
     //歌词卡拉OK样式显示
     AddMouseToolTip(BTN_KARAOKE, theApp.m_str_table.LoadText(L"UI_TIP_BTN_KARAOKE").c_str());
+    //搜索框清除按钮
+    AddMouseToolTip(static_cast<CPlayerUIBase::BtnKey>(UiElement::TooltipIndex::SEARCHBOX_CLEAR_BTN), theApp.m_str_table.LoadText(L"TIP_SEARCH_EDIT_CLEAN").c_str());
 }
diff --git a/MusicPlayer2/CPlayerUIBase.h b/MusicPlayer2/CPlayerUIBase.h
@@ -35,6 +35,7 @@ namespace UiElement
     class AllTracksList;
     class MiniSpectrum;
     class FolderExploreTree;
+    class SearchBox;
 }
 
 struct SLayoutData
@@ -89,6 +90,7 @@ class CPlayerUIBase : public IPlayerUI
     friend class UiElement::AllTracksList;
     friend class UiElement::MiniSpectrum;
     friend class UiElement::FolderExploreTree;
+    friend class UiElement::SearchBox;
 
     friend class UiFontGuard;
 
@@ -199,7 +201,7 @@ class CPlayerUIBase : public IPlayerUI
         BTN_PLAY_MY_FAVOURITE,  //播放“我喜欢的音乐”
         BTN_MEDIALIB_FOLDER_SORT, //媒体库“文件夹”排序方式
         BTN_MEDIALIB_PLAYLIST_SORT, //媒体库“播放列表”排序方式
-        BTN_KARAOKE,
+        BTN_KARAOKE,            //歌词卡拉OK模式显示
 
         //菜单栏
         MENU_FILE,
@@ -271,6 +273,7 @@ class CPlayerUIBase : public IPlayerUI
     void DrawUiMenuBar(CRect rect);
     void DrawNavigationBar(CRect rect, UiElement::NavigationBar* tab_element);
     void DrawMiniSpectrum(CRect rect);      //绘制图标大小的迷你频谱
+    void DrawSearchBox(CRect rect, UiElement::SearchBox* search_box);
 
     // 实际绘制一个图标
     void DrawUiIcon(const CRect& rect, IconMgr::IconType icon_type, IconMgr::IconStyle icon_style = IconMgr::IconStyle::IS_Auto, IconMgr::IconSize icon_size = IconMgr::IconSize::IS_DPI_16);

diff --git a/MusicPlayer2/MusicPlayerDlg.cpp b/MusicPlayer2/MusicPlayerDlg.cpp
@@ -94,7 +94,6 @@ CMusicPlayerDlg::~CMusicPlayerDlg()
     CCommon::DeleteModelessDialog(m_pSoundEffecDlg);
     CCommon::DeleteModelessDialog(m_pFormatConvertDlg);
     CCommon::DeleteModelessDialog(m_pFloatPlaylistDlg);
-    CCommon::DeleteModelessDialog(m_pUiSearchBox);
 }
 
 CMusicPlayerDlg* CMusicPlayerDlg::GetInstance()
@@ -112,14 +111,6 @@ CMiniModeDlg* CMusicPlayerDlg::GetMinimodeDlg()
     return &m_miniModeDlg;
 }
 
-void CMusicPlayerDlg::ShowUiSearchBox(CRect rect)
-{
-    m_pUiSearchBox->ShowWindow(SW_SHOW);
-    m_pUiSearchBox->SetRelativePos(rect.TopLeft());
-    ClientToScreen(&rect);
-    m_pUiSearchBox->MoveWindow(rect);
-}
-
 void CMusicPlayerDlg::DoDataExchange(CDataExchange* pDX)
 {
     CMainDialogBase::DoDataExchange(pDX);
@@ -2088,8 +2079,12 @@ BOOL CMusicPlayerDlg::OnInitDialog()
 
     m_miniModeDlg.Init();
 
-    m_pUiSearchBox = new CUiSearchBox();
-    m_pUiSearchBox->Create(IDD_UI_SEARCH_BOX_DIALOG, this);
+    for (auto& ui : m_ui_list)
+    {
+        CUserUi* cur_ui{ dynamic_cast<CUserUi*>(ui.get()) };
+        if (cur_ui != nullptr)
+            cur_ui->InitSearchBox(this);
+    }
 
     //只有Windows Vista以上的系统才能跟随系统主题色
 #ifdef COMPILE_IN_WIN_XP
@@ -3364,7 +3359,6 @@ BOOL CMusicPlayerDlg::OnCommand(WPARAM wParam, LPARAM lParam)
     case ID_TEST:
         CTest::Test();
         //CPlayer::GetInstance().DoABRepeat();
-        ShowUiSearchBox(CRect(CPoint(theApp.DPI(30), theApp.DPI(30)), CSize(theApp.DPI(100), theApp.DPI(26))));
         break;
     case ID_TEST_DIALOG:
     {
@@ -6483,9 +6477,6 @@ void CMusicPlayerDlg::OnMove(int x, int y)
 
     //移动主窗口时同步移动浮动播放列表的位置
     MoveFloatPlaylistPos();
-
-    //同步移动UI搜索框的位置
-    m_pUiSearchBox->MainWindowMoved(this);
 }
 
 

diff --git a/MusicPlayer2/MusicPlayerDlg.h b/MusicPlayer2/MusicPlayerDlg.h
@@ -31,7 +31,6 @@
 #include "HorizontalSplitter.h"
 #include "powrprof.h"
 #include "CHotkeyManager.h"
-#include "UiSearchBox.h"
 
 #define WM_ALBUM_COVER_DOWNLOAD_COMPLETE (WM_USER+114)		//自动下载专辑封面和歌词完成时发出的消息
 
@@ -56,7 +55,6 @@ class CMusicPlayerDlg : public CMainDialogBase
     CUIWindow& GetUIWindow() { return m_ui_static_ctrl; }
     bool IsMiniMode() const;
     CMiniModeDlg* GetMinimodeDlg();
-    void ShowUiSearchBox(CRect rect);
 
     // 对话框数据
 #ifdef AFX_DESIGN_TIME
@@ -130,7 +128,6 @@ class CMusicPlayerDlg : public CMainDialogBase
     CSoundEffectDlg* m_pSoundEffecDlg;		//音效设定对话框（非模态对话框）
     CFormatConvertDlg* m_pFormatConvertDlg;		//格式转换对话框（非模态对话框）
     CFloatPlaylistDlg* m_pFloatPlaylistDlg;		//浮动播放列表对话框
-    CUiSearchBox* m_pUiSearchBox;       //用于UI的搜索框
     CPoint m_float_playlist_pos{ INT_MAX, INT_MAX };				//浮动播放列表的位置
 
     CWinThread* m_pThread;		//执行在线查看的线程

diff --git a/MusicPlayer2/UIElement.cpp b/MusicPlayer2/UIElement.cpp
@@ -9,6 +9,7 @@
 #include "MusicPlayerCmdHelper.h"
 #include "UIWindowCmdHelper.h"
 #include <stack>
+#include "UiSearchBox.h"
 
 ///////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////
@@ -3156,6 +3157,74 @@ std::vector<std::shared_ptr<UiElement::TestTree::Node>>& UiElement::FolderExplor
     return CUiFolderExploreMgr::Instance().GetRootNodes();
 }
 
+UiElement::SearchBox::SearchBox()
+{
+}
+
+UiElement::SearchBox::~SearchBox()
+{
+    CCommon::DeleteModelessDialog(search_box_ctrl);
+}
+
+void UiElement::SearchBox::InitSearchBoxControl(CWnd* pWnd)
+{
+    search_box_ctrl = new CUiSearchBox(pWnd);
+    search_box_ctrl->Create();
+}
+
+void UiElement::SearchBox::Draw()
+{
+    CalculateRect();
+    ui->DrawSearchBox(rect, this);
+    Element::Draw();
+}
+
+void UiElement::SearchBox::MouseMove(CPoint point)
+{
+    hover = false;
+    clear_btn.hover = false;
+    //鼠标指向图标区域
+    if (icon_rect.PtInRect(point))
+    {
+        clear_btn.hover = true;
+        //更新鼠标提示
+        if (!key_word.empty())
+            ui->UpdateMouseToolTipPosition(TooltipIndex::SEARCHBOX_CLEAR_BTN, clear_btn.rect);
+        else
+            ui->UpdateMouseToolTipPosition(TooltipIndex::SEARCHBOX_CLEAR_BTN, CRect());
+    }
+    //指向搜索框区域
+    else if (rect.PtInRect(point))
+    {
+        hover = true;
+    }
+}
+
+void UiElement::SearchBox::MouseLeave()
+{
+    hover = false;
+    clear_btn.hover = false;
+}
+
+void UiElement::SearchBox::LButtonUp(CPoint point)
+{
+    clear_btn.pressed = false;
+    //点击清除按钮时清除搜索结果
+    if (icon_rect.PtInRect(point))
+        search_box_ctrl->Clear();
+    //点击搜索框区域时显示搜索框控件
+    else if (search_box_ctrl != nullptr && rect.PtInRect(point))
+        search_box_ctrl->Show(this);
+}
+
+void UiElement::SearchBox::LButtonDown(CPoint point)
+{
+    if (icon_rect.PtInRect(point))
+    {
+        clear_btn.pressed = true;
+    }
+}
+
 ////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////
 std::shared_ptr<UiElement::Element> CElementFactory::CreateElement(const std::string& name, CPlayerUIBase* ui)
@@ -3223,6 +3292,8 @@ std::shared_ptr<UiElement::Element> CElementFactory::CreateElement(const std::st
         element = std::make_shared<UiElement::PlaceHolder>();
     else if (name == "medialibFolderExplore")
         element = std::make_shared<UiElement::FolderExploreTree>();
+    else if (name == "searchBox")
+        element = std::make_shared<UiElement::SearchBox>();
     else if (name == "ui" || name == "root" || name == "element")
         element = std::make_shared<UiElement::Element>();
 

diff --git a/MusicPlayer2/UIElement.h b/MusicPlayer2/UIElement.h
@@ -2,6 +2,8 @@
 #include "CPlayerUIBase.h"
 #include "MediaLibHelper.h"
 
+class CUiSearchBox;
+
 //定义界面元素
 namespace UiElement
 {
@@ -83,6 +85,7 @@ namespace UiElement
         const int TAB_ELEMENT = 901;
         const int PLAYLIST_DROP_DOWN_BTN = 902;
         const int PLAYLIST_MENU_BTN = 903;
+        const int SEARCHBOX_CLEAR_BTN = 904;
     }
 
     //布局
@@ -806,6 +809,27 @@ namespace UiElement
 
         virtual std::vector<std::shared_ptr<Node>>& GetRootNodes() override;
     };
+
+    //搜索框
+    class SearchBox : public Element
+    {
+    public:
+        SearchBox();
+        ~SearchBox();
+        void InitSearchBoxControl(CWnd* pWnd);  //初始化搜索框控件。pWnd：父窗口
+
+        virtual void Draw() override;
+        virtual void MouseMove(CPoint point) override;
+        virtual void MouseLeave() override;
+        virtual void LButtonUp(CPoint point) override;
+        virtual void LButtonDown(CPoint point) override;
+
+        bool hover{};       //如果鼠标指向搜索框，则为true
+        std::wstring key_word;  //搜索框中的文本
+        CUiSearchBox* search_box_ctrl{};    //搜索框控件
+        CRect icon_rect;    //图标的区域
+        CPlayerUIBase::UIButton clear_btn;      //清除按钮
+    };
 }
 
 /////////////////////////////////////////////////////////////////////////////////////////