Create a custom view in Android || 在 Android 中创建一个自定义 View

Resume

While we are creating an Android Application, it’s very common for us to create a custom View. This passage will lead you to create your own View with a custom canvas class.

---

Create a View class

The beginning to create a View is to create a View class.
Then we just go to the project package, and create a View class. In this passage, I will name it SceneCanvas.

First of all, we need to create a class named SceneCanvas which extends the View class. Afterward, to create a list that contains elements is a good idea.

public SceneCanvas extends View{
    List<Bitmap> bitmaps = new ArrayList<Bitmap>();
}

Then we will have to add 2 constructors.

    public SceneCanvas(Context context){
        super(context);
    }
    public SceneCanvas(Context context, AttributeSet attributeSet){
        super(context, attributeSet);
    }

Otherwise, when we inflate this view, our App will raise an

android.view.InflateException
java.lang.NoSuchMethodException: <init> [class android.content.Context, interface android.util.AttributeSet]

exception which indicates we didn’t implement a constructor which we should have done.

Then we should create a function named onDraw() which will paint some elements on the screen.

Here’s the code.

@Override
protected void onDraw(Canvas canvas){
    super.onDraw(canvas);

    canvas.drawColor(Color.LTGRAY);
    canvas.drawBitmap(bitmaps.get(0), canvas.getWidth() / 2, 0, null);
}

Well, you may notice that we didn’t add any element to the list. So I would suggest you to create a function named init() that init everything you need. Hence, we don’t have to write so many codes in those 2 constructors above. We can just invoke them in those 2 constructors.

private void init() {
    bitmaps.add(BitmapFactory.decodeResource(getResources(), R.drawable.c2));
}

The code below shows the entire class:

    List<Bitmap> bitmaps = new ArrayList<Bitmap>();

    public SceneCanvas(Context context) {
        super(context);
        init();
    }

    public SceneCanvas(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        init();
    }

    private void init() {
        bitmaps.add(BitmapFactory.decodeResource(getResources(), R.drawable.c2));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawColor(Color.LTGRAY);
        canvas.drawBitmap(bitmaps.get(0), canvas.getWidth() / 2, 0, null);
    }
}

---

XML

The following jobs would be easy, we have 2 ways to inflate the View that we have created before.

The easiest way is to write in the XML file

<your_package_name.SceneCanvas
        android:id="@+id/scene_canvas"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

---

Instantiate in Activity/Fragment

The second way is to instantiate in an Activity or Fragment. Here we will instantiate in a Fragment.

public class MyFragment extends Fragments {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.my_fragmen, container, false);//Inflate a layout.

        RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.root_view);//Get the root view of the layout.
        relativeLayout.addView(new SceneCanvas(getActivity()));//Add out SceneCanvas view to the root view.

        return view;
    }
}

After inflating a layout, we just find a View in that layout, then add our SceneView as a sub-view to that View.