为skype样式的文本输入气泡创建布局

Question

在iPhone中，UIImage上有一个名为stretchableimagewithleftcapwidth的方法，可以用来创建一个可以伸展任何大小的聊天气泡（保持角落自然大小）。

我们在Android中似乎没有这个，所以我打算制作一个布局，然后我可以将其用作带有FrameLayout的背景图像。我现在遇到的麻烦是顶行由3列组成：左上角，可伸展顶部和右上角。如何让左上角和右上角保持固定大小（11dip）并告诉中间填充父级中的任何剩余空间？这就是我到目前为止所拥有的。

<?xml version="1.0" encoding="UTF-8"?>
    <merge xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/layout_bubble_container"
    android:orientation="vertical">    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="11dip"
        android:id="@+id/layout_bubble_toprow"
        android:orientation="horizontal">    
        <LinearLayout
            android:id="@+id/layout_top_leftCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="left|top">
            <ImageView
                android:id="@+id/bubble_top_leftcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_lefttop" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_top"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="top|center" >

            <ImageView
                android:id="@+id/bubble_top"
                android:layout_width="match_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bubble_top" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_top_rightCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="right|top" >

            <ImageView
                android:id="@+id/bubble_top_rightcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_righttop" />
        </LinearLayout>    
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="11dip"
        android:id="@+id/layout_bubble_middlerow"
        android:orientation="horizontal"
        android:background="@color/WHITE">    
        <LinearLayout
            android:id="@+id/layout_left"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:gravity="left"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/bubble_left"
                android:layout_width="11dip"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_left" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/layout_right"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="right" 
            android:layout_weight="1">

            <ImageView
                android:id="@+id/bubble_right"
                android:layout_width="11dip"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_right" />
        </LinearLayout>    
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="11dip"
        android:id="@+id/layout_bubble_bottomrow"
        android:orientation="horizontal">    
        <LinearLayout
            android:id="@+id/layout_bottom_leftCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="left|top">
            <ImageView
                android:id="@+id/bubble_bottom_leftcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_leftbottom" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_bottom"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="top|center" >

            <ImageView
                android:id="@+id/bubble_bottom"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/bubble_bottom" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_bottom_rightCorner"
            android:layout_width="11dip"
            android:layout_height="fill_parent"
            android:gravity="right|top" >

            <ImageView
                android:id="@+id/bubble_bottom_rightcorner"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/bubble_rightbottom" />
        </LinearLayout>    
    </LinearLayout>
</LinearLayout>

如果这有帮助，这是eclipse中的布局树。

以下是eclipse中布局编辑器中呈现的内容。请注意顶部和底部行没有适当拉伸。

提前致谢。

Answer 1

我还需要在我的应用程序中使用聊天气泡类型的视图，所以我使用了9个可绘制的补丁作为背景图像，它运行正常。

检查这个问题：

Why do 9-patch graphics size correctly in the emulator but not on a phone?

还有这个链接：

http://warting.se/2012/06/04/chat-bubbles-in-android/