Detailed Android custom view — custom histogram

introduction

In the twinkling of an eye, the haze of 2016 with the cold winter of the Internet and the imperial capital will soon pass. I don't know how everyone has been this year? Recently, the ticket circle has been brushed by the haze of various cities, which will inevitably lead to turbulence. I'm glad I came out a year earlier and worry about my future career planning. It doesn't matter. Since you have chosen this industry, I think you should stick to it. The road is your own. If you are good enough and work hard enough, I believe you will find a satisfactory job in the end. Finally, I would also like to thank everyone who voted for me this year. Thank you very much. Not much to say. Today's topic is its C pair, custom view histogram.

Let's talk about what I've been doing recently? I haven't written a blog for a long time. Recently, I have two projects in my hand. I've been busy doing projects when I'm free. I also encapsulated my own set of library. I'll share it. The company's projects have been busy. Today's histogram is used by the company's projects. Let's see the effect first

Concrete implementation

It can be seen that today's histogram is divided into three categories: double vertical histogram, single vertical histogram and single horizontal histogram. In fact, the principle is the same. Let's see how to realize and draw such a histogram.

Double vertical

We can see that the histogram mainly includes the following aspects:

Well, the above five points are all the things proposed by the requirements and UI. Let's start "painting".

1. First, we define some resource styles for use

include

The bottom and top colors are used for gradients

2. Next, let's look at the specific code. The comments are written in detail. Take a closer look:

Note: onwindowvisibilitychanged (when the focus of the screen changes, the method must be rewritten again, otherwise the histogram will run out of the screen when the focus changes)

Let's talk about the drawing part

Ondraw() section

We put the index of each ontouch bar into the selectindexroles array, and then when this array contains the index of the drawn histogram, we set no color and no gradient;

At the same time, we draw a shadow on the blank space between each two double bars;

Finally, drawroundrect () draws a rounded rectangle.

All codes

3. Specific use:

After the above steps, our double vertical histogram is drawn and displayed. In fact, it's not so difficult to sit down and calculate and draw carefully. As for the implementation principle of single and horizontal, it is much simpler than this. Oh, by the way, I just customized a horizontal histogram view, and then used the listview to display the specific contents of each department.

Code download: Demo

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.