[转]Android_气泡效果

最近在看以前在eoe上收藏的一些源代码,准备将这些代码加上一些自己的注释,然后贴出来,方便自己日后查阅,和刚入门的人来学习。

今天先看一个气泡窗口,先看一下效果图和目录结构,然后再上代码

通过第一幅图,我们可以看到一个气泡窗口,这个窗口的结构是里面有2个TextView和1个气泡的背景,这个2个TextView放在了overlay_pop.xml文件中,气泡窗口是这个layout的背景,overlay_pop.xml的代码如下:

[java] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:background="@drawable/pub_pop_bg4"
  4. android:paddingLeft="10dp"
  5. android:paddingRight="10dp"
  6. android:layout_width="wrap_content"
  7. android:layout_height="wrap_content" >
  8. <TextView android:id="@+id/bubble_text"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:textSize="18dp"
  12. android:textColor="#000" />
  13. <!-- 我知道了 -->
  14. <TextView android:id="@+id/bubble_btn"
  15. android:gravity="right"
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:layout_below="@id/bubble_text"
  19. android:textSize="20dp"
  20. android:textColorHighlight="#2151E0"
  21. android:text=""
  22. android:textColor="#1A75B9" />
  23. </RelativeLayout>
  24. 这是实现功能的全部代码:
  25. public class TestBubbleActivity extends Activity {
  26. /** 全局屏幕的高和宽 */
  27. private static int SCREEN_WIDTH = 0 ;
  28. private static int SCREEN_HEIGHT = 0;
  29. /**气泡显示的详细内容*/
  30. private TextView tvBubContent = null;
  31. /**显示 我知道了 的提示*/
  32. private TextView tvKnow = null;
  33. /**气泡view 里面包含2个TextView*/
  34. private View bubbleView = null;
  35. /**气泡dialog*/
  36. private Dialog bubbleAlert = null;
  37. public void onCreate(Bundle savedInstanceState) {
  38. super.onCreate(savedInstanceState);
  39. setContentView(R.layout.main);
  40. getDimension();
  41. bubbleView = getLayoutInflater().inflate(R.layout.overlay_pop, null);
  42. tvKnow = (TextView)bubbleView.findViewById(R.id.bubble_btn);
  43. tvKnow.setText(Html.fromHtml("<u>"+"我知道了"+"</u>"));
  44. tvBubContent = (TextView)bubbleView.findViewById(R.id.bubble_text);
  45. tvBubContent.setText("上次程序异常退出,正在传输历史数据...");
  46. tvKnow.setOnClickListener(new View.OnClickListener(){
  47. @Override
  48. public void onClick(View v) {
  49. bubbleAlert.cancel();
  50. }
  51. });
  52. int tmpWidth = SCREEN_WIDTH/5*3;
  53. int tmpHeight =SCREEN_HEIGHT/8;
  54. //设置TextView宽度
  55. tvKnow.setMinWidth(tmpWidth);
  56. tvBubContent.setMaxWidth(tmpWidth);
  57. //以指定的样式初始化dialog
  58. bubbleAlert = new Dialog(this,R.style.bubble_dialog);
  59. Window win = bubbleAlert.getWindow();//获取所在window
  60. LayoutParams params = win.getAttributes();//获取LayoutParams
  61. params.x = -(SCREEN_WIDTH/8);//设置x坐标
  62. params.y = -tmpHeight;//设置y坐标
  63. params.width = tmpWidth;
  64. win.setAttributes(params);//设置生效
  65. bubbleAlert.setCancelable(false);
  66. bubbleAlert.setContentView(bubbleView);
  67. bubbleAlert.show();
  68. }
  69. /**
  70. * 获取屏幕尺寸
  71. */
  72. private void getDimension(){
  73. /** 获取屏幕的宽和高 */
  74. DisplayMetrics dm = new DisplayMetrics();
  75. getWindowManager().getDefaultDisplay().getMetrics(dm);
  76. SCREEN_WIDTH = dm.widthPixels;
  77. SCREEN_HEIGHT = dm.heightPixels;
  78. }
  79. }
时间: 2024-08-02 13:01:23

[转]Android_气泡效果的相关文章

css3实现气泡效果的聊天框

因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konqueror -ms- Trident Internet Explorer -moz- Mozilla firefox -o-* Presto opera  opera mobile -webkit- WebKit safari   chrome   android浏览器 没有添加css3样式之前原始页面如下

巧用border特性实现聊天气泡效果

利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class="bubble-tail"></div> </div> css: .bubble-container { height: 100px; line-height: 100px; margin-bottom: 2em; padding-left: 2em; ba

实现QQ聊天气泡效果

今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,下面是效果图: 下面说下关键地方的样式设置,然后贴出html和css代码(不多). 步骤1:布局 消息采用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容. 左侧消息,先清除浮动,然后设置 float:left,这样用户图标和消息内容就可以显示在同一行了,其中用户图标在左边,消息内容紧邻着用户图标. 右侧消息,同样先清除浮动,然后设置 float:right,这样用户图标和消息显示在

C#+ html 实现类似QQ聊天界面的气泡效果

1 /**定义两个人的头像*/ 2 Myhead = "<img src=qrc:/chatdemo/Msg/Head.png width='30px'heigth='30px'>"; 3 QString strHead = QString("C:/Users/tax10_000/Desktop/ql_184555_828078.jpg"); 4 otherhead = QString ("<img src=%1 width='30px'

html5 实现qq聊天的气泡效果

教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337 写的很好.自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱. 学到的知识是:clear:both: 清除当前定义的元素左右浮动 诸如: clear:left; //清除左浮动 clear:right; //清除右浮动 clear:both; //清除左右两边浮动 自己敲后的代码 @charset 'utf-8'; .con{ width:200px; heig

html中气泡头像效果

<style> /*头像气泡*/ .popHead { position: relative; /*border: 1px solid red;*/ width: 14vw; height: 33vw; overflow: hidden; left: 85vw; text-align: center; /*padding-left: 2.5vw;*/ } .popHead .scrollUl li { position: absolute; display: inline-block; top

效果不错的冒泡式提示信息框特效

纯css打造 预览demo:纯css3冒泡式提示信息框特效 css代码: <style type="text/css"> body{ background:#D6D3C9; color:#383835; font-family:Arial, Arial, Helvetica, sans-serif; } #bubblemenu li { display: inline; margin-left: 15px; cursor:pointer; } #bubblemenu li

纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)

<style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid yellow; /*以下属性可以是IE5兼容*/ font-size: 0px; line-heig

仿微信、QQ聊天界面私信对话效果

我们大家可能都看到过在自己使用社交Android软件的时候,会发现聊天页面的效果:有人说是气泡效果,也很像,是吧?那我们该怎么去实现那种效果呢?? 点击这里进入她的姊妹篇 点击这里下载源码 这个就是效果:有人物头像.聊天的当时时间.聊天内容.发送信息等:其实呢,她的思路很简单,我也弄了几个小时!恩,那我们就简单详细的聊聊吧!先看源代码:项目入口MainActivity.java: public class MainActivity extends Activity { private Linke