{"id":1242,"date":"2016-05-02T12:32:42","date_gmt":"2016-05-02T19:32:42","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=1242"},"modified":"2016-05-02T12:32:42","modified_gmt":"2016-05-02T19:32:42","slug":"aligning-the-text-that-appears-in-listpicker","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2016\/05\/02\/aligning-the-text-that-appears-in-listpicker\/","title":{"rendered":"Aligning the text that appears in ListPicker"},"content":{"rendered":"

Readers post questions on the FB page or the blog. Sometimes I can answer them but sometimes I cannot answer them right away. For those that I cannot answer, I add the question to a list of future tutorial ideas. If someone is not sure how to solve a problem, chances are that there are\u00a0others who may need help with the same issue!<\/p>\n

I am beginning to go through my list – watch for more tutorials based on reader questions. Note – I do not have time to solve specific or custom applications. I try to abstract the basic elements of the problem and create a generic solution that can apply to a wide variety of use cases.<\/p>\n

ListPicker Text Alignment<\/h2>\n

A reader asked how to align the text that appears in the ListPicker<\/em> box. The ListPicker<\/em> displays a set of items on screen so that the user may select an item from the list. When the list appears on screen, all the items are “left justified” which means they appear on the left side of the screen.<\/p>\n

To demonstrate, our ListPicker, <\/em>below,<\/em> displays a list of auto manufacturers:<\/p>\n

\"Screenshot_20160502-115325\"<\/a>Is there a way to center or right justify the items that appear in the ListPicker list like this?<\/strong><\/em> The first 4 items in this list are right justified and the last two are centered:<\/p>\n

\"Screenshot_20160502-114442\"<\/a>The answer to that question is basically “yes”, but it may not be perfect – as we will see.<\/p>\n

<\/p>\n

Designer View<\/h2>\n

In the Designer View, we drag a ListPicker<\/em> component from the Palette and then set the properties for the ListPicker<\/em>.<\/p>\n

\"DesignerView\"<\/a>Our sample app displays the ListPicker<\/em> button (the ListPicker<\/em> looks like and acts like a button – when touched, the button launches the ListPicker<\/em> selection list on a new screen).<\/p>\n

After selection, our app displays the item selected in the list in the are shown in the Designer View as “Your selection” – this is a Label<\/em> component (whose name is set to lblSelected<\/em>).<\/p>\n

Calculating the Width<\/h2>\n

For centering and right alignment to work, we need to know the width\u00a0of the screen that will be used by the ListPicker<\/em>. Unfortunately, there is no way to know the\u00a0ListPicker<\/i>\u00a0width but we can approximate the width by setting the width of the ListPicker<\/em> button to fill the entire screen, horizontally, and then reference the width of the button itself. Of course, this requires that the ListPicker<\/em> button be used as a full width button.<\/p>\n

The button’s width is set in Properties by selecting the button and then setting its Width<\/em> property to “Fill parent”:<\/p>\n

\"DesignerViewWidth\"<\/a>The\u00a0ListPicker<\/em> button has a property called TextAlignment<\/em> which sounds promising – but it only aligns the text that appears on the button itself and has nothing to do with the content of the ListPicker<\/em> selection list:<\/p>\n

\"DesignerViewTextAlignment\"<\/a>Blocks Code<\/p>\n

The trick to right justifying or centering the text requires us to estimate the width of the ListPicker<\/em> selection list, and then to add spaces in front of each text item appearing in the list.<\/p>\n

To do this, we reference the property ListPicker1.Width<\/em> and divide it by an estimated number of pixels per character \u00a0(I used 8) to estimate the width in terms of text characters. This value is stored in the global variable ListPickerWidth<\/em>.<\/p>\n

ListPicker1.Width<\/em> is the width of the button itself and NOT the width of the full screen ListPicker<\/em> selection list – this is why we needed to set the ListPicker’s<\/em> Width property to “fill screen”.<\/p>\n

We add items into the selection list, aligning each item to the right – or to the center – by calling a couple of procedures – AlignRight<\/em> and AlignCenter<\/em> (see below).<\/p>\n

\"Blocks1\"<\/a>lblSelected<\/em> refers to the Label<\/em> component that will display the selected item. We initialize it to display the calculated ListPickerWidth<\/em>.<\/p>\n

Aligning the Text<\/h2>\n

To align the text to the right, we need to add spaces in front of the selection item. If our selection item is “Honda”, then to make it appear on the right side of the ListPicker<\/em>, we insert spaces in front so that “Honda” becomes ” \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Honda”.<\/p>\n

There are several ways we can put spaces on the front of the text string. In the method here, we use the segment text<\/em> block to extract a string of spaces from a long set of blank space characters.<\/p>\n

If the width is, say, 40, and the string is “Honda” (5 characters long), then we add 35 blank spaces in front of “Honda” to create a 40 character wide string for the selection list:<\/p>\n

\"BlocksAlignRight\"<\/a>In our example for “Honda” we extract 35 blank spaces from the text field containing the spaces and then join the word “Honda” on to the end, giving us:<\/p>\n

”\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Honda”<\/p>\n

Note that the X<\/em> variable is a parameter variable. When our code calls AlignRight<\/em>, the value “Honda” was passed through to the procedure where it is stored in the variable X<\/em>.<\/p>\n

Centering is handled in a similar fashion – except we add only half as many spaces:\"BlocksAlignCenter\"<\/a>Make sure the string containing the blank spaces, above is long enough!<\/p>\n

Finally, we process the ListPicker AfterPicking<\/em> event and display the selected item’s index (position in the list) and the text of the selected item, on the screen:<\/p>\n

\"BlocksAfterPicking\"<\/a><\/p>\n

If we selected “Chrysler”, then the index position of 4 and the text “Chrysler” are displayed on the screen.<\/p>\n

\"Screenshot_20160502-114810\"<\/a><\/p>\n

Issues<\/h2>\n

Making this work required us to use a “work around” of setting the button width to the maximum width of the screen, and then use the button width to estimate the width of the ListPicker<\/em> selection list. This value is not precise and results in the alignment being slightly off. It may be necessary to add a small constant to the estimated text width – but whether that would work on all devices would require additional testing.<\/p>\n

Source Code<\/h2>\n

No source code link as there is very little source code in this example! Just enter the blocks you need for your own apps!<\/p>\n

E-Books and Printed Books<\/h2>\n

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page<\/a>.<\/p>\n