Click event for ImageView arrray?

nfordbscndrd · Jan 30, 2011

I'm working on a card game with cards displayed in 13 ImageViews. I set up an array for them like this:

CardViews = Array As ImageView(C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13)

When any of the cards is selected, I want to raise it up above the row to make it stand out, as well as doing some other processing.

Do I have to have a Click event with basically the same code for each ImageView, or is there some way to get the array to capture the Click event for all of them? (In VB6, it would look like: Sub CardViews_Click(Index) where Index is the image selected.)

Erel · Jan 30, 2011

You could use a single sub for all of these ImageViews.
Here is one example: http://www.b4x.com/forum/beta/6570-tape-calculator.html#post38400

nfordbscndrd · Jan 31, 2011

Erel said:
You could use a single sub for all of these ImageViews.
Here is one example: http://www.b4x.com/forum/beta/6570-tape-calculator.html#post38400

I could see where the app in that thread was using a single event, but I could not figure out where or how the event was being linked to the array of ImageViews.

Eventually, I discovered that it is done in the Designer for each ListView.
For the benefit of those who don't want to spend an hour or two searching:

In Designer, you have to bring up each ImageView (or Button or whatever) and give each one the same Event Name under Main. The Event Name is what the name of the Sub will be, such as "imgCard" for "Sub imgCard_Click". Then under Common Properties, you need to give each one a unique Tag. I just gave each one its "index" number (1-13 for 13 ImageViews). Then the Sub looks like this:

Sub imgCard_Click
Dim i as String
Dim Send As View
Send = Sender
i = Send.Tag
MsgBox("ImageView #" & i, "You clicked...")
End Sub

Once you get the index of the view that was clicked, you can add whatever code you need.

I had already created an array of the ImageViews, but it turns out that the array has nothing to do with the above Sub; however, I am using it for other things such as the below. I don't know if this is actually the most efficient way of doing this kind of stuff though.

Sub Globals
Dim C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13 As ImageView
Dim CardViews() As ImageView
Sub Activity_Create...
CardViews = Array As ImageView(C1, C2, C3, C4, C5, C6, C7, C8, C9, C10, C11, C12, C13)
For i = 0 To 12
CardViews(i).BringToFront
Next

klaus · Jan 31, 2011

Here you are, at least it's how I would do it.
You don't need to have an Array of ImageViews.

B4X:

[SIZE=2][FONT=Courier New][COLOR=#0000ff][SIZE=2][FONT=Courier New][COLOR=#0000ff][SIZE=2][FONT=Courier New][COLOR=#0000ff]Sub [/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]Globals[/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] CardWidth [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]  : CardWidth=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]60dip[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] CardHeight [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] : CardHeight=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]80dip[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] ColNumber [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Int[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    : ColNumber=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]4[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] CardNumber [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Int[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]   : CardNumber=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]12[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]End Sub[/COLOR][/SIZE][/FONT]
 
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Sub [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]Activity_Create(FirstTime [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Boolean[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] i [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Int[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] x, y [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
 
[FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  For[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] i = [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0 [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]To[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] CardNumber-[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]1[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]    Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] imvCards [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]ImageView        [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' definition of a new ImageView[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    imvCards.Initialize([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"imgCard"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])   [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' initializing it with the EventName[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    imvCards.Tag=i+[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]1                 [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' sets the Tag parameter[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    imvCards.Color=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Colors[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2].Red        [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' sets a default color[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    x=(i [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Mod[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] ColNumber)*(CardWidth+[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]5dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])+[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]5dip    [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' calculates the x position on the screen[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    y=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Floor[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](i/ColNumber)*(CardHeight+[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]5dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])+[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]5dip  [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' calculates the y position on the screen[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    Activity.AddView(imvCards,x,y,CardWidth,CardHeight  [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' adds the ImageView to the Activity[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Next[/COLOR][/SIZE][/FONT]
[SIZE=2][FONT=Courier New][COLOR=#0000ff]End Sub[/COLOR][/FONT][/SIZE]
 
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Sub [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]imgCard_Click[/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] i [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]String[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] Send [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]View[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[SIZE=2][FONT=Courier New][SIZE=2][/SIZE][/FONT][/SIZE]
[SIZE=2][FONT=Courier New][SIZE=2][FONT=Courier New]  Send = [/FONT][/SIZE][/FONT][/SIZE][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Sender[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]  i = Send.Tag[/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Msgbox[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"ImageView #"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] & i, [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"You clicked..."[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]End Sub[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Best regards.

nfordbscndrd · Jan 31, 2011

That looks great.

I think I'm going to have to do multiple layouts to allow for different sizes and scales of devices. Would it be easier to use the Designer or to adjust the code that you gave using GetDeviceLayoutValues?

If Designer, can you show me how to tie the ImageViews created in the Layout to the code you gave?

klaus · Jan 31, 2011

It depends on how many layouts you need.
Do you also want to support orientation change ?
Doing it in the code you have all freedom.
The code I sent is resolution independant, but only for portrait mode, as I used dip (density independant pixels) dimensions.
You can easily add a second code for landscape mode.
One problem you could encounter are the different height/width ratios.
For example 480/640 and 480/800.
If you want to take also those into account you will need at least 4 layouts.
These can be realized in code or in the Designer.

If Designer, can you show me how to tie the ImageViews created in the Layout to the code you gave?

In the Designer you must add all the ImageViews and set their EventName parameter to the same name, in my code imgCard.
The advantage of the Designer is that you see directly the look of the layout.

If you look at the demo program in the FFT library I used different layouts for the diagrams calculated in the code, taking into account the different height/width ratios and different resolutions and this only in landscape mode.

Best regards.

nfordbscndrd · Feb 1, 2011

Klaus -- I've attached an app to be used as a shell or starting point for card games. It has routines for shuffling, dealing, and displaying 13 cards across the bottom. Click on a card to raise/lower or to play the card; if played, the card is removed and the remaining cards are re-centered across the bottom.

I'm going to put it on the "Share" forum, but I set it up for my 7", 840x480x1 device and did a 2nd layout for a 3" 480x320x1 emulator.

While the app seems to work okay, I would appreciate it if you could look at it before I put in "Share" to let me know where things could be done more efficiently. I used DipToCurrent throughout, but didn't see where that made any difference, so maybe I'm not using it right. BTW, I got an error when I pasted in your code with stuff like "60dip", which is why I changed to DipToCurrent.

klaus · Feb 3, 2011

Hi nfordbscndrd,

I had a look at your program and have following comments:
You were mixing up layouts and dip's (density independant pixel)
When you declare dimensions for Views you should use density independant pixel.
CardWidth = 71dip or CardWidth = DipToCurrent(71)

According to the device density the value of the variable will be different:
CardWidth = 71 with pixels density 1
CardWidth = 106 with pixels density 1.5

I tried the program on a 800/480 pixel emulator and the cards weren't at the right place.

You have a layout in the emulator with 800/480 pixels density 1, it should be 800/480 density 1.5 !
I changed in your program the calculations for the card positioning.

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]lv = [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]GetDeviceLayoutValues[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2].Width[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]offset = ((lv - [/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]20[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) / [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]13[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) - [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]4[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT] 
 
to
 
[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ScreenWidth = [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]GetDeviceLayoutValues[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2].Width[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]offset = (ScreenWidth - [/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]2[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] * LeftMargin - CardWidth) / CardNumber_1 [/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' offset = (lv - 20 - CardWidt) / 12 [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/SIZE][/FONT][/SIZE][/FONT]

I prefer working with variables rather than with numbers.
CardNumber = 13
CardNumber_1 = 12
LeftMargin = 10dip (10 pixels with density 1 and 15 pixels with density 1.5)

and

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]margin = [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]DipToCurrent[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]10[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] + (([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]12[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] - CardsLeft) * Offset)/[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]2[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT]
[/SIZE][/FONT]
to
 
[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]margin = LeftMargin + ((CardNumber_1 - CardsLeft) * Offset)/[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]2[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

and

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]m = [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]DipToCurrent[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](margin + (i * offset) )[/SIZE][/FONT][/SIZE][/FONT]
 
[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]to[/SIZE][/FONT][/SIZE][/FONT]
 
[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]m = margin + (i * offset) [/SIZE][/FONT][/SIZE][/FONT]

As the variable values are already in phyiscal pixels you shouldn't convert them once more. I suppose you needed it in your program because you defined a special layout with 800/480 density 1.

Attached the modified version.

Best regards.

nfordbscndrd · Feb 4, 2011

Your code works great, except that on my 800x480x1 Archos 70, the cards are up about mid-screen, so I added this code to try to move them back down to the bottom:

[Edit: I was in a hurry when I posted this and misspoke. The code below was not to move the cards to the bottom because on my 800x480x1 device with the layout I had done in Designer, they were already there. The code was just to calculate the cardTop, etc., so that I could position the cards vertically on other resolution devices.]

B4X:

   ScreenHeight = GetDeviceLayoutValues.Height
   Dim botMargin As Int
   botMargin = 10dip
   cardTop = ScreenHeight - CardHeight - botMargin
   Msgbox(cardTop & ", " & C1.Top, "")

The cards appear in the right place along the bottom of the screen, as layed out in Designer, but the MsgBox line above says that cardTop is 374 while C1.TOP (the layout value) is 320. How can that be? I mean, 374 is the correct calculated value, but I don't understand how it can say that the imageview.top is 320.

klaus · Feb 4, 2011

Are you shure that the botMargin value is the same in the Designer?
Are the resolutions in the Designer and in the device the same.
If not there can be a difference.

Best regards.

nfordbscndrd · Feb 4, 2011

klaus said:
Are you shure that the botMargin value is the same in the Designer?
Are the resolutions in the Designer and in the device the same.
If not there can be a difference.

Yes, the resolutions in the Designer and the device are the same (800x480x160x1). Below is a screen shot. See the bottom right corner.

If you still have the card game shell app, try adding this code near the start of Sub ShowHand:

B4X:

   ScreenHeight = GetDeviceLayoutValues.Height
   Dim botMargin As Int
   botMargin = 10dip
   cardTop = ScreenHeight - CardHeight - botMargin

where CardHeight is set to 96dpi in Sub Globals.

And after the line CardViews(i).Left = m, add the line [CardViews(i).Top=cardTop[/I].

Assuming ScreenHeight is 480 (which it is), then
cardTop = 480 - 96 - 10 = 374

But setting the tops of the card imageviews results in the cards being off the bottom of the screen, which makes no sense to me.

agraham · Feb 4, 2011

I don't think you are taking into account the height of the status and title bar. The available screen height is less than 480. Activity.Height will give you the actual size you have to play with (I think!).

nfordbscndrd · Feb 4, 2011

agraham said:
I don't think you are taking into account the height of the status and title bar. The available screen height is less than 480. Activity.Height will give you the actual size you have to play with (I think!).

That must be it. I should be using Activity.Width instead of Screen.Width also because the Archos 70 has a side menu bar that takes part of the screen.

I'll give it a try. Thanks.

klaus · Feb 4, 2011

If you want to have the layout on the 800x480 screen proportional to the layout on the 480x320 screen the resolutions should be:
480x320 density 1.0 and
800x480 density 1.5
otherwise you are wrong.
In your calulation dip doesn't do anything because the density is the same.
With a density of 1.5 the calculation:
cardTop = 480 - 96 - 10 = 374 would become
cardTop = 480 -1,5*96 - 1.5*10
cardTop = 480 - 144 - 15 = 321

Best regards.

nfordbscndrd · Feb 4, 2011

klaus said:
If you want to have the layout on the 800x480 screen proportional to the layout on the 480x320 screen the resolutions should be:
480x320 density 1.0 and
800x480 density 1.5
otherwise you are wrong.
In your calulation dip doesn't do anything because the density is the same.
With a density of 1.5 the calculation:
cardTop = 480 - 96 - 10 = 374 would become
cardTop = 480 -1,5*96 - 1.5*10
cardTop = 480 - 144 - 15 = 321

My Archos 70 device is 800x480x160 (1). I created an AVD of 800x480x240 (see the top of the AVD), but for some reason, Designer sees it as 480x320x240 (see the bottom right of the Designer). I guess that's why the title bar looks so huge.

Click event for ImageView arrray?

nfordbscndrd

Well-Known Member

Erel

B4X founder

nfordbscndrd

Well-Known Member

klaus

Expert

nfordbscndrd

Well-Known Member

klaus

Expert

nfordbscndrd

Well-Known Member

klaus

Expert

nfordbscndrd

Well-Known Member

klaus

Expert

nfordbscndrd

Well-Known Member

agraham

Expert

nfordbscndrd

Well-Known Member

klaus

Expert

nfordbscndrd

Well-Known Member