2017년 6월 27일 화요일

How to show a list of names & when one is clicked it shows an image


Just dabble with AI2, have followed some tutorials. Wondering what the blocks would be to make something where I have a screen, I have a list of names on it, and when I click a name it shows that person's photo. Set up a vertical arrangement (2 rows, 1 column) with 2 horizontal scrolls inside. In these I'm putting buttons; each one has a person's name (ex: Joe, Bob, Tom).

Bestow your wisdom upon me, internet!

--
It might be more appropriate to use the ListView rather than try to build your own custom list mechanism. In the ListView.AfterSelection event you can then set the Image.Source property of an Image object to the right photo for the given selection.

-- 
Use a list of names with spinner, ListPicker or Listview
then after selecting a name, use that value to set the image in an image component that corresponds to the persons name

Either upload the images as assets to the app (a good way to start), or better have them online somewhere and call them in as needed

-- 
Ok, that makes sense. I was originally going to make a home screen with a list of names and then a screen for each name (but I guess having 40 screens is a bad idea). Can anyone maybe get me started on what the blocks would look like?

-- 
Ok, I've got those blocks and that gives me a list, with names, that I can choose from. Now how do I get selecting a name to bring up a specific image?

-- 
I've got this so far. The list itself works but I can't get it to show the image when I pick the name. Help?

-- 
Here is the easiest way to do it:

Name your images the same as your "Names" (Bob > Bob.png, Bill > Bill.png, etc.)
Upload images to your project as assets

Listpicker
Image
Label

Blocks like this
Aia attached

There are many many different ways to achieve the same thing!






-- 
Ok, Tim, you are awesome. I have a bunch of questions.


Why initialize global names to an empty list?
I was missing the top two blocks (the empty list one and the Screen initialize). Don't really know what they do for this app.
ListPicker before picking, I understand that. You want to call up the names.
ListPicker after picking. Yep, I want the label's text to be the name chosen from the list.

I don't understand setting the image's picture to join the list picker's selection. It looks like it means the list picker's selection is tied to that specific image that I put in. If I have an image for every name, how do I get those to show up too?

Also, I subbed in my own names and images (in .png) and when I ran the emulator the image didn't show.

-- 
I got it!!! The join is about the names being the name, so the block just says .png. I was thinking I had to put in the specific image name and then make twenty other blocks or something. Ok, I got it to work. Amazing!

So what are some of the other ways to achieve the same result? I'm on a roll now.

-- 
Nope, confused again.
I have a space between the first and last names. So I do the same in the image names (ie "Joe Schmo.png"). I uploaded it and it removed the spaces. So to get the image to show with the name, I have to alter the name in the list so it doesn't have the space either.
How can I preserve the space? I don't really want to have a dash or underscore on the name.

-- 
OK. AI2 does that to any filenames with spaces (it is a good thing really!)

To overcome this in your app:

Names in list:

Bob Builder
BIll Flowerpot
Ben Flowerpot

Names of image files as uploaded to assets

BobBuilder.png
BIllFlowerpot.png
BenFlowerpot.png

Blocks magic:

Using the replace block you simply remove the space between the first name and last name as returned by the Listpicker. As indicated above "segment" has a space in it (one press of spacebar). AI2 will replace this space with "nothing"

--  
Works like a charm! What if I wanted to have more text after the name, on the next line, for example. How would I tie a separate paragraph or phone numbers to each person?

-- 
In essence you have all the building blocks in place already to do this

Add another label below the "name" label
Create another list with your additional texts
Use the index feature of the lists to select the correct item to add to the new label, e.g Bobs' name = index 1 in the names list, Bob's description = index 1 of the additional texts list

Have a go!

-- 
In theory I understand. You use the index as a thing to tie two things in different lists together. I need help with blocks though. I see a bunch of options under lists involving indexes, and I'm not sure how I tie two lists together. I'm guessing it's not replace or remove but that's about it.

-- 
Also, I get this every time I try to start the emulator.

"Launch the aiStarter program on your computer and then try again."

No clue why. It worked a few days ago. I've tried launching aiStarter then connecting with the emulator. Tried resetting the connection, reopening aiStarter, etc. Pretty frustrating.

-- 
Never mind, killed adb.exe and it worked. Having a weird thing happen though. I made an app just like the first directory sort of thing, just with different names and photos. For some reason when I run the app and click the button to show the list, nothing comes up. The original app still works but I don't know why this one won't. Blocks are the same.

-- 
These blocks show how


--  
Select list item: Attempt to get item number 13 of a list of length 0: ()<br/><i>Note:</i>&nbsp;You will not see another error reported for 5 seconds.

-- 
Alright, apps are good to go! I want to let several people download the app, but for privacy I'm not putting it on google play. I was planning on putting it on a website hosted through wix. I downloaded my .apk but wix doesn't support uploading .apk files into the media storage there. (If I wanted to do the same with a pdf I would just upload the file to the media storage and then add it to the page. Then people could view or download it.)

How can I get this in some shareable form on my wix site? I can't use the qr code option because not everyone will be downloading the app in the 2 hour limit. Perhaps I could package it in a zip file? I'd rather not do this because everyone will have to open all of it on their phones.

-- 
Have you tried uploading the .apk file to your Google Drive account and marking it shared to any one with the URL?

Then send your friends the URL, and two hours later turn off the sharing.

-- 

댓글 없음:

댓글 쓰기