Android开源BubbleLayout控件 - 一个可自定义样式的气泡提示

QuincyCalvi 8年前
   <p>一个可以自定义线条,颜色,箭头大小位置和方向的气泡提示。</p>    <h2>效果</h2>    <p><img src="https://simg.open-open.com/show/585b8a8fbddf4141eae68455dced6a38.gif"></p>    <h2>Gradle</h2>    <p>Add the dependency to your build.gradle.</p>    <pre>  <code class="language-xml">dependencies {      compile 'com.daasuu:BubbleLayout:1.0.0'  }  </code></pre>    <h2>基本使用</h2>    <p><img src="https://simg.open-open.com/show/077639db12b044e4dc114e1e82305d69.png"></p>    <p>Include the BubbleLayout widget in your layout.</p>    <pre>  <code class="language-xml"><com.daasuu.bl.BubbleLayout      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_marginTop="12dp"      android:padding="8dp"      app:bl_arrowDirection="right"      app:bl_arrowHeight="8dp"      app:bl_arrowPosition="16dp"      app:bl_arrowWidth="8dp"      app:bl_cornersRadius="6dp"      app:bl_strokeWidth="1dp">        <TextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginRight="4dp"          android:text="BubbleLayout"          android:textColor="@android:color/holo_red_dark" />    </com.daasuu.bl.BubbleLayout></code></pre>    <h2>属性</h2>    <p>There are several attributes you can set:</p>    <table>     <thead>      <tr>       <th>attr</th>       <th>description</th>      </tr>     </thead>     <tbody>      <tr>       <td>bl_arrowWidth</td>       <td>Width of the arrow, default 8dp</td>      </tr>      <tr>       <td>bl_arrowHeight</td>       <td>Height of the arrow, default 8dp</td>      </tr>      <tr>       <td>bl_arrowPosition</td>       <td>Position of the arrow, default 12dp</td>      </tr>      <tr>       <td>bl_cornersRadius</td>       <td>Corner radius of the BubbleLayout, default 0dp</td>      </tr>      <tr>       <td>bl_bubbleColor</td>       <td>Color of the BubbleLayout, default WHITE</td>      </tr>      <tr>       <td>bl_strokeWidth</td>       <td>Width of the stroke, default 0dp</td>      </tr>      <tr>       <td>bl_strokeColor</td>       <td>Color of the stroke, default GLAY</td>      </tr>      <tr>       <td>bl_arrowDirection</td>       <td>Drawing position of the arrow : 'left' or 'top' or 'right' or 'bottom', default 'left'</td>      </tr>     </tbody>    </table>    <h2>例子</h2>    <p><img src="https://simg.open-open.com/show/b256c006e6eda4b5cb7d3b2a0525245d.png"></p>    <pre>  <code class="language-xml"><com.daasuu.bl.BubbleLayout      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_marginTop="12dp"      android:padding="8dp"      app:bl_arrowDirection="top"      app:bl_arrowHeight="8dp"      app:bl_arrowPosition="12dp"      app:bl_arrowWidth="8dp"      app:bl_bubbleColor="@android:color/holo_blue_light"      app:bl_cornersRadius="8dp">        <LinearLayout          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:orientation="horizontal">            <ImageView              android:layout_width="20dp"              android:layout_height="20dp"              android:src="@mipmap/ic_launcher" />            <TextView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_gravity="center_vertical"              android:layout_marginLeft="4dp"              android:text="BubbleLayout"              android:textColor="@android:color/holo_red_dark" />        </LinearLayout>    </com.daasuu.bl.BubbleLayout></code></pre>    <p><img src="https://simg.open-open.com/show/c5d79ee1742797c1b6fb8d1e66e5741f.png"></p>    <pre>  <code class="language-xml"><com.daasuu.bl.BubbleLayout      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:padding="8dp"      app:bl_arrowDirection="left"      app:bl_arrowHeight="8dp"      app:bl_arrowPosition="16dp"      app:bl_arrowWidth="8dp"      app:bl_strokeWidth="1dp">        <TextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginRight="4dp"          android:text="BubbleLayout"          android:textColor="@android:color/holo_red_dark" />    </com.daasuu.bl.BubbleLayout></code></pre>    <p><img src="https://simg.open-open.com/show/18955a8669e8ee00a0e178f00db5021a.gif"></p>    <pre>  <code class="language-java">Button button = (Button) findViewById(R.id.btn_popup);    BubbleLayout bubbleLayout = (BubbleLayout) LayoutInflater.from(this).inflate(R.layout.layout_sample_popup, null);  PopupWindow popupWindow = BubblePopupHelper.create(this, bubbleLayout);    button.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View v) {          int[] location = new int[2];          v.getLocationInWindow(location);          popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0], v.getHeight() + location[1]);      }  });</code></pre>    <p>layout_sample_popup.xml</p>    <pre>  <code class="language-xml"><?xml version="1.0" encoding="utf-8"?>  <com.daasuu.bl.BubbleLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:padding="@dimen/activity_horizontal_margin"      app:bl_arrowDirection="top"      app:bl_arrowHeight="12dp"      app:bl_arrowPosition="16dp"      app:bl_arrowWidth="8dp"      app:bl_bubbleColor="@color/colorAccent"      app:bl_cornersRadius="2dp">        <TextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginRight="4dp"          android:text="BubbleLayout Popup"          android:textColor="@android:color/white" />    </com.daasuu.bl.BubbleLayout></code></pre>    <h2> </h2>