Creating a Custom View

Android provides many excellent standard views and widgets, but sometimes you need a custom view that presents visuals that are unique to your app.

While there are all kinds of custom views, you can shoehorn them into two broad categories:

simple

A simple view may be complicated inside; what makes it “simple” is that it has no child views. A simple view will almost always perform custom rendering.

composite

Composite views are composed of other view objects. Composite views typically manage child views but do not perform custom rendering. Instead, rendering is delegated to each child view.

There are three steps to follow when creating a custom view:

  1. Pick a superclass. For a simple custom view, View is a blank canvas, so it is the most common choice. For a composite custom view, choose an appropriate layout class, such as FrameLayout.

  2. Subclass this class and override the constructors from the superclass.

  3. Override other key methods to customize behavior.

Creating BoxDrawingView

BoxDrawingView will be a simple view and a direct subclass of View.

Create a new class named BoxDrawingView and make View its superclass. In BoxDrawingView.java, add two constructors.

Listing 31.3  Initial implementation for BoxDrawingView (BoxDrawingView.java) 

public class BoxDrawingView extends View {

    // Used when creating the view in code
    public BoxDrawingView(Context context) {
        this(context, null);
    }

    // Used when inflating the view from XML
    public BoxDrawingView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

You write two constructors because your view could be instantiated in code or from a layout file. Views instantiated from a layout file receive an instance of AttributeSet containing the XML attributes that were specified in XML. Even if you do not plan on using both constructors, it is good practice to include them.

Next, update your fragment_drag_and_draw.xml layout file to use your new view.

Listing 31.4  Adding BoxDrawingView to layout (fragment_drag_and_draw.xml) 

<android.support.constraint.ConstraintLayout
    android:id="@+id/activity_drag_and_draw"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bignerdranch.android.draganddraw.DragAndDrawActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="@+id/activity_drag_and_draw"
        app:layout_constraintLeft_toLeftOf="@+id/activity_drag_and_draw"
        app:layout_constraintRight_toRightOf="@+id/activity_drag_and_draw"
        app:layout_constraintTop_toTopOf="@+id/activity_drag_and_draw"/>

</android.support.constraint.ConstraintLayout>
<com.bignerdranch.android.draganddraw.BoxDrawingView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

You must use BoxDrawingView’s fully qualified class name so that the layout inflater can find it. The inflater works through a layout file creating View instances. If the element name is an unqualified class name, then the inflater looks for a class with that name in the android.view and android.widget packages. If the class lives somewhere else, then the layout inflater will not find it, and your app will crash.

So, for custom classes and other classes that live outside of android.view and android.widget, you must always specify the fully qualified class name.

Run DragAndDraw to confirm that all the connections are correct. All you will see is an empty view (Figure 31.3).

Figure 31.3  BoxDrawingView with no boxes

Screenshot shows DragAndDraw in Android phone. The screen reads, DragAndDraw on the top left. Below the title is a blank space.

The next step is to get BoxDrawingView listening for touch events and using the information from them to draw boxes on the screen.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.5.183