本控件主要为了支持布局内元素很多,但是又不想显示滚动条,意图通过按钮来控制布局滚动的情形。
效果图如下:
当布局高度足以容纳所有子控件时:
当布局高度不足以容纳子控件时:
并且上下按钮支持点击翻页功能。
主要实现思路:
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*) {
//控件本身的滚动条宽度也要设置成0
SetAttribute(L"vscrollbar", L"true");
auto scroll = GetVerticalScrollBar();
if (scroll) {
scroll->SetFixedWidth(0);
}
//不能直接隐藏滚动条,只能强制把宽度设置成0
scroll = 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>