Click on the top of the blue word code eggs

In project development, it is sometimes necessary to copy the bottom popbox of ios

The author blog

http://www.jianshu.com/u/5aad180d1ea8

The article directories

  • Play box layout

  • Implement bounced

  • The frame is displayed from bottom to top

  • Popbox click event

  • Specific end events

  • Click blank to make popbox disappear problem

Hi, in the development of the project, sometimes we need to imitate the effect of the bottom pop-up box of ios. For example, when we close the positioning on iPhone, the unique bottom pop-up box of ios will pop up:

1

Frame layout:

We can take a look at what the popbox shows:

  • Title (a Title)

  • Options (N options, only one option is off in this picture)

  • A cancel button at the bottom (a cancel button)

So we need to consider the layout of the popbox first:

Since the menu in the middle is a list, we can think of the layout of the popbox we want to write roughly according to this figure:

We have mapped out the layout of the popbox, now we are going to implement the popbox.

2

To implement the popbox:

Because Google later recommended the use of DialogFragment, so we here the dialog box is also DialogFragment.

Let’s see step by step how to use DialogFragment to achieve the pop-up we want:

Fragment_ios_dialog.xml:

In this case, we will assume that the height of the ListView menu in the middle is written as 50dp. In practice, we can write wrap_content as the height depends on the number of items passed in.

To inherit DialogFragment to implement our IOSDialogFragment: IOSDialogFragment. Java:

We simply imported the layout we had written and did nothing else. When we ran it, we found the interface looked like the picture below:

  1. There is an area above the header content

  2. The background color at the bottom of our popup layout is grey by default

Let’s deal with these two first:

  • In fact, the area above us is the title of the popup box, so in IOSDialogFragment we added:

Let’s take a look at the effect of the popbox:

We can see the header. So we want to remove the top area, just remove the default title header of the popbox, just add:

  • We can change the background color of the DecorView by setting it to transparent:

(PS:Window -> DecorView -> FrameLayout -> FrameLayout -> our custom View) This logic should be familiar, so we just need to change the background color of the bottom DecorView.

After modifying the previous two steps, we can see that the effect becomes like this:

Then how to make the box become at the bottom ？？？？？？ We know that at the end of the day our View is underneath the window, so we just make the Window’s Grivaty property Bottom, so that all the elements are at the Bottom.

Let’s take a look at the effect:

In fragment_iOS_dialog. XML, layout_width is match_parent, and the left and right sides of layout_width are split.

For example, if I wanted to adjust the margin of the two edges for my own project, I wouldn’t be able to do that in my own fragment_iOS_dialog.xml.

We know that our View is contained within the window, and although our own View is match_parent, we don’t have the window as wide as possible. So let’s change the width of the window first.

Change the width of window:

In the previous code to modify the location of the popbox, we add another sentence:


And we found that, sure enough, the gap between the two sides got much smaller. But there’s still a gap, and since we’ve changed the width of the window to match_parent, it’s still not filled in, so it should have a padding value. A DecorView has a padding value in it. After all, our View is also contained in a DecorView. Without further ado, let’s experiment:

Then we looked at the effect, and sure enough:

Decorviet.setpadding (0,0,0,0); Instead of setting the background Color of the window, the window. The setBackgroundDrawable (new ColorDrawable (Color. TRANSPARENT)); The source code also sets the padding value to the DecorView. So it has the same effect.

3

Pop-ups display from bottom to top:

We’ve seen the popbox effect on ios, which starts at the bottom and goes up, and then disappears from the top and disappears from the bottom. Therefore, when we disappear, we cannot simply make DialogFragment perform the dismiss(), but make the popbox perform the animation effect of moving down first, and then dismiss().

Now that we are talking about moving up and down, you will immediately think of using TranslateAnimation to do it. Let’s look at how to do it step by step:

  • Popbox animation appears:

For TranslateAnimation, we pass eight parameters. Normally, we pass only four parameters:

TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, Float toYDelta — from coordinates (fromXDelta,fromYDelta) to coordinates (toXDelta,toYDelta). We can check this constructor by clicking on it:

The reason why we used to pass only four parameters is because it gave us the other four parameters and the default value, which is ABSOLUTE. Let’s look at some of the options:

ABSOLUTE is an ABSOLUTE coordinate, RELATIVE_TO_SELF is relative to itself, and RELATIVE_TO_PARENT is relative to the parent View. We only need the position shown by our popbox, and the starting position of let is as shown in the picture below:


It starts above the screen at the height of the box itself, and then goes back to its original position, so we use:

From the original position, increase the distance of its own height as the starting point, start to move, and then return to the original position.

  • Vanishing animation:

    Just flip it the other way around. And here we’re going to add an extra listen to the end of the animation event, because we’re going to move the popbox down and then dismiss the popbox:

So our animation code summary is:

4

Popbox click events:

The associated click events are simple. Just get the View instance from findViewByid in onViewCreated and set the click event.

5

Specific end events:

For example, the cancel click event above must perform an animation of the popbox moving down. So we can write our own method:

Or, if you don’t want to add new methods, you can simply duplicate the dismiss method:

6

Click blank to make popbox disappear question:

When we click on some blank Spaces above, we will find that our popbox will disappear directly, instead of moving down and disappearing as we did when we clicked the < Cancel > button above, because when DialogFragment clicks outside the popbox by default, it will directly dismiss, instead of following our method:

We can solve this by setting onTouchListener directly to the DecorView:

This will perform our own written popbox disappearance related events.

Android builds your own technology stack