BGATransformersTip-Android

Android universal PopupWindow, no longer need to find UI widgets to cut.9 images, roughly save you 30 minutes of development time

Function is introduced

  • Supports configuration of floating window display at any position of anchor control
  • Support for configuration indicating arrows (whether to display, display in any position of floating window, height, rounded corner, color)
  • Supports floating window background color
  • Support to configure float window border shadow (whether to show, width, color)
  • Supports setting whether areas other than floating Windows are darkened
  • The floating window will be automatically moved to the screen area after it exceeds the screen area
  • For text-only floating Windows, use SimpleTextTip instead of writing a layout file

rendering

Directions for use

Add Gradle dependencies

dependencies {
    implementation 'cn.bingoogolapple:bga-transformerstip:latestVersion@aar'
}
Copy the code

Method 1: Set the floating window position in the Java code and the floating window background and arrow position in the layout file

  • The advantage of this approach is that you can view the preview effect in advance, which improves the development efficiency

  • Add a floating window layout file and set the floating window background and arrow position in the layout file
<?xml version="1.0" encoding="utf-8"? >
<cn.bingoogolapple.transformerstip.view.TransformersTipLinearLayout 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:gravity="center_vertical"
    android:orientation="horizontal"
    app:ad_arrowExtraOffsetX="0dp"
    app:ad_arrowExtraOffsetY="0dp"
    app:ad_arrowGravity="to_top_center"
    app:ad_arrowHeight="6dp"
    app:ad_bgColor="@android:color/black"
    app:ad_radius="4dp"
    app:ad_shadowColor="# 33000000"
    app:ad_shadowSize="6dp">

    <TextView
        android:id="@+id/tv_tip_content"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="B -> bingo\nG googol\nA -> apple\nBGA -> bingoogolapple"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/tv_tip_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="6dp"
        android:layout_gravity="top"
        android:padding="4dp"
        android:text="x"
        android:textColor="@android:color/white" />
</cn.bingoogolapple.transformerstip.view.TransformersTipLinearLayout>
Copy the code
  • Set the float window position in your Java code
new TransformersTip(anchorView, R.layout.layout_demo1_tip) {
    @Override
    protected void initView(View contentView) {
        // Click the customization button in the floating window to close the floating window
        contentView.findViewById(R.id.tv_tip_close).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) { dismissTip(); }}); } } .setTipGravity(TipGravity.TO_BOTTOM_CENTER)// Sets the float window display position relative to the anchor control
        .setTipOffsetXDp(0) // Set the offset of the floating window on the x axis
        .setTipOffsetYDp(-6) // Set the offset of the floating window on the y axis

        .setBackgroundDimEnabled(true) // Set whether to allow the background of the floating window to darken
        .setDismissOnTouchOutside(false) // Set whether to automatically close the floating window when clicking on the floating window

        .show(); // Display floating window
Copy the code

Method 2: Set float window position, float window background and arrow position in Java code

  • Add floating window layout file
<?xml version="1.0" encoding="utf-8"? >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_tip_content"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="B -> bingo\nG googol\nA -> apple\nBGA -> bingoogolapple"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/tv_tip_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="6dp"
        android:layout_gravity="top"
        android:padding="4dp"
        android:text="x"
        android:textColor="@android:color/black" />
</LinearLayout>
Copy the code
  • Set float window position, float window background, arrow position in Java code
new TransformersTip(anchorView, R.layout.layout_demo2_tip) {
    @Override
    protected void initView(View contentView) {
        // Click the customization button in the floating window to close the floating window
        contentView.findViewById(R.id.tv_tip_close).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) { dismissTip(); }}); } } .setArrowGravity(ArrowGravity.TO_BOTTOM_CENTER)// Set the arrow position relative to the floating window
        .setBgColor(Color.WHITE) // Set the background color
        .setShadowColor(Color.parseColor("# 33000000")) // Set the shadow color
        .setArrowHeightDp(6) // Set the arrow height
        .setRadiusDp(4) // Set the floating window fillet radius
        .setArrowOffsetXDp(0) // Set the offset of the arrow on the x axis
        .setArrowOffsetYDp(0) // Set the offset of the arrow on the y axis
        .setShadowSizeDp(6) // Set the shadow width

        .setTipGravity(TipGravity.TO_TOP_CENTER) // Sets the float window display position relative to the anchor control
        .setTipOffsetXDp(0) // Set the offset of the floating window on the x axis
        .setTipOffsetYDp(6) // Set the offset of the floating window on the y axis

        .setBackgroundDimEnabled(false) // Set whether to allow the background of the floating window to darken
        .setDismissOnTouchOutside(false) // Set whether to automatically close the floating window when clicking on the floating window

        .show(); // Display floating window
Copy the code

Method 3: For text-only floating Windows, you can use SimpleTextTip instead of writing a layout file

new SimpleTextTip(anchorView)
        .setTextContent("Applies to text only float window \n does not write layout file \n sets text content properties in Java code") // Set the float window text content
        .setTextPaddingDp(12) // Set the spacing between the text and the float window border
        .setTextColor(Color.BLACK) // Set the text color
        .setTextSizeSp(14) // Set the text size
        .setTextGravity(Gravity.CENTER) // Set the text to its mode
        .setLineSpacingExtraDp(4) // Set the line spacing

        .setArrowGravity(ArrowGravity.TO_BOTTOM_ALIGN_START) // Set the arrow position relative to the floating window
        .setBgColor(Color.WHITE) // Set the background color
        .setShadowColor(Color.parseColor("# 33000000")) // Set the shadow color
        .setArrowHeightDp(6) // Set the arrow height
        .setRadiusDp(4) // Set the floating window fillet radius
        .setArrowOffsetXDp(0) // Set the offset of the arrow on the x axis
        .setArrowOffsetYDp(0) // Set the offset of the arrow on the y axis
        .setShadowSizeDp(6) // Set the shadow width

        .setTipGravity(TipGravity.TO_TOP_ALIGN_START) // Sets the float window display position relative to the anchor control
        .setTipOffsetXDp(0) // Set the offset of the floating window on the x axis
        .setTipOffsetYDp(6) // Set the offset of the floating window on the y axis

        .setBackgroundDimEnabled(false) // Set whether to allow the background of the floating window to darken
        .setDismissOnTouchOutside(true) // Set whether to automatically close the floating window when clicking on the floating window

        .show(); // Display floating window
Copy the code

TipGravity instructions

  • Set the float window display position relative to the anchor control with TipGravity. XXXX

ArrowGravity instructions

  • Use ArrowGravity. XXXX to set the arrow position relative to the float window

TransformersTipLinearLayout and TransformersTipRelativeLayout custom properties

<declare-styleable name="ArrowDrawable">
    <! -- Background color -->
    <attr format="reference|color" name="ad_bgColor" />
    <! -- Shadow color -->
    <attr format="reference|color" name="ad_shadowColor" />
    <! -- Arrow height -->
    <attr format="dimension" name="ad_arrowHeight" />
    <! -- Shadow width -->
    <attr format="dimension" name="ad_shadowSize" />
    <! -- Fillet radius of floating window -->
    <attr format="dimension" name="ad_radius" />
    <! -- Offset of the arrow on the x axis -->
    <attr format="dimension" name="ad_arrowExtraOffsetX" />
    <! -- Offset of the arrow on the y axis -->
    <attr format="dimension" name="ad_arrowExtraOffsetY" />
    <! -- Arrow position relative to floating window -->
    <attr name="ad_arrowGravity">
        <flag name="to_top_align_start" value="65" />
        <flag name="to_top_center" value="129" />
        <flag name="to_top_align_end" value="257" />

        <flag name="align_top_to_start" value="34" />
        <flag name="align_top_to_end" value="514" />

        <flag name="center_to_start" value="36" />
        <flag name="center_to_end" value="516" />

        <flag name="align_bottom_to_start" value="40" />
        <flag name="align_bottom_to_end" value="520" />

        <flag name="to_bottom_align_start" value="80" />
        <flag name="to_bottom_center" value="144" />
        <flag name="to_bottom_align_end" value="272" />
    </attr>
</declare-styleable>
Copy the code

Click on GitHub to view the project source code