The pop-up PopupWindow in the imitation qq space displays more operation results according to the position, popupwindow

The pop-up PopupWindow in the imitation qq space displays more operation results according to the position, popupwindow

When we open the QQ space, an arrow button is displayed, and the pop-up PopupWindow will be displayed at or below the arrow based on the position change. It is much better than the ordinary PopupWindow playing in the middle of the screen.

First look at the QQ space:

This effect can be achieved in several steps.

1. The first step is to customize the PopupWindow and the implemented style. This inherits the custom Layout of PopupWindow and is easy to implement.

2. Get the position of the click button, and display the PopupWindow above or below the control based on whether the position is in the middle or bottom of the screen.

3. Adaptation problem, because the operation list on the PopupWindow is dynamic, You need to customize the listView

4. blur the animation effect + background

Through step analysis, we can clearly understand what we want to do. Let's start with step 1.

The following is a custom PopupWindow implementation result.

1. overwrite the listView and re-calculate the height (it is also used to solve the problem of displaying only one row of ScrollView nested listView)

public class MyListView extends ListView {
    public MyListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyListView(Context context) {
        super(context);
    }

    public MyListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST));
    }
}

2. Customize the layout file of PopupWindow

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="right">
    <ImageView
        android:id="@+id/arrow_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="28dp"
        android:src="@drawable/arrow_up_white"
        android:visibility="visible"/>
    <com.widget.MyListView
        android:id="@+id/lv_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/normal_margin8"
        android:layout_marginTop="-1dp"
        android:layout_marginBottom="-1dp"
        android:dividerHeight="0dp"
        android:layout_marginLeft="@dimen/normal_margin8"
        android:layout_marginRight="@dimen/normal_margin8"
        android:scrollbars="none"
        android:background="@drawable/custom_white"
        android:divider="@null"></com.widget.MyListView>
    <ImageView
        android:id="@+id/arrow_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="28dp"
        android:src="@drawable/arrow_down_white"
        android:visibility="visible"/>
</LinearLayout>

2. Pop-up and disappear animations in PopupWindow

popshow_operation_anim_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="90%"
        android:pivotY="0%"
        android:fillAfter="false"
        android:duration="300" >
    </scale>
</set>

popshow_operation_anim_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="90%"
        android:pivotY="100%"
        android:fillAfter="false"
        android:duration="250" >
    </scale>
</set>

Disappear animation can be defined by yourself.

3. Rewrite the PopupWindow.

Public class CustomOperationPopWindow extends PopupWindow {
Private Context context;
Private View conentView;
Private View backgroundView;
Private Animation anim_backgroundView;
Private MyListView listView;
Private TypeSelectPopuAdapter selectAdapter;
ImageView arrow_up, arrow_down;
List <TypeSelect> typeSelectlist = new ArrayList <> ();
Int [] location = new int [2];
Private OnItemListener onItemListener;
Private AdapterView. OnItemClickListener onItemClickListener;

Public interface OnItemListener {
Public void OnItemListener (int position, TypeSelect typeSelect );
}

;

Public void setOnItemMyListener (OnItemListener onItemListener ){
This. onItemListener = onItemListener;
}

Public CustomOperationPopWindow (Context context ){
This. context = context;
InitView ();
}

Public CustomOperationPopWindow (Context context, List <TypeSelect> typeSelectlist ){
This. context = context;
This. typeSelectlist = typeSelectlist;
InitView ();
}

Private void initView (){
This. anim_backgroundView = AnimationUtils. loadAnimation (context, R. anim. alpha_show_anim );
LayoutInflater inflater = (LayoutInflater) context
. GetSystemService (Context. LAYOUT_INFLATER_SERVICE );
This. conentView = inflater. inflate (R. layout. view_operation_popupwindow, null );
// Set the View of SelectPicPopupWindow
This. setContentView (conentView );
// Set the width of the SelectPicPopupWindow pop-up form
This. setWidth (LayoutParams. MATCH_PARENT );
// Set the height of the SelectPicPopupWindow pop-up form
This. setHeight (LayoutParams. WRAP_CONTENT );
// Set the SelectPicPopupWindow pop-up window and click
This. setFocusable (true );
This. setOutsideTouchable (true );
// Refresh status
This. update ();
// Instantiate a ColorDrawable color that is translucent
ColorDrawable dw = new ColorDrawable (0, 0000000000 );
// Click the back key and remove it from other locations. If this parameter is set, OnDismisslistener can be triggered, and other control changes can be set.
This. setBackgroundDrawable (dw );
// Set SelectPicPopupWindow to display the form animation effect.
This. setAnimationStyle (R. style. operation_popwindow_anim_style_up );
This. listView = (MyListView) conentView. findViewById (R. id. lv_list );
This. arrow_up = (ImageView) conentView. findViewById (R. id. arrow_up );
This. arrow_down = (ImageView) conentView. findViewById (R. id. arrow_down );

// Set the adapter
This. selectAdapter = new TypeSelectPopuAdapter (context, typeSelectlist,
R. layout. item_operation_popu );
This. listView. setAdapter (selectAdapter );
This. listView. setOnItemClickListener (new AdapterView. OnItemClickListener (){
@ Override
Public void onItemClick (AdapterView <?> Parent, View view, int position, long id ){
If (isShowing ()){
Dismiss ();
}
OnItemListener. OnItemListener (position, typeSelectlist. get (position ));
}
});
This. setOnDismissListener (new OnDismissListener (){
@ Override
Public void onDismiss (){
If (backgroundView! = Null ){
BackgroundView. setVisibility (View. GONE );
}
}
});
}

// Set Data
Public void setDataSource (List <TypeSelect> typeSelectlist ){
This. typeSelectlist = typeSelectlist;
This. selectAdapter. notifyDataSetChanged ();
}


/**
* No translucent background display popupWindow
*
* @ Param
*/
Public void showPopupWindow (View v ){
V. getLocationOnScreen (location); // obtain the coordinates of the widget.
// Obtain its own length, width, and height
ConentView. measure (View. MeasureSpec. UNSPECIFIED, View. MeasureSpec. UNSPECIFIED );
If (location [1]> MainApplication. SCREEN_H/2 + 100) {// MainApplication. SCREEN_H indicates the screen height. You can write this method by yourself.
This. setAnimationStyle (R. style. operation_popwindow_anim_style_up );
Arrow_up.setVisibility (View. GONE );
Arrow_down.setVisibility (View. VISIBLE );
This. showAtLocation (v, Gravity. NO_GRAVITY, (location [0]), location [1]-conentView. getMeasuredHeight ());
} Else {
This. setAnimationStyle (R. style. operation_popwindow_anim_style_down );
Arrow_up.setVisibility (View. VISIBLE );
Arrow_down.setVisibility (View. GONE );
This. showAsDropDown (v, 0, 0 );
}
}

/**
* Display popupWindow with a translucent background
*
* @ Param
*/
Public void showPopupWindow (View v, View backgroundView ){
This. backgroundView = backgroundView;
V. getLocationOnScreen (location); // obtain the coordinates of the widget.
// Obtain its own length, width, and height
ConentView. measure (View. MeasureSpec. UNSPECIFIED, View. MeasureSpec. UNSPECIFIED );
BackgroundView. setVisibility (View. VISIBLE );
// Animation of the view
BackgroundView. startAnimation (anim_backgroundView );
If (location [1]> MainApplication. SCREEN_H/2 + 100) {// if the Y axis position of the control is greater than half the screen height, it will pop up
This. setAnimationStyle (R. style. operation_popwindow_anim_style_up );
Arrow_up.setVisibility (View. GONE );
Arrow_down.setVisibility (View. VISIBLE );
This. showAtLocation (v, Gravity. NO_GRAVITY, (location [0]), location [1]-conentView. getMeasuredHeight (); // display the top of the specified control
} Else {
This. setAnimationStyle (R. style. operation_popwindow_anim_style_down); // vice versa
Arrow_up.setVisibility (View. VISIBLE );
Arrow_down.setVisibility (View. GONE );
This. showAsDropDown (v, 0, 0); // display the lower part of the specified control
}
}
/**
* Display position of popupWindow height based on special requirements
*
* @ Param
*/
Public void showPopupWindow (View v, View backgroundView, int hight ){
This. backgroundView = backgroundView;
V. getLocationOnScreen (location );
// Obtain its own length, width, and height
ConentView. measure (View. MeasureSpec. UNSPECIFIED, View. MeasureSpec. UNSPECIFIED );
BackgroundView. setVisibility (View. VISIBLE );
// Animation of the view
BackgroundView. startAnimation (anim_backgroundView );
If (location [1]> MainApplication. SCREEN_H/2 + 100 ){
This. setAnimationStyle (R. style. operation_popwindow_anim_style_up );
Arrow_up.setVisibility (View. GONE );
Arrow_down.setVisibility (View. VISIBLE );
This. showAtLocation (v, Gravity. NO_GRAVITY, (location [0]), location [1]-conentView. getMeasuredHeight ()-hight );
} Else {
This. setAnimationStyle (R. style. operation_popwindow_anim_style_down );
Arrow_up.setVisibility (View. VISIBLE );
Arrow_down.setVisibility (View. GONE );
This. showAsDropDown (v, 0, 0 );
}
}
}

4. usage in the code

1.

CustomOperationPopWindow customOperationPopWindow = new CustomOperationPopWindow (this, operationTypeSelectlist );
CustomOperationPopWindow. setOnItemMyListener (new CustomOperationPopWindow. OnItemListener (){
@ Override
Public void OnItemListener (int position, TypeSelect typeSelect ){
// Click the operation to be performed in the list.
}
});

2.

textView.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {

CustomOperationPopWindow. showPopupWindow (textView); // You can transmit a translucent view v_background to hide it based on business needs.

    }
});

5. Final Results

The above code is almost all the code, mainly the usage of PopupWindow. The idea is clear and easy to implement step by step.