S60上的带鱼眼放大效果列表

首先要强烈鄙视一下给Nokia S60设计UI接口团队——用到现在最恶心的，文档最不完整的UI框架了。

 

然后要感谢一下Forum Nokia Wiki 上的 Mayank ， 提供了一个鱼眼列表的范例程序，虽然有bug。

 

http://wiki.forum.nokia.com/index.php/How_to_implement_fisheye_view

 

源代码可在上面地址下到

 

这里说一下这个范例里的bug

 

如果列表很大，超出屏幕，那么最后一个可能没法显示全。

 

原因是父类的View只能按照等高度的item布局，鱼眼放大效果其实是在绘制过程中的hack方法，实际上view不知道我们放大了某个item。

 

修复方法是，如果这个焦点在当前屏幕内的最后一行（注意不是全部列表最后一行），那么改变调整逻辑，把列表下移腾出放大空间，改成列表上移。

 

这个调整后，范例里的Relign方法就没用了，改善了处理效率。

 

最后改进一下列表的Draw方法。

 

List控件的Draw方法必调用列表项绘制方法，否则是看不到内容的。

 

但是没必要全部都绘制一边。只要画当前屏幕开始项目和结束项目就行了。

 

这些改动，都已经放到wiki上了。不过需要手工覆盖到范例上。

 

void
 CCustomListItemDrawer::DrawActualItem
(
TInt aItemIndex,	const
 TRect& aActualItemRect,

		                                   TBool aItemIsCurrent, TBool /*aViewIsEmphasized*/
,

		                                   TBool /*aViewIsDimmed*/
, TBool aItemIsSelected)
 const


	{


	TInt selectedIndex = iListBox.CurrentItemIndex
(
)
;

	TInt itemIndex = aItemIndex;

	TRect itemRect = aActualItemRect;

	

	if
(
 selectedIndex == iListBox.BottomItemIndex
(
)
 )
 {


		// selected item is at the bottom


		itemRect.iTl
.iY
 -= iItemCellSize.iHeight
;

		if
(
 itemIndex < selectedIndex )
 {


			itemRect.iBr
.iY
 -= iItemCellSize.iHeight
;

		}


	}
 else
 {


		if
 (
aItemIsCurrent)
 {


			itemRect.iBr
.iY
 += iItemCellSize.iHeight
;

		}
 else
 if
 (
itemIndex > selectedIndex)
 {


			// Lets move the following entries down to accomodate fish eye window


			itemRect.iTl
.iY
 += iItemCellSize.iHeight
;

			itemRect.iBr
.iY
 += iItemCellSize.iHeight
;

		}
	

	}


	// Call the Actual draw function


	}


 

CFishEyeListBox::CFishEyeListBox
(
)


:CAknSingleHeadingStyleListBox(
)


	{


	}


 

/**

 * Override the default item drawer by our own

 */


void
 CFishEyeListBox::CreateItemDrawerL
(
)


	{


	CColumnListBoxData* columnData = CColumnListBoxData::NewL
(
)
; // CColumnListBoxItemDrawer owns columnData


	const
 CFont* myFont = CEikonEnv::Static
(
)
->DenseFont(
)
;

	iItemDrawer = new
(
ELeave)
 CCustomListItemDrawer(
Model(
)
, myFont, columnData, *this
)
;

	}


 

/**

 * To handle the item scrolling

 */


TKeyResponse CFishEyeListBox::OfferKeyEventL
(
const
 TKeyEvent& aKeyEvent,

		TEventCode aType)
 {


	if
 (
EEventKey == aType)
 {


		switch
 (
aKeyEvent.iCode
)
 {


		// Down arrow


		case
 EKeyDownArrow: {


			ScrollDown(
)
;			

			DrawDeferred(
)
;	

			return
 EKeyWasConsumed;

		}


 

			// Up arrow


		case
 EKeyUpArrow: {


			ScrollUp(
)
;

			DrawDeferred(
)
;

			return
 EKeyWasConsumed;

		}


 

		default
:

			return
 CEikTextListBox::OfferKeyEventL
(
aKeyEvent, aType)
;

		}


	}


	return
 EKeyWasNotConsumed;

}


 

void
 CFishEyeListBox::ScrollDown
(
void
)
 {


	TInt currIndex = CurrentItemIndex(
)
;

	if
(
 currIndex < Model(
)
->NumberOfItems(
)
 - 1
 )
 {


		SetCurrentItemIndex(
 currIndex + 1
)
;

	}
 else
 {


		// Lets do circular scrolling by setting current index as the first item


		SetCurrentItemIndex(
0
)
;

	}


	ScrollToMakeItemVisible(
 CurrentItemIndex(
)
 )
;

}


void
 CFishEyeListBox::ScrollUp
(
void
)
 {


	TInt currIndex = CurrentItemIndex(
)
;

	if
(
 currIndex > 0
 )
 {


		SetCurrentItemIndex(
 currIndex - 1
)
;		

	}
 else
 if
(
 Model(
)
->NumberOfItems(
)
 > 0
)
 {


		// Lets do circular scrolling by setting current index as the last item


		SetCurrentItemIndex(
Model(
)
->NumberOfItems(
)
 - 1
)
;		

	}


	ScrollToMakeItemVisible(
 CurrentItemIndex(
)
 )
;	

}


 

/**

 * Override the draw function of the list

 * Otherwise it will apply a default background instead of transparent

 * On s60 3rd mr, there will be bugs when the list is large than default. ( A ugly white bar at the end of list)

 */


void
 CFishEyeListBox::Draw
(
const
 TRect& aRect)
 const
 {


	CListBoxView* view = View(
)
;

	TInt start = view->TopItemIndex(
)
;

	TInt end = view->BottomItemIndex(
)
;

	for
(
 TInt i = start; i <= end; i++ )
 {


		view->DrawItem(
i)
;

	}


}