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.InflateExceptionjava.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.

@Overrideprotected 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.