Java – scroll large canvas

I need some help to understand the basics of scrolling items drawn on the canvas in Android Suppose I want to create a timeline, where 0 time is the top of the visualization. As time increases, the timeline continues to appear above the previous point If I want to render on Android, I know I can simply create a bunch of items on the canvas by overriding ondraw() However, it is assumed that the visualization is larger than the screen allows

For example, in the first photo below, when I render it, the large black box contains the entire canvas I create a blue line, running vertically up and down, and several yellow, green and blue rectangles The red box represents a visual Android screen When initially opened, all items will be drawn, but only the items contained in the red box will be displayed on the screen

Now, if the user wants to scroll down, the items that initially appear below the red box are in the view, and the items that have exceeded the limit of the red box are no longer visible, as shown in the second picture

I believe I need to use scrollables, but I've lost how to do it I have read this page http://developer.android.com/training/custom-views/custom-drawing.html This page explains how to create your own customer image http://developer.android.com/training/custom-views/making-interactive.html Explain how to make the UI interactive, but I think I'm missing something

An example code to illustrate this problem (this is basic, assuming that there is logic to specify the direction of box / line, etc.) is as follows:

package com.example.scrolltest;

import com.example.scrolltest.Draw;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;

public class MainActivity extends Activity {
    Draw draw;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    draw = new Draw(this);
    draw.setBackgroundColor(Color.WHITE);
    setContentView(draw);
    }
}

and

package com.example.scrolltest;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;


public class Draw extends View {
    Paint paint = new Paint();

    public Draw(Context context) {
        super(context);            
    }

    @Override
    public void onDraw(Canvas canvas) {

        paint.setColor(Color.GREEN);
        canvas.drawRect(30,30,90,200,paint);
        paint.setColor(Color.BLUE);

        canvas.drawLine(100,20,100,1900,paint);

        paint.setColor(Color.GREEN);
        canvas.drawRect(200,2000,400,3000,paint);
        }
}

I can't imagine how I can scroll down to the rectangle outside the screen I'm not sure if I started correctly, or should use drawables

Solution

Simple method (if the required height is not very large)

Use Scrollview and add your draw view to it Calculate the height required for the view in onmeasure

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

draw = new Draw(this);
draw.setBackgroundColor(Color.WHITE);
ScrollView scrollView = new ScrollView(this);
scrollView.addView(draw);
setContentView(scrollView);
}

public class Draw extends View {
        Paint paint = new Paint();

        public Draw(Context context) {
            super(context);            
        }

        @Override
        protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {
            // Compute the height required to render the view
            // Assume Width will always be MATCH_PARENT.
            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = 3000 + 50; // Since 3000 is bottom of last Rect to be drawn added and 50 for padding.
            setMeasuredDimension(width,height);
        }

        @Override
        public void onDraw(Canvas canvas) {

            paint.setColor(Color.GREEN);
            canvas.drawRect(30,paint);
            paint.setColor(Color.BLUE);

            canvas.drawLine(100,paint);

            paint.setColor(Color.GREEN);
            canvas.drawRect(200,paint);
            }
    }