##浮动框泡泡组件 ##
浮动框泡泡组件 是一个由用户点击view而触发一个浮动提示框,此浮动框泡泡组件是由矩形框和三角形箭头组成
git clone https://github.com/mindpin/PopTips
cd PopTips
mvn clean install
在maven项目,pom.xml添加以下依赖引用:
<dependency>
<groupId>com.mindpin.superpoptips</groupId>
<artifactId>superpoptips</artifactId>
<version>0.1.0-SNAPSHOT</version>
<type>apklib</type>
</dependency>
请参考示例
##所涉及到的类API说明如下:##
此类是浮动框组件的父类,通过show的方法可以将浮动框组件类PopTipView添加显示到界面上
PopTipRelativeLayout.java
public class PopTipRelativeLayout extends RelativeLayout {
public PopTipRelativeLayout(final Context context) {
super(context);
}
public PopTipRelativeLayout(final Context context, final AttributeSet attrs) {
super(context, attrs);
}
public PopTipRelativeLayout(final Context context, final AttributeSet attrs, final int defStyle) {
super(context, attrs, defStyle);
}
//显示浮动框
public void show(final View view) {
addView(view);
}
}
PopTipView类是实现浮动框泡泡组件最主要的类
PopTipView.java
public class PopTipView extends LinearLayout implements
ViewTreeObserver.OnPreDrawListener, View.OnClickListener {
//初始化类,并把可点击view传进来
public PopTipView(final Context context, View clickableView) {
super(context);
this.clickableView = clickableView;
init();
}
//三角箭头相对于方框的位置,一共十二种
enum ArrowLocation {
left_top, // 三角箭头位于方框的左侧上方
left_bottom, // 三角箭头位于方框的左侧下方
right_top, // 三角箭头位于方框的右侧上方
right_bottom, // 三角箭头位于方框的右侧下方
top_left, // 三角箭头位于方框的上侧左方
top_right, // 三角箭头位于方框的上侧右方
bottom_left, // 三角箭头位于方框的下侧左方
bottom_right, // 三角箭头位于方框的下侧右方
top, // 三角箭头位于方框的上侧居中
bottom, // 三角箭头位于方框的下侧居中
left, // 三角箭头位于方框的左侧居中
right; // 三角箭头位于方框的右侧居中
}
// 设置基准点相对于 clickableView 左上角的偏移量
// 以此来计算基准点的位置
// 基准点即浮动框显示时,三角形箭头尖端所处的位置
// 偏移量的单位是 dp
//如果传的值为0,那么就用默认位置
public void set_arrow_point_offset(int offset_x, int offset_y) {
offsetX = DensityUtil.dip2px(getContext(), offsetX);
offsetY = DensityUtil.dip2px(getContext(), offsetY);
this.offsetX = offset_x;
this.offsetY = offset_y;
}
// 三角箭头相对于方框的位置
// 从 arrowLocation 的十二种之中选一种
public void set_arrow_location(ArrowLocation arrowLocation) {
this.arrowLocation = arrowLocation;
};
// 当确定了基准点的位置,和三角形箭头相对于方框的位置时
// 也就同时确定了三角形箭头和方框的位置
// 举例来说,当 arrowLocation 指定为 left_top 时
// 三角箭头位于方框的左侧上方,而三角形箭头的尖端位于基准点
// 那么三角形和方框应该位于基准点的右侧偏下
// 设置方框矩形宽度(单位为dp)
public void set_width(int width) {
width = DensityUtil.dip2px(getContext(), width);
this.bodyWidth = width;
}
// 设置方框矩形高度(单位为dp)
public void set_height(int height) {
height = DensityUtil.dip2px(getContext(), height);
this.bodyHeight = height;
}
// 设置三角形箭头边的长度(单位为dp)
// 当 arrowLocation 是 top, bottom, left, right 时,该值为直角等腰三角形最长边的高
// 当 arrowLocation 是其他的八个斜角值时,该值为直角三角形的直角边长
public void set_arrow_width(int arrowWidth) {
arrowWidth = DensityUtil.dip2px(getContext(), arrowWidth);
this.arrowWidth = arrowWidth;
}
// 以 int 表示颜色
public void set_backgroud(final int bg_color) {
mArrowView.setColor(bg_color);
mContentHolder.setBackgroundColor(bg_color);
}
//以十六进制的字符串来表示颜色
public void set_backgroud(String bg_color) {
set_backgroud(Color.parseColor(bg_color));
}
/**
* 矩形框内默认的text
*/
public void set_pop_text(String text) {
mTextContent.setText(text);
}
// 注册浮动框点击事件
public void set_pop_click_listener(
final OnPopTipViewClickedListener listener) {
mListener = listener;
}
// 设置浮动框上要显示的内容子 View
public void set_content_view(View view) {
mContentHolder.removeAllViews();
mContentHolder.addView(view);
}
//隐藏浮动框
public void hide() {
//浮动框的消失,启动消失动画
}
###使用方法:###
- 在自己的布局文件中增加com.mindpin.superpoptips.PopTipRelativeLayout设置宽和高为 match_parent, 并确保这个view处于最上层。
- 在代码中找到这个PopTipRelativeLayout类,通过show的方法把PopTipView显示出来,在show之前可以设置浮动框的宽高等属性。
###例子:###
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/activity_main_redtv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
//在布局文件中加入PopTipRelativeLayout,并确保在屏幕的最上层
<com.mindpin.superpoptips.PopTipRelativeLayout
android:id="@+id/activity_main_poptipframelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
GaoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取PopTipRelativeLayout对象
PopTipRelativeLayout mPopTipFrameLayout = (PopTipRelativeLayout)
findViewById(R.id.activity_main_poptipframelayout);
//新建一个PopTipView 对象,并传进去一个可点击View
mRedPopTipView = new PopTipView(this, findViewById(R.id.activity_main_redtv));
//设置浮动框点击事件
mRedPopTipView.set_pop_click_listener(this);
mRedPopTipView.set_width(100);
mRedPopTipView.set_height(50);
//设置三角形的位置
mRedPopTipView.set_arrow_location(ArrowLocation.top_left);
//设置三角形的长度
mRedPopTipView.set_arrow_width(20);
mRedPopTipView.set_arrow_point_offset(0, 0);
// mRedPopTipView.setArrowPointOffset(50,50);
mRedPopTipView.set_pop_text("A beautiful Button");
mRedPopTipView.set_backgroud(getResources().getColor(R.color.holo_red));
//把mRedPopTipView对象加入PopTipRelativeLayout中显示出来
mPopTipFrameLayout.show(mRedPopTipView);