我已经找了好几天,找不到任何好的线索,我可以如何画一个泡沫或一个画9补丁图片是作为背景使用。我是个糟糕的艺术家--有人能帮我吗?我在stackoverflow上找到了最好的示例,但它是用objective c编写的如何在iphone上画“语音泡泡”?谢谢您
s6fujrry1#
你应该在某种图像编辑器中创建一个图像,然后用它创建一个9补丁。您可以使用9 patch方法设置希望内容所在的区域。然后,你可以简单地有一个文本视图,背景设置为你的9补丁。看看市面上一款名为bnter的应用程序吧,它使用语音气泡来显示与你要找的内容类似的对话。
nnt7mjpx2#
在这里,我已经创建了传入和传出的消息如下android使椭圆形的背景与聊天角落可画itemincoming.xml文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" app:cardElevation="1dp" android:layout_margin="2dp" android:layout_height="wrap_content"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="16dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hii how are you ? 11:37" android:paddingStart="16dp" android:paddingTop="10dp" android:paddingEnd="12dp" android:paddingBottom="8dp" android:textColor="@color/white" android:background="@drawable/testrect"/> <ImageView android:layout_marginTop="-1.5dp" android:layout_width="8dp" android:layout_height="16dp" android:layout_gravity="start" android:background="@drawable/testcorner" /> </LinearLayout> </RelativeLayout> </RelativeLayout>
testrect.xml文件
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#E26841" /> <corners android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp"/> </shape>
testcorner.xml文件
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <rotate android:fromDegrees="45" android:pivotX="135%" android:pivotY="15%" android:toDegrees="45" > <shape android:shape="rectangle"> <solid android:color="#E26841"/> </shape> </rotate> </item> </layer-list>
传出.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" app:cardElevation="1dp" android:layout_margin="2dp" android:layout_height="wrap_content"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="16dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end" android:text="11:37 Hii how are you ?" android:paddingStart="16dp" android:paddingTop="10dp" android:paddingEnd="12dp" android:paddingBottom="8dp" android:textColor="@color/txtcolor_commn" android:background="@drawable/testrecty"/> <ImageView android:layout_marginTop="-4.5dp" android:layout_marginRight="4.5dp" android:layout_width="8dp" android:layout_height="16dp" android:layout_gravity="end" android:rotation="90" android:background="@drawable/testcornery" /> </LinearLayout> </RelativeLayout> </RelativeLayout>
testrecty.xml文件
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/white" /> <corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp"/> </shape>
testcornery.xml文件
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <rotate android:fromDegrees="45" android:pivotX="135%" android:pivotY="15%" android:toDegrees="45" > <shape android:shape="rectangle"> <solid android:color="@color/white"/> </shape> </rotate> </item> </layer-list>
现在它看起来像这样
b4wnujal3#
以防万一有人需要另一种风格的泡泡给你tnx@vipin negichat\u receiver\u bubble.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--Shadow Layer--> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="100dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#01000000" /> </shape> </item> <!--===============--> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="100dp" /> <padding android:bottom="1px" /> <solid android:color="#09000000" /> </shape> </item> <!--===============--> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="100dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#10000000" /> </shape> </item> <!--===============--> <!--ForeGround--> <item android:right="10dp"> <shape android:shape="rectangle"> <solid android:color="@color/app_color" /> <corners android:bottomLeftRadius="0dp" android:radius="100dp" /> </shape> </item> </layer-list>
聊天室\发件人\ bubble.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--Shadow Layer--> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="100dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#01000000" /> </shape> </item> <!--===============--> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="100dp" /> <padding android:bottom="1px" /> <solid android:color="#09000000" /> </shape> </item> <!--===============--> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="100dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#10000000" /> </shape> </item> <!--===============--> <!--ForeGround--> <item android:right="10dp"> <shape android:shape="rectangle"> <solid android:color="@color/settings_bg" /> <corners android:bottomRightRadius="0dp" android:radius="100dp" /> </shape> </item>
像这样使用
<RelativeLayout android:gravity="center" android:id="@+id/chatLayout" android:background="@drawable/chat_receiver_bubble" //or @drawable/chat_sender_bubble android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:textSize="14sp" android:textColor="@color/text_colour" android:id="@+id/message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="" android:fontFamily="@font/regular"/> </RelativeLayout>
最终外观
1dkrff034#
这是我做的一个简单的演讲。希望对某人来说,这是一个正确的开始。使用这种可拉伸材料的视图需要至少70-80dp的高度和类似的最小宽度才能正确显示。
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:top="30dp"> <rotate android:fromDegrees="-45" android:pivotX="0%" android:pivotY="0%" android:toDegrees="0" > <shape android:shape="rectangle" > <solid android:color="#CCC" /> </shape> </rotate> </item> <item android:left="20dp"> <shape android:shape="rectangle" > <solid android:color="#CCC" /> <corners android:radius="5dp" /> </shape> </item> </layer-list>
android drawables在绘制任何稍微复杂的东西的可用性方面还有很多需要改进的地方。此版本如下所示:更新我又在研究xml语音气泡,对我2014年的解决方案有点不满意。2018年,我们推出了矢量绘图工具,可以提供比上述更好的解决方案。这里有一些更现代的选择。它们允许诸如小消息和透明之类的事情。语音\u bubble\u simple\u user.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" > <item android:bottom="@dimen/speech_bubble_tail" tools:width="100dp" tools:height="50dp"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_user"/> <corners android:topLeftRadius="@dimen/speech_bubble_corners" android:topRightRadius="@dimen/speech_bubble_corners" android:bottomRightRadius="0dp" android:bottomLeftRadius="@dimen/speech_bubble_corners"/> </shape> </item> <item android:width="@dimen/speech_bubble_tail" android:height="@dimen/speech_bubble_tail" android:gravity="bottom|right"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_tail" android:height="@dimen/speech_bubble_tail" android:viewportWidth="25.0" android:viewportHeight="25.0"> <path android:pathData="M25,25 25,0 0,0z" android:fillColor="@color/speech_bubble_user"/> </vector> </item> </layer-list>
语音\u bubble\u simple\u agent.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" > <item android:bottom="@dimen/speech_bubble_tail" tools:width="100dp" tools:height="50dp"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_agent"/> <corners android:topLeftRadius="@dimen/speech_bubble_corners" android:topRightRadius="@dimen/speech_bubble_corners" android:bottomLeftRadius="0dp" android:bottomRightRadius="@dimen/speech_bubble_corners"/> </shape> </item> <item android:width="@dimen/speech_bubble_tail" android:height="@dimen/speech_bubble_tail" android:gravity="bottom|left"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_tail" android:height="@dimen/speech_bubble_tail" android:viewportWidth="25.0" android:viewportHeight="25.0"> <path android:pathData="M0,25 25,0 0,0z" android:fillColor="@color/speech_bubble_agent"/> </vector> </item> </layer-list>
上面的两个看起来是这样的:(这些版本不太适合透明性,我不知道为什么下面的版本看起来很好。)语音\u bubble\u nine\u patch\u user.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" > <item android:left="@dimen/speech_bubble_corners" android:right="@dimen/speech_bubble_corners_plus_tail" android:bottom="@dimen/speech_bubble_spacing" tools:width="50dp" tools:height="50dp"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_user"/> </shape> </item> <item android:top="@dimen/speech_bubble_corners" android:bottom="@dimen/speech_bubble_corners_plus_tail" android:gravity="left" android:width="@dimen/speech_bubble_corners"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_user"/> </shape> </item> <item android:top="@dimen/speech_bubble_corners" android:bottom="@dimen/speech_bubble_corners_plus_tail" android:right="@dimen/speech_bubble_spacing" android:gravity="right" android:width="@dimen/speech_bubble_corners"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_user"/> </shape> </item> <item android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:bottom="@dimen/speech_bubble_spacing" android:gravity="bottom|left"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:viewportWidth="10.0" android:viewportHeight="10.0"> <path android:pathData="M0,0 A10,10 0 0,0 10,10 L10,0 Z" android:fillColor="@color/speech_bubble_user"/> </vector> </item> <item android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:right="@dimen/speech_bubble_spacing" android:gravity="top|right"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:viewportWidth="10.0" android:viewportHeight="10.0"> <path android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z" android:fillColor="@color/speech_bubble_user"/> </vector> </item> <item android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:gravity="top|left"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:viewportWidth="10.0" android:viewportHeight="10.0"> <path android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z" android:fillColor="@color/speech_bubble_user"/> </vector> </item> <item android:width="@dimen/speech_bubble_corners_plus_tail" android:height="@dimen/speech_bubble_corners_plus_tail" android:gravity="bottom|right"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners_plus_tail" android:height="@dimen/speech_bubble_corners_plus_tail" android:viewportWidth="150.0" android:viewportHeight="150.0"> <path android:pathData="M0,100 C7.67309143,100 14.1935201,100.346373 20.500756,99.0996492 C43.6628959,129.872031 94.1698247,146.306561 150.320843,150.792562 C113.168693,130.799632 87.2808993,98.5054948 81.0808824,68.6524321 C94.1277117,51.7595331 100,23.9957121 100,0 L0,0 L0,100 Z" android:fillColor="@color/speech_bubble_user"/> </vector> </item> </layer-list>
语音\u bubble\u nine\u patch\u agent.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" > <item android:left="@dimen/speech_bubble_corners_plus_tail" android:right="@dimen/speech_bubble_corners" android:bottom="@dimen/speech_bubble_spacing" tools:width="50dp" tools:height="50dp"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_agent"/> </shape> </item> <item android:top="@dimen/speech_bubble_corners" android:bottom="@dimen/speech_bubble_corners_plus_tail" android:left="@dimen/speech_bubble_spacing" android:gravity="left" android:width="@dimen/speech_bubble_corners"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_agent"/> </shape> </item> <item android:top="@dimen/speech_bubble_corners" android:bottom="@dimen/speech_bubble_corners_plus_tail" android:gravity="right" android:width="@dimen/speech_bubble_corners"> <shape android:shape="rectangle"> <solid android:color="@color/speech_bubble_agent"/> </shape> </item> <item android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:bottom="@dimen/speech_bubble_spacing" android:gravity="bottom|right"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:viewportWidth="10.0" android:viewportHeight="10.0"> <path android:pathData="M0,10 A10,10 0 0,0 10,0 L0,0 Z" android:fillColor="@color/speech_bubble_agent"/> </vector> </item> <item android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:gravity="top|right"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:viewportWidth="10.0" android:viewportHeight="10.0"> <path android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z" android:fillColor="@color/speech_bubble_agent"/> </vector> </item> <item android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:left="@dimen/speech_bubble_spacing" android:gravity="top|left"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners" android:height="@dimen/speech_bubble_corners" android:viewportWidth="10.0" android:viewportHeight="10.0"> <path android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z" android:fillColor="@color/speech_bubble_agent"/> </vector> </item> <item android:width="@dimen/speech_bubble_corners_plus_tail" android:height="@dimen/speech_bubble_corners_plus_tail" android:gravity="bottom|left"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="@dimen/speech_bubble_corners_plus_tail" android:height="@dimen/speech_bubble_corners_plus_tail" android:viewportWidth="150.0" android:viewportHeight="150.0"> <path android:pathData="M150,100 L150,0 L50,0 C50,11.9054549 52.5180742,22.2130322 55.2200144,32.2289993 C59.25,47.1679688 65.7054859,60.8615415 68.15625,65.5820312 C55.2200144,107.207031 41.7460938,127.800781 0,151 C61.5311854,147.539062 101.691406,129.675781 124.615295,97.6602593 C132.823321,99.8389881 141.106342,100 150,100 Z" android:fillColor="@color/speech_bubble_agent"/> </vector> </item> </layer-list>
上面两个是这样的:dimens.xml(两者都适用)
<dimen name="speech_bubble_corners">10dp</dimen> <dimen name="speech_bubble_corners_plus_tail">15dp</dimen> <dimen name="speech_bubble_spacing">5dp</dimen> <dimen name="speech_bubble_tail">25dp</dimen>
qyswt5oh5#
我知道现在来不及了。对于那些不想使用9-patch图像但又想从语音泡沫中投射阴影的人来说。这是我最接近whatsapp的演讲泡泡。感谢@toobsco42给出上述答案。干得好。。传入语音气泡:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--Shadow Layers--> <item> <rotate android:fromDegrees="-35" android:pivotX="0%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <corners android:radius="4dp"/> <padding android:bottom="1px" android:left="1px" android:right="1px"/> <solid android:color="#01000000" /> </shape> </rotate> </item> <item android:left="8dp"> <shape android:shape="rectangle"> <padding android:bottom="1px" android:left="1px" android:right="1px"/> <solid android:color="#01000000" /> <corners android:radius="8dp" /> </shape> </item> <!--===============--> <item> <rotate android:fromDegrees="-35" android:pivotX="0%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <corners android:radius="4dp"/> <padding android:bottom="1px" /> <solid android:color="#09000000" /> </shape> </rotate> </item> <item android:left="8dp"> <shape android:shape="rectangle"> <padding android:bottom="1px" /> <solid android:color="#09000000" /> <corners android:radius="8dp" /> </shape> </item> <!--===============--> <item> <rotate android:fromDegrees="-35" android:pivotX="0%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <corners android:radius="4dp"/> <padding android:bottom="1px" android:left="1px" android:right="1px"/> <solid android:color="#10000000" /> </shape> </rotate> </item> <item android:left="8dp"> <shape android:shape="rectangle"> <padding android:bottom="1px" android:left="1px" android:right="1px"/> <solid android:color="#10000000" /> <corners android:radius="8dp" /> </shape> </item> <!--ForeGround--> <item> <rotate android:fromDegrees="-35" android:pivotX="0%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <corners android:radius="4dp"/> <solid android:color="@color/colorWhite" /> </shape> </rotate> </item> <item android:left="8dp"> <shape android:shape="rectangle"> <solid android:color="@color/colorWhite" /> <corners android:radius="8dp" /> </shape> </item> </layer-list>
传出语音气泡:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--Shadow Layer--> <item> <rotate android:fromDegrees="40" android:pivotX="100%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#01000000" /> </shape> </rotate> </item> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#01000000" /> </shape> </item> <!--===============--> <item> <rotate android:fromDegrees="40" android:pivotX="100%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <padding android:bottom="1px" /> <solid android:color="#09000000" /> </shape> </rotate> </item> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <padding android:bottom="1px" /> <solid android:color="#09000000" /> </shape> </item> <!--===============--> <item> <rotate android:fromDegrees="40" android:pivotX="100%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#10000000" /> </shape> </rotate> </item> <item android:right="10dp"> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <padding android:bottom="1px" android:left="1px" android:right="1px" /> <solid android:color="#10000000" /> </shape> </item> <!--===============--> <!--ForeGround--> <item> <rotate android:fromDegrees="40" android:pivotX="100%" android:pivotY="0%" android:toDegrees="0"> <shape android:shape="rectangle"> <solid android:color="#CBEBFC" /> </shape> </rotate> </item> <item android:right="10dp"> <shape android:shape="rectangle"> <solid android:color="#CBEBFC" /> <corners android:radius="4dp" /> </shape> </item> </layer-list>
在布局中正确使用衬垫。我使用了这些值:
<TextView android:id="@+id/text_message_incoming" android:layout_width="0dp" android:layout_height="wrap_content" android:background="@drawable/bg_speech_bubble_incoming" android:lineSpacingExtra="2dp" android:paddingLeft="20dp" android:paddingTop="4dp" android:paddingRight="10dp" android:paddingBottom="10dp" android:text="Hi, How are you?" android:textColor="@color/colorBlack" android:textSize="13.5dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintWidth_max="wrap" app:layout_constraintWidth_percent="0.8" />
我的结果是这样的:
jgwigjjp6#
如果你正在创建一个聊天屏幕,你可能会想要实现一个传入的语音气泡和一个传出的语音气泡。我是这样做的:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <rotate android:fromDegrees="-45" android:pivotX="0%" android:pivotY="0%" android:toDegrees="0" > <shape android:shape="rectangle" > <solid android:color="@color/primary" /> </shape> </rotate> </item> <item android:left="16dp"> <shape android:shape="rectangle" > <solid android:color="@color/primary" /> <corners android:radius="4dp" /> </shape> </item> </layer-list>
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <rotate android:fromDegrees="45" android:pivotX="100%" android:pivotY="0%" android:toDegrees="0" > <shape android:shape="rectangle" > <solid android:color="@color/grey_500" /> </shape> </rotate> </item> <item android:right="16dp"> <shape android:shape="rectangle" > <solid android:color="@color/grey_500" /> <corners android:radius="4dp" /> </shape> </item> </layer-list>
6条答案
按热度按时间s6fujrry1#
你应该在某种图像编辑器中创建一个图像,然后用它创建一个9补丁。您可以使用9 patch方法设置希望内容所在的区域。然后,你可以简单地有一个文本视图,背景设置为你的9补丁。看看市面上一款名为bnter的应用程序吧,它使用语音气泡来显示与你要找的内容类似的对话。
nnt7mjpx2#
在这里,我已经创建了传入和传出的消息如下android使椭圆形的背景与聊天角落可画
itemincoming.xml文件
testrect.xml文件
testcorner.xml文件
传出.xml
testrecty.xml文件
testcornery.xml文件
现在它看起来像这样
b4wnujal3#
以防万一有人需要另一种风格的泡泡给你tnx@vipin negi
chat\u receiver\u bubble.xml
聊天室\发件人\ bubble.xml
像这样使用
最终外观
1dkrff034#
这是我做的一个简单的演讲。希望对某人来说,这是一个正确的开始。使用这种可拉伸材料的视图需要至少70-80dp的高度和类似的最小宽度才能正确显示。
android drawables在绘制任何稍微复杂的东西的可用性方面还有很多需要改进的地方。
此版本如下所示:
更新我又在研究xml语音气泡,对我2014年的解决方案有点不满意。2018年,我们推出了矢量绘图工具,可以提供比上述更好的解决方案。这里有一些更现代的选择。它们允许诸如小消息和透明之类的事情。
语音\u bubble\u simple\u user.xml
语音\u bubble\u simple\u agent.xml
上面的两个看起来是这样的:(这些版本不太适合透明性,我不知道为什么下面的版本看起来很好。)
语音\u bubble\u nine\u patch\u user.xml
语音\u bubble\u nine\u patch\u agent.xml
上面两个是这样的:
dimens.xml(两者都适用)
qyswt5oh5#
我知道现在来不及了。对于那些不想使用9-patch图像但又想从语音泡沫中投射阴影的人来说。这是我最接近whatsapp的演讲泡泡。感谢@toobsco42给出上述答案。
干得好。。
传入语音气泡:
传出语音气泡:
在布局中正确使用衬垫。我使用了这些值:
我的结果是这样的:
jgwigjjp6#
如果你正在创建一个聊天屏幕,你可能会想要实现一个传入的语音气泡和一个传出的语音气泡。我是这样做的:
形状\u bg \u incoming \u bubble.xml
形状\u bg \u outgoing \u bubble.xml