duilib：设计一个“长度不够，按钮来凑“的duilib布局控件

本文主要是介绍duilib：设计一个“长度不够，按钮来凑“的duilib布局控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本控件主要为了支持布局内元素很多，但是又不想显示滚动条，意图通过按钮来控制布局滚动的情形。

效果图如下：

当布局高度足以容纳所有子控件时：

 当布局高度不足以容纳子控件时：

 并且上下按钮支持点击翻页功能。

主要实现思路：

1. 控件构造的时候，把上下两个按钮以及中间的布局给添加到控件里。

2. 控件处理绘制事件的时候，通过判断中间的布局滚动条的显示状态来隐藏/显示上下按钮。

3. 托管上下按钮的点击通知。

4. 由于需要滚动条显示属性的支持，因此只能把滚动条的宽度设置为0，来达到隐藏的效果。

具体代码如下：

.h

class CVerticalLayoutExUI : public DuiLib::CVerticalLayoutUI{DECLARE_DUICONTROL(CVerticalLayoutExUI);
public:CVerticalLayoutExUI();void SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue);void DoPaint(HDC hDC, const RECT& rcPaint) override;bool Add(CControlUI* pControl);private:bool OnControlReady(void*);bool LineUp(void* lpvoid);bool LineDown(void* lpvoid);private:UINT32							m_iUpWidth;UINT32							m_iUpHeight;UINT32							m_iDownWidth;UINT32							m_iDownHeight;DuiLib::CButtonUI*				m_pBtnUp = nullptr;DuiLib::CButtonUI*				m_pBtnDown = nullptr;DuiLib::CTileLayoutUI*			m_pTileToolbar = nullptr;DuiLib::CDuiString				m_upImg;DuiLib::CDuiString				m_downImg;
};

.cpp

IMPLEMENT_DUICONTROL(CVerticalLayoutExUI)CVerticalLayoutExUI::CVerticalLayoutExUI() {//m_bDrawScrollbar = false;CDialogBuilder builder;CVerticalLayoutUI *pItem = (CVerticalLayoutUI*)(builder.Create(TEXT("xml/controls/vertical_layout_ex.xml"), NULL, NULL, NULL));m_pBtnUp = reinterpret_cast<decltype(m_pBtnUp)>(pItem->FindSubControl(L"btn_vertical_layout_ex_up"));m_pBtnDown = reinterpret_cast<decltype(m_pBtnDown)>(pItem->FindSubControl(L"btn_vertical_layout_ex_down"));m_pTileToolbar = reinterpret_cast<decltype(m_pTileToolbar)>(pItem->FindSubControl(L"tile_vertical_layout_ex_toolbar"));ASSERT(m_pBtnUp);ASSERT(m_pBtnDown);ASSERT(m_pTileToolbar);OnInit += MakeDelegate(this, &CVerticalLayoutExUI::OnControlReady);m_pBtnUp->OnNotify += MakeDelegate(this, &CVerticalLayoutExUI::LineUp);m_pBtnDown->OnNotify += MakeDelegate(this, &CVerticalLayoutExUI::LineDown);CVerticalLayoutUI::Add(pItem);
}void CVerticalLayoutExUI::SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue) {if (_tcsicmp(pstrName, _T("upimg")) == 0) {m_upImg = pstrValue;}else if (_tcsicmp(pstrName, _T("upsize")) == 0) {LPTSTR pstr = NULL;m_iUpWidth = _tcstol(pstrValue, &pstr, 10);  ASSERT(pstr);m_iUpHeight = _tcstol(pstr + 1, &pstr, 10);    ASSERT(pstr);}else if((_tcsicmp(pstrName, _T("downimg")) == 0)){m_downImg = pstrValue;}else if (_tcsicmp(pstrName, _T("downsize")) == 0) {LPTSTR pstr = NULL;m_iDownWidth = _tcstol(pstrValue, &pstr, 10);  ASSERT(pstr);m_iDownHeight = _tcstol(pstr + 1, &pstr, 10);    ASSERT(pstr);}CVerticalLayoutUI::SetAttribute(pstrName, pstrValue);
}void CVerticalLayoutExUI::DoPaint(HDC hDC, const RECT& rcPaint){int height = GetHeight() - m_pBtnDown->GetFixedHeight() - m_pBtnUp->GetFixedHeight();m_pTileToolbar->SetFixedHeight(height);auto pScroll = m_pTileToolbar->GetVerticalScrollBar();if (pScroll) {if (pScroll->IsVisible()) {m_pBtnDown->SetVisible(true);m_pBtnUp->SetVisible(true);}else {m_pBtnDown->SetVisible(false);m_pBtnUp->SetVisible(false);}}CVerticalLayoutUI::DoPaint(hDC, rcPaint);
}bool CVerticalLayoutExUI::Add(CControlUI* pControl) {if (m_pTileToolbar) {return m_pTileToolbar->Add(pControl);}return false;
}bool CVerticalLayoutExUI::LineUp(void* lpvoid) {TNotifyUI* pNotifyUI = (TNotifyUI*)lpvoid;if (!pNotifyUI) return false;if (pNotifyUI->sType != DUI_MSGTYPE_CLICK) return false;if (m_pTileToolbar) {m_pTileToolbar->LineUp();}return true;
}bool CVerticalLayoutExUI::LineDown(void* lpvoid) {TNotifyUI* pNotifyUI = (TNotifyUI*)lpvoid;if (!pNotifyUI) return false;if (pNotifyUI->sType != DUI_MSGTYPE_CLICK) return false;if (m_pTileToolbar) {m_pTileToolbar->LineDown();}return true;
}bool CVerticalLayoutExUI::OnControlReady(void*) {//控件本身的滚动条宽度也要设置成0SetAttribute(L"vscrollbar", L"true");auto scroll = GetVerticalScrollBar();if (scroll) {scroll->SetFixedWidth(0);}//不能直接隐藏滚动条，只能强制把宽度设置成0scroll = m_pTileToolbar->GetVerticalScrollBar();if (scroll) {scroll->SetFixedWidth(0);}if (m_pBtnUp) {m_pBtnUp->SetFixedWidth(m_iUpWidth);m_pBtnUp->SetFixedHeight(m_iUpHeight);m_pBtnUp->SetBkImage(m_upImg);}if (m_pBtnDown) {m_pBtnDown->SetFixedWidth(m_iDownWidth);m_pBtnDown->SetFixedHeight(m_iDownHeight);m_pBtnDown->SetBkImage(m_downImg);}return true;
}

.xml

<?xml version="1.0" encoding="utf-8"?>
<Window><VerticalLayout childalign="center" ><Button name="btn_vertical_layout_ex_up" cursor="hand" height="22" width="22" bkimage="playUI/btn_page_up.png" /><TileLayout name="tile_vertical_layout_ex_toolbar" vscrollbar="true"></TileLayout><Button name ="btn_vertical_layout_ex_down" cursor="hand" height="22" width="22" bkimage="playUI/btn_page_down.png" /></VerticalLayout>
</Window>

这篇关于duilib：设计一个“长度不够，按钮来凑“的duilib布局控件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---