使用 Shapes 或 9-patch 图像创建聊天气泡 [英] Creating a chat bubble using Shapes or 9-patch image

问题描述

我正在尝试在我目前正在开发的 Android 应用中为我的聊天气泡创建模板.最终结果应如下所示:

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:

我用 Shapes 尝试过，但我无法正确处理多个图层.我也尝试了一个 9-patch 的图像，但创建 9-patch 就我得到的.我不知道如何使用它，尤其是头像、消息标题和内容位置.

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.

有人可以帮忙吗?

我对形状的了解相当有限，不过，我想我知道的足以理解你们会说什么:)

My knowledge on shapes is fairly limited, although, i think i know just enough to understand what you guys will be saying :)

推荐答案

一个 9 补丁真的很容易.这是一个不错的教程:9 的简单指南补丁.
只需将扩展名设为 .9.png，而不仅仅是 .png.
将其用作 ViewGroup(您的 View 容器)的背景，如下所示:

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).

显然，您可能希望为左侧准备一个气泡，为右侧准备一个气泡(或具有不同颜色角的气泡)，并在您的 Java 代码中相应地交换它们.

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.

这篇关于使用 Shapes 或 9-patch 图像创建聊天气泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！