Custom view is an amazing technique. It can be as simple as combining controls, or as complex as combining various animation and matrix operations. Some people panic when they see new controls they’ve never seen in visual scripts, while others find custom controls satisfying. As a qualified Android senior engineer, customizing views is a must. HMMM, custom view masters can click back, because this post might be too easy for you. Without further ado, today to bring you my own custom time selector.

Demand for ideas

Demand is very simple, click the time to select the popup background translucent selection box. The “hour” and “minute” options can be swiped up and down, and automatically attach to the option closest to the current slide point. Make sure that the selected item is in the middle. You can also click to select a number, which is an array and can be configured dynamically. The selected number is marked blue. After clicking “OK”, close the current pop-up box and obtain the current selected time.

The popbox can be implemented as a dialog, but I won’t say much about this as we all know, the focus is on the selection number control inside the popbox. The functions of both sides here are exactly the same, they can be slid and clicked. Finally, they get a number, and the most important thing is that the style is the same. Therefore, I made a quick decision and chose to encapsulate a sliding up and down number selector, and then use the number selector twice in the dialog. In case you need to adjust the style on both sides, it will be convenient to adjust and improve maintenance. Furthermore, in case there is only a need to select a number in the future, the number selector can be directly used, and there is no need to redefine a number to select a number, which greatly improves the flexibility of custom view, easy to plug and unplug. So the next step is to select a number control, the control is ready after the double.

The technical implementation

1. How to achieve translucent frame effect

This is actually quite common, inherits Dialog and calls addContentView to pass in your own layout file, which of course includes the title text above, two select number controls, a line, and the cancel and OK buttons below.



2. How to make the control display exactly 5 options

Since we are doing controlization, the size of all controls is fixed. Here I write the total height of the control, and the height of each option is 48dp. If you need to change the size, you can make it dynamic.

3. What should I do when I swipe to the top or bottom of the screen

When I initialized each option, I decided that if it was the top or bottom TextView, I would give it a margin equal to 2 TextViews, i.e. 96dp margin.



4. How to support slippable effect

In order for it to slide, we need to use the ScrollView container, and just to make fun of it, the ScrollView doesn’t provide a public callback that listens for the slide position. This common callback is not provided, what a shame! This reminds me of the EditText listening clipboard, which is exactly the same. To solve this problem, you need to create a custom VIew that inherits the ScrollView, override the onScrollChanged method, and create a custom interface to call data back and forth.



Now that you have a ScrollView that listens to the sliding position, you just need to add controls to it. First put a LinearLayout inside the ScrollView, and then dynamically add TextView to the LinearLayout according to the size of the optional array.



5. How to automatically slide the corresponding default position during initialization

If you slide the ScrollView before it is displayed, it will not work, so you cannot use scrollTo to slide directly during initialization. Instead, you need to call the ScrollView post method to delay the automatic slide, which is based on the default data, which is passed in when the control is clicked



It’s important to note that this time the default swipe will also be listened on. Since we chose to control the slide ourselves, in order to avoid repeating the slide again, we need to filter the initial slide and record the initial position. Here we define a Boolean variable to control it.



6. After sliding, how do I make sure that the selected number is in the middle every time

I don’t need to keep track of how much I slid, so it’s really easy to just take the distance of the slide divided by the height of the individual items, and then round it up to get the nearest position. To do this, we need to intercept the system’s ScrollView slides and handle them ourselves. To do this, override the onTouchEvent method, calculate how far the slide should be rounded, and return true to tell the parent View that the operation was handled.



7. What should be done when sliding to the upper and lower boundaries

I have made a double guarantee here. First of all, during the listening process of sliding, the distance of a sliding will not exceed the whole height of the item, nor will it slide to the boundary less than 0.



But it’s not enough to do that, considering that you don’t slip out of the boundary once, but you slip out of the boundary many times. So WHEN I was listening, I also did a second layer of processing. If I slide to the top, I will only slide to the position of the 0th View. If I slide to the bottom, I will only slide to the position of the last View.



8. What should I pay attention to when styling the selected item

Since the selected TextView needs to have a different font and color, I initially used a for loop to set the style for each item, and many of the items didn’t change their style. At that time, I took this situation into account, but I was afraid of trouble and there was no problem when I tested my mobile phone, so I did not modify the plan and directly proposed the test. Sure enough, the test sister came again, saying that it would be very slow to choose a number on a low-end mobile phone (Huawei 7). When I saw this bug, I knew it was the problem at the first time, so I made an optimization, the code is shown in the figure below. Save the current position as the last position after the next slide, so that only 2 TextView styles are set each time, to avoid unnecessary work, resulting in unnecessary lag of app. So usually when developing or pay more attention to this kind of detail, try to do this kind of optimization in the coding stage.



9. How to deal with the conflict between setting background and sliding events

Since the background of the selected item needs to be grayed when long pressed, you need to set each item to a Selector background and set clickable to true to achieve this effect. Once clickable is set, the problem is that the system will treat the TextView event as its first priority, so the ScrollView will not listen for the onTouchEvent event because it was robbed by its child TextView.

textView.setClickable(true);
textView.setBackgroundResource(R.drawable.selector_itemcolor);Copy the code

In the ScrollView, onInterceptTouchEvent is the onInterceptTouchEvent, and the onInterceptTouchEvent is the onInterceptTouchEvent, and the onInterceptTouchEvent is the onInterceptTouchEvent. So there’s no onTouchEvent method at all. We need to get the initial location from onInterceptTouchEvent instead of using ouTouchEvent to get the initial location from onInterceptTouchEvent.



Summary: this article through the actual project in a custom time selection box to share a custom combined control, which is often used in the project, the share of the control is also very simple, I hope to help you. In fact, custom View thousands of million, but the change is inseparable from its case, I personally summed up when the UI to draw a new control, can be divided into these steps:

1. Should this control be a View or a ViewGroup

2. Do you need to draw the view by yourself? Can you combine it

3. Implement the control effect according to the visual draft, and deal with possible event conflicts

4. Consider whether there might be performance issues or compatibility issues on low-end phones

5. If you have time, consider packaging, which will facilitate future maintenance and improve flexibility

I hope that after watching the new students are no longer afraid of new UI controls, no matter what interactive vision she produces, as long as it is not particularly complex all meet her. When the boss of the province is not satisfied with the interface vision, UI also said that because your technology is not good, people in the home, the pot from heaven. As long as it’s the same as the visual, what can she say? In addition, I have shared a scale that NEEDS to be drawn by myself. If you are interested in customization, please refer to my previous article. If you have other questions, please discuss with me.

Demo address: github.com/dongrong-fu…