创建一个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/