Android: нарисуйте холст, не затеняя ряд кнопок

Question

Моя проблема, вероятно, проста - есть много приложений, которые выполняют то, что я пытаюсь сделать.

У меня есть Относительный макет с рядом кнопок, а затем я хочу нарисовать на холсте.

Моя проблема в том, что Canvas рисует поверх кнопок или вместо кнопок, поэтому все, что я в итоге получаю, это форма.

Это мой код:

    package com.android.phil.graphtoggle;

    import android.app.Activity;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.drawable.ShapeDrawable;
    import android.graphics.drawable.shapes.OvalShape;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageButton;

    public class MainActivity extends Activity 
    {
        public int graph_toggle = 0;
        public int data_toggle=0;
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) 
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            final ImageButton graph_toggle_button = (ImageButton) findViewById(R.id.graph_toggle);
            final ImageButton graph_settings_button = (ImageButton) findViewById(R.id.graph_type);
            final ImageButton data_toggle_button = (ImageButton) findViewById(R.id.data_toggle);

            CustomDrawableView mCustomDrawableView;

            mCustomDrawableView = new CustomDrawableView(this);
            setContentView(mCustomDrawableView);

            graph_toggle_button.setOnClickListener(new View.OnClickListener() 
            {
                public void onClick(View arg0) 
                {
                    if (graph_toggle==2)
                    {
                        graph_toggle=0;
                    }
                    else
                    {
                        graph_toggle++;
                    }

                    if (graph_toggle==0)
                    {
                        graph_settings_button.setImageResource(R.drawable.close);
                    }
                    if (graph_toggle==1)
                    {
                        graph_settings_button.setImageResource(R.drawable.ohlc_bars);
                    }
                    if(graph_toggle==2)
                    {
                        graph_settings_button.setImageResource(R.drawable.candles);
                    }               
                }         
            });
            data_toggle_button.setOnClickListener(new View.OnClickListener() 
            {
                public void onClick(View arg0) 
                {
                    if (data_toggle==2)
                    {
                        data_toggle=0;
                    }
                    else
                    {
                        data_toggle++;
                    }

                    if (data_toggle==0)
                    {
                        data_toggle_button.setImageResource(R.drawable.ohlc_bars_daily);
                    }
                    if (data_toggle==1)
                    {
                        data_toggle_button.setImageResource(R.drawable.ohlc_bars_weekly);
                    }
                    if(data_toggle==2)
                    {
                        data_toggle_button.setImageResource(R.drawable.ohlc_bars_monthly);
                    }               
                }         
            });
        }
        public class CustomDrawableView extends View 
        {
            private ShapeDrawable mDrawable;

            public CustomDrawableView(Context context) 
            {
                super(context);

                int x = 10;
                int y = 100;
                int width = 300;
                int height = 50;

                mDrawable = new ShapeDrawable(new OvalShape());
                mDrawable.getPaint().setColor(0xff74AC23);
                mDrawable.setBounds(x, y, x + width, y + height);  
           }

            protected void onDraw(Canvas canvas)
            {
                    mDrawable.draw(canvas);
            }
        }
    }

Это мой xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
android:layout_width="fill_parent" 
android:id="@+id/relativeLayout1" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent">
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/graph_toggle" 
    android:src="@drawable/graph_toggle" 
    android:layout_alignParentLeft="true"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip"  
    android:layout_width="40dip"  
    android:id="@+id/graph_type" 
    android:src="@drawable/close" 
    android:layout_toRightOf="@+id/graph_toggle"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/graph_type"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle1" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle2" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle1"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle3" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle2"
    ></ImageButton>
    <ImageButton 
    android:layout_height="40dip" 
    android:layout_width="40dip" 
    android:id="@+id/data_toggle4" 
    android:src="@drawable/ohlc_bars_daily" 
    android:layout_toRightOf="@+id/data_toggle3"
    ></ImageButton>
</RelativeLayout>

Answer 1

Вы заменяете весь макет xml своим пользовательским представлением при вызове:

setContentView(mCustomDrawableView);

Вы должны добавить свой собственный вид к макету, например:

RelativeLayout mainLayout = (RelativeLayout)findViewById(R.id.relativeLayout1);

RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(/*up to you*/);
// add here other layout params rules to make your
// custom view stay below the buttons

mCustomDrawableView.setLayoutParams(lp);
mainLayout.addView(mCustomDrawableView);

Однако вам также следует рассмотреть возможность добавления в свой пользовательский вид конструктора такого типа:

public CustomDrawableView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // add other init stuff
}

, чтобы вы могли использовать свой пользовательский вид в xml, упрощая задание параметров макета, поскольку это делается в кодеможет быть скучно для RelativeLayout.

Answer 2

создайте класс, который расширяет класс framelayout и перезаписывает функцию onDraw там вы можете нарисовать все, что вы хотите, и он будет вести себя как любой другой вид