BubbleView：实践指南

如果把BubbleView放进候选清单，不能只看热度；它的定位是适用于 Android 的带有箭头的 control/container，可以通过代码或 XML 布局文件完全自定义。一旦进入软件开发环节，依赖、接口和异常处理往往比主路径更影响采用会直接影响交付，这也是我最关心的风险。我建议在隔离分支完成一个可回滚的小任务，重点记录安装步骤、接口契约、测试结果和错误信息，再与现有方案比较。我会把它列入需要可检查开发流程而非单次演示的工程师的候选清单，而不是仅凭项目介绍直接纳入生产。

BubbleView 适用于 Android

中文版README

BubbleView 是适用于 Android 的带有箭头的 control/container，可以通过代码或 XML 布局文件完全自定义。

• 箭头方向：上、下、左、右或无
• 箭头应该自动指向其目标
• 可定制的箭头属性：大小和位置
• 可定制的气泡属性：颜色、填充、边框和角半径
• 气泡可以是纯文本视图(BubbleTextView)或布局容器(BubbleXxxLayout)

下载 将 jcenter() 添加到您的项目级 build.gradle

allprojects {
    repositories {
        jcenter()
    }
}

将 compile 'com.cpiz.bubbleview:bubbleview:{X.Y.Z}' 添加到您的模块级 build.gradle（请参阅 版本 中的 X.Y.Z）

dependencies {
    ...
    compile 'com.cpiz.bubbleview:bubbleview:{X.Y.Z}'
}

指定箭头方向 您可以使用 app:bb_arrowDirection 属性来指定箭头的方向。它的值可以是：左、上、右、下或无。箭头将放置在气泡相应边缘的中间。

<com.cpiz.android.bubbleview.BubbleTextView
    android:id="@+id/bb1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@id/iv1"
    android:padding="6dp"
    android:text="ArrowRight"
    android:textColor="@android:color/white"
    app:bb_arrowDirection="Right"
    app:bb_cornerRadius="4dp"/>

将箭头指向特定目标 您可以使用 app:bb_arrowTo 属性来指定目标视图的 id。箭头的方向将自动计算并指向目标的中心。

<RelativeLayout
    android:id="@+id/group2"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:layout_marginBottom="30dp"
    android:background="#bdc3c7"
    android:padding="10dp">

    <ImageView
        android:id="@+id/iv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_margin="4dp"
        android:src="@android:drawable/ic_btn_speak_now"
        android:tint="#FFFFFF"/>

    <com.cpiz.android.bubbleview.BubbleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/iv2"
        android:layout_toLeftOf="@id/iv2"
        android:padding="6dp"
        android:text="Get your apps ready for Android 6.0 Marshmallow! "
        android:textColor="@android:color/white"
        app:bb_arrowTo="@id/iv2"/>
</RelativeLayout>

定制风格

<com.cpiz.android.bubbleview.BubbleTextView
    android:id="@+id/big4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/big2"
    android:layout_margin="4dp"
    android:layout_toRightOf="@id/big3"
    android:padding="30dp"
    android:text="WithBorder"
    android:textColor="@android:color/white"
    app:bb_arrowDirection="Down"
    app:bb_arrowHeight="10dp"
    app:bb_arrowOffset="30dp"
    app:bb_arrowWidth="40dp"
    app:bb_borderColor="@color/colorPrimary"
    app:bb_borderWidth="6dp"
    app:bb_cornerBottomLeftRadius="0dp"
    app:bb_cornerBottomRightRadius="10dp"
    app:bb_cornerTopLeftRadius="0dp"
    app:bb_cornerTopRightRadius="4dp"
    app:bb_fillColor="@android:color/holo_red_light"
    app:bb_fillPadding="4dp"/>

使用它作为布局容器

除了使用 BubbleTextView 显示文本外，还可以使用

• BubbleRelativeLayout
• BubbleLinearLayout
• BubbleFrameLayout

作为气泡布局容器并将自定义内容放入其中。

弹出窗口

可以使用 BubblePopupWindow 来包裹气泡，并显示为弹出窗口。

• 支持触摸外部关闭
• 支持触摸内部关闭
• 支持及时

    View rootView = LayoutInflater.from(this).inflate(R.layout.simple_text_bubble, null);
    BubbleTextView bubbleView = (BubbleTextView) rootView.findViewById(R.id.popup_bubble);
    window = new BubblePopupWindow(rootView, bubbleView);
    window.setCancelOnTouch(true);
    window.setCancelOnTouchOutside(true);
    window.setCancelOnLater(3000);
    window.showArrowTo(v, BubbleStyle.ArrowDirection.Left);

杂项。

• 调用BubbleView、setBackground/setBackgroundColor等方法会导致样式设置无效。

执照 Copyright 2017 Cpiz

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.