rendering

background

In the company’s projects, there is just the need to use the wechat chat interface long press box style of this UI.

I looked online, but I couldn’t find it.

Android’s off-the-shelf ListPopupWindow doesn’t cut it.

So I’m going to wank one out during non-office hours for everyone to use.

The sample code

Key files, sample code and how to use them are all posted on GitHub.

This article will not expand on the explanation.

This article focuses on how to whip out this style.

Explain some key points.

Let everyone know how it is, more know why.

Code portal

Critical code anatomy

PopupWindow default width and height Settings

As we know, we can specify the width and height to display when we create a PopupWindow.

Here’s how the default width and height is set in the code.

Default width = device width /3.

Setting the default height is a bit trickier.

If the height is set too low, the number of list items may be smaller.

If set too large, the display list may fill the entire screen.

Because of this, the default height set in this code is dynamic.

The change algorithm is as follows:

Maximum default height = Device height /2. List height = Item Height * number of items. If the list height is less than the maximum default height, the default height = the list height. If the list height > Maximum default height, the default height = maximum default height.

As for how to calculate the height of Item, there is an example code, here is not superfluous explanation.

PopupWindow displays position determined

Before explaining the display position, let’s briefly talk about the Android coordinate system.

The above picture is briefly drawn, mainly for illustration

In the x-direction, we’re going to get a bigger x-value as we go to the right. In the Y direction, we’re going to go down and we’re going to go up.

This is useful for calculating the position shown later.

Let’s talk about the display position, since it’s a position, it has two dimensional values.

X-axis (horizontal direction)

Y-axis (vertical)

In addition to the dimension value, there is a reference point, which in this case is the upper left corner of the list.

To illustrate that the PopupWindow is suitable for various positions, there are three buttons in the illustration, one in the lower left, one in the middle, and one in the upper right.

The x-coordinate position is determined

We can draw the conclusion from the graph above.

When the View is displayed on the left, the displayed x-coordinate = the x-coordinate of the View’s center point. When the View is displayed on the right, the display x-coordinate = the View’s center x-coordinate -PopupWindow width.

The Y position is fixed

We can draw the conclusion from the graph above.

When the View is displayed on top, the display Y coordinate is equal to the View’s center Y coordinate. When the View is displayed below, the display y-coordinate = the View center y-coordinate -PopupWindow height.

Well, to this high imitation wechat chat interface long press box style code analysis is over.

If you have any questions, please leave a comment.

Welcome to pay attention to personal public number. Learn together and grow together.