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.