[转]Creating Reusable Custom Components

转载自:http://toastdroid.com/2014/06/21/creating-reusable-custom-components/

The stock Views provided by Android are pretty flexible, and usually they’re good enough if you’re adhering to the Android Design Guidelines. Sometimes you might want to add some special functionality to an existing View, or modify its look outside of what the stock attributes will allow. In those cases, you need to make a custom component. Fortunately for us, that’s quite easy to do!

In this example, we need to make a CheckBox with the following requirements: * Two lines of text: a title and a description * The “box” itself aligns to the right side of the View * Tapping anywhere in the View will toggle the state of the CheckBox

Creating a layout for the CheckBox

Let’s start with our xml layout. It’s a pretty simple layout, with a couple LinearLayouts, two TextViews, and a CheckBox.

Here’s how it looks:

checkbox_sample

Creating a custom View subclass

Next, we need to make a class for the View. The class will take care of inflating our layout, and it’ll contain any additional functionality we may need.

The init(Context context) method handles common initialization logic. It inflates the layout, gets a reference to the right-aligned CheckBox, and sets an onTouchListener on the entire View. When the View is touched, a touch event is dispatched to the CheckBox to toggle its checked state.

To mimic the behavior of the stock Android CheckBox, we also have a couple more methods: setChecked(boolean checked) and setOnCheckedChangeListener(OnCheckedChangeListener listener). These methods simply make the same calls on the CheckBox itself.

In order to make it so that tapping anywhere in the layout will trigger the CheckBox, we must call setOnTouchListener and dispatch all resulting MotionEvents that occur inside the parent View’s hitbox to the CheckBox. It’s important to note here that a MotionEvent’s location is relative to the bounds of the View that is receiving the event, so all MotionEvents passed to the CheckBox must have their locations reset to be inside its bounds. The easiest way to do this is to call motionEvent.setLocation(0.0f, 0.0f);, since 0, 0 will always be within the bounds of a View of any size.

Using the custom component

To add our fancy new custom component to an xml layout, we simply need to put the following lines in the layout:

Adding custom attributes

The custom component will work just fine as-is, but it’s missing a key feature: the ability to set the content of the TextViews and the checked state of the CheckBox in xml. It’s pretty standard fare, and unless you want to only use the custom View once in your app it’d be good to add that capability. We’ll need to do three things:

  1. Create a custom attribute set
  2. Set the attributes in the layout that includes the custom component
  3. Add logic in the View subclass to handle reading the attributes and assigning their values

Creating a custom attribute set

Custom attribute sets go in your project in the res/values/attrs.xml file. Attribute sets can contain several simple datatypes, such as ints, floats, and Strings. In our case, we’ll need two String attributes and one boolean attribute.

One important thing to note is that attribute names can conflict, even if they are contained in different attribute sets. If you have multiple custom components/Views in your app, make sure that you give your attributes unique names.

Setting the attributes in the layout

Remember how we added the MyCheckBox View to a layout earlier? We need to make some slight modifications to use the new attributes.

In the parent layout, we need to add a reference to the namespace for our attributes. Android has made this pretty easy for us. Let’s say we have a MyCheckBox inside a LinearLayout. The layout xml may look like this:

In order to reference our custom attributes, we need to add a namespace that references the custom attribute set. This is done by using the xmlns attribute. You’ve probably seen xmlns:android="http://schemas.android.com/apk/res/android" before, since it needs to be in every layout you make. The xmlns:android part of that line declares a namespace named “android”, which is why all Android layout attributes begin with android:. We’ll call our new namespace “myapp” and add it to the LinearLayout like so:

The http://schemas.android.com/apk/res-auto value will automagically point to the attrs.xml file we created earlier. Neato. Next, we need to set the attributes on the MyCheckBox View:

The completed layout looks like this:

Reading and setting the attributes on the custom component

The last step is actually using the attributes we set in xml. Android isn’t quite smart enough to do this on its own, so we need to help it out. In the MyCheckBox class, you may have noticed that two of the constructors take an AttributeSet attrs parameter. That parameter actually contains all of the attributes that we set in the xml. Our job is to parse those attributes, read their values, and assign them appropriately. We can do this in our init method:

 

This is a little more complicated, so let’s step through it.

First, we obtain a TypedArray containing the attributes that were passed into the View that belong to the MyCheckBox attribute set:

Next, we need to pull the values set on any of our custom attributes, and recycle the TypedArray when done:

Finally, we assign the values from the attributes to our custom View:

And there you have it, your very own custom CheckBox. You can extend this even further and include attributes for enabling the View, setting a style on the two TextViews, or setting the drawable for the CheckBox. The MyCheckBox class could also intelligently handle hiding/showing the TextViews depending on if their text is empty or not. That’s the beauty of custom Views: you can make them work however you want to suit your needs.

Leave a Reply

Your email address will not be published.