Saturday, May 11, 2013

Android UI - Introduction to Views

This is the first article in "Android UI" series. Since this is some kind of "intro", we'll just cover some basic aspects of View drawing.

Further in the text, View (with capital V) will represent concrete class (or subclasses) android.view.View. While view (with lowercase v) will represent general block of UI without bounding to concrete implementation.

What is a View?

View is an essential component of every graphical OS (not just Android). It may be called in many ways (such as UIView in iOS), although they all share the same concept. So, what is a "view"? In short: it is a region on the screen that you can see and with which you can interact.

Respectively, view is responsible for:
  1. Measure itself. In other words - decide how big region of the screen it will require.
  2. Drawing itself within it's region.
  3. Handling user interaction.
Particularly in Android OS view is represented by android.view.View class. Description of this class covers almost all aspects of working with views, so I won't copy-and-paste them here. Instead, I highly recommend to read it. Although, to made a conclusion, here is a steps that should be completed (typically by Android, not by you) in order to draw View:
  1. View should be instantinated by calling one of the constructors (there is no surprise). Typical place for initialization processes, such as loading parameters from XML or inflating some layout (again, from XML). More about that below.
  2. View will be measured to find out how big it will be. onMeasure(int, int) method will be invoked (most likely it will be perfomed by Android automatically, so you don't need to call it manually).
  3. View will be layouted (most likely by it's parent), so it will "know" it's position on the screen (left and right bounds as well as width and height). For View, you don't need to take any steps, here all is done for you.
  4. At least, View will be drawed. All drawing process is perfomend inside draw(Canvas) method.
Once again, detailed description of View drawing process is described in official reference

I mentioned that View is typically measured and layout by it's parent (which is also measured by it's parent, and so on, until it comes to Android OS, which perfoms all this process automatically for you). But, you can also go through this process by yourself in case you're crazy really need this. More about this in next articles.

Out of the box.

Note, that View itself is non-abstract class, which means that it can be instantinated, have some default behaviour and can be drawn as well as other views. So, what do we have by default? Most importantly:
  • Any instance of View can measure itself, simply by taking width and height params from XML (wrap_content, match_parent, or exact value in dp).
  • Any instance of View have android:background property, so it can... draw it's background.
And this is great, because:
  1. It will save some time while developing your own Views (since you shouldn't add background by yourself).
  2. You can compose custom painted area just by setting background property of View. This is very useful when you need, for example, underline below some view:


This XML will result in horizontal black line in 1dp width. Althougth, it seems prety simple - there is a better way to do such things, which I'll cover in the next article: Modifying views.

P.S. Sorry, this article was kinda short. I've decided to not overload first one with tons of code, but there definately will be some code in the next article. Stay tuned.

No comments:

Post a Comment