如何使用文本和图像消息创建聊天活动

时间:2015-09-29 04:40:21

标签: android listview textview imageview chat

目前我正在开发一些消息传递应用程序。 服务器端可以带一些包含bb代码的文本:Check this out! :) [IMG]http://somedomain.com/image.jpg[/IMG] [IMG]http://domain.com/image3.jpg[/IMG]

为了解析微笑我使用这些代码:

public class BbCodedText {
private static final Factory spannableFactory = Spannable.Factory
        .getInstance();

private static final Map<Pattern, Integer> emoticons = new HashMap<Pattern, Integer>();

static {
    addPattern(emoticons, ":)", R.drawable.smile_face);
    addPattern(emoticons, ":))", R.drawable.smile_very_face);
    addPattern(emoticons, ":)))", R.drawable.joy_face);
}

private static void addPattern(Map<Pattern, Integer> map, String smile,
                               int resource) {
    map.put(Pattern.compile(Pattern.quote(smile)), resource);
}

public static boolean addSmiles(Context context, Spannable spannable) {
    boolean hasChanges = false;
    for (Map.Entry<Pattern, Integer> entry : emoticons.entrySet()) {
        Matcher matcher = entry.getKey().matcher(spannable);
        while (matcher.find()) {
            boolean set = true;
            for (ImageSpan span : spannable.getSpans(matcher.start(), matcher.end(), ImageSpan.class))
                if (spannable.getSpanStart(span) >= matcher.start()
                        && spannable.getSpanEnd(span) <= matcher.end())
                    spannable.removeSpan(span);
                else {
                    set = false;
                    break;
                }
            if (set) {
                hasChanges = true;

                Drawable emoji = ContextCompat.getDrawable(context, entry.getValue());
                emoji.setBounds(0,0, 30, 30);


                spannable.setSpan(
                        new ImageSpan(emoji, ImageSpan.ALIGN_BASELINE),
                        matcher.start(), matcher.end(),
                        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
                );
            }
        }
    }

    return hasChanges;
}

public static Spannable getSmiledText(Context context, CharSequence text) {
    Spannable spannable = spannableFactory.newSpannable(text);
    addSmiles(context, spannable);
    return spannable;
}
}

微笑很好:

enter image description here

但我如何更改我的适配器,活动或其他一些在聊天消息中使用图像,如下所示:

enter image description here

1 个答案:

答案 0 :(得分:3)

我使用自定义FlowLayout和addView函数解决了我的问题。

我已将FlowLayout添加到ListView项目的布局文件中:

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/groupDivider"
        android:id="@+id/messageContainer"
        android:orientation="vertical"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/messageBody"
            />

        <com.example.components.FlowLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/messageMediaContainer">
        </com.example.components.FlowLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            style="@style/SmallText"
            android:id="@+id/messageDate"
            />
    </LinearLayout>

Whan我解析邮件正文并用图片裁剪一些标签。并将一些代码写入我的Adapter

holder.mediaView = (FlowLayout) view.findViewById(R.id.messageMediaContainer);
        ...
        ...
holder.mediaView.removeAllViews();

// imagesSrc contains image URLs
for(int i=0; i<imagesSrc.size(); i++) {
   final String url = imagesSrc.get(i);
   ImageView img = new ImageView(this.context);

   FlowLayout.LayoutParams params = new FlowLayout.LayoutParams(100, 100);           
   img.setLayoutParams(params);
   img.setImageDrawable(null);
   img.setBackgroundColor(Color.rgb(255, 255, 255));

   holder.mediaView.addView(img);        

   // load image into imageView here
}

结果是: enter image description here

相关问题