How to scroll a customized list box without using a scroll bar
This article will show how we can scroll the customized list items drawn on the screen without using a scroll bar. The example make use of TPonterEvent's EDrag event mainly.
In this example we will create a container made up of three sub-containers. The top container or the Header container can be used to draw some header for the page like any image or some status. In this example we are drawing two images in the Header container. The bottom most container or the Footer container can be used to draw such kind of data which changes less frequently. We will show our page status and two buttons(Next/Previous) in this container. The final Middle Container/Main Body Container will be having a list box items drawn on it. This will be a customized list box i.e. all the list box items will be drawn directly on screen with the help of Draw() rather than any native List box API.
- So. Main Body Container = Total User Space - (Header Container + Footer Container)
The final UI will look like:
By default we will show 10 list items on the screen each of which will be made up of a list item heading and two icons. First icon (Call button) will let the user call the corresponding person and second icon ("Location button") will let the user view the location of the corresponding person. Please note that we are not going to implement the calling and the map functionality here so we will just show an information note when ever those icons will be tapped.
We will use some static data (Here, the Nokia Developer Champions names) as our list box headings.
- We will divide our Main Body Container into 10 equal areas (in the form of TRects)
- If you want to show more than 10 items in total, then either you can exceed the list items to be shown on screen at a time or you can use Next/Prev buttons to show further records.
- Suppose we are using an icon of dimensions 25*25 then our TRect’s height should be minimum 25 pixels so that icon can be viewed easily. We will maintain some buffer height as well in the TRect’s height so that some text (in n number of rows) can be drawn according to our requirement.
- We will have to maintain a height offset value (integer) which will signify the magnitude which is either incremented or decremented from the previous position. This height offset value will be set as 0 when the application starts and it will be re-calculated every time during the TPointerEvent's EDrag event.
- We will also maintain a backup height offset value which will store the last value of height offset.
- The main use of height offset value will be in calculating the new TRect's which needs to be drawn after a drag. For example, suppose initially we are drawing 4 TRect's out of 10 we had. Then after dragging towards up, we will show next TRect items and the first four will be out of sight. The actual number of new list items to be drawn will depend on the amount of dragging which is we are calculating with heigth offset value.
Sample Code is attached with this article which can be downloaded to see it's usage.