问题
I am trying to create a template for my chat bubbles in an android app i am currently working on. The end result should look something like this:
I tried it with Shapes, but i could not get the multiple layers right. I also tried a 9-patch image, but creating the 9-patch was as far as i got. I hade no clue as to how to use it, specifically with the avatar, message header and content placements.
Can anyone help out?
My knowledge on shapes is fairly limited, although, i think i know just enough to understand what you guys will be saying :)
回答1:
A 9 patch would be really easy. Here's a nice tutorial: Simple Guide to 9 Patch.
Just make the extension .9.png, not just .png.
Use it as a background for your ViewGroup (your View container), as in:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/row"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bubble_left"
android:layout_margin="8dp"
android:padding="8dp"
>
<!-- The User -->
<TextView
android:id="@+id/txtUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<!-- The Date -->
<TextView
android:id="@+id/txtDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtUser"
/>
<!-- The Message -->
<TextView
android:id="@+id/txt2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/txtDate"
/>
</RelativeLayout>
I left you free to choose the graphics you desire (to match your taste and not to ruin your fun).
Obviously, you might want to prepare a bubble for the left side and a bubble for the right side (or have bubbles with differently coloured corners), and swap them accordingly in your Java code.
来源:https://stackoverflow.com/questions/28506117/creating-a-chat-bubble-using-shapes-or-9-patch-image