Chat Bubbles with Nativescript
Dave shows us how to make a simple chat UI with an iMessage type interface
-
-
<ListView.itemTemplate> <StackLayout id=""> <StackLayout visibility=""> <GridLayout width="100%" columns="*" rows="auto, 20" class="msg them"> <StackLayout orientation="horizontal"> <Image class="authorimg" width="30" height="30" stretch="aspectFill" verticalAlignment="top" src="" /> <Label text="" textWrap="true" verticalAlignment="top" class="msg_text"/> </StackLayout> <Label class="msg_timestamp" text="" verticalAlignment="top" row="1" colSpan="2" /> </GridLayout> </StackLayout> <StackLayout visibility=""> <GridLayout columns="*" rows="auto, 40" class="msg me"> <StackLayout orientation="horizontal" horizontalAlignment="right"> <Label text="" class="msg_text" textWrap="true" verticalAlignment="top" /> <Image class="authorimg" stretch="aspectFill" height="30" width="30" verticalAlignment="top" src="" col="1" /> </StackLayout> <Label class="msg_timestamp" text="" verticalAlignment="top" row="1" /> </GridLayout> </StackLayout> </StackLayout> </ListView.itemTemplate>
-
.msg { font-size: 14px; margin-top: 5px; margin-bottom: 20; } .me .msg_text { background-color: #30A9FF; color: white; padding: 8px; margin-left: 40px; border-radius: 15; } .them .msg_text { background-color: #e0e0e0; color: #333; padding: 7px; border-radius: 15; margin-right: 40px; } .authorimg { margin: 0px 5px 5px 5px; width: 30; height: 30; border-radius: 15; } .them .msg_timestamp { color: gray; font-size: 11px; margin-left: 40px; } .me .msg_timestamp { color: gray; font-size: 11px; margin-right: 40px; text-align: right; }
-
It took me forever to figure this one out, but with a little help from my friends (http://stackoverflow.com/questions/39236005/nativescript-make-label-span-width-of-its-content-then-wrap-at-a-max-width), I now have a beautiful chat UI. My struggle was figuring out a way to make a Label span only the width of its textual content, but wrap at the bounds of the UI. Turns out a StackLayout with orientation="horizontal" is the way to achieve this. And horizontalAlign="right" does the job for the blue (me) bubbles. Enjoy!