2011-07-19 87 views
1

概述:我嘗試創建一些簡單的形狀(正方形和三角形),然後將它們用作活動的背景圖像。形狀的大小取決於屏幕的寬度和高度。問題在於,儘管我正在設置這些形狀的邊界,但它們仍然儘可能大,同時仍然適合屏幕內部。何處在自定義視圖中設置繪圖的邊界

詳細信息:我想創建一個非常簡單的背景圖像,其中包含一些形狀的重載視圖類,名爲Controlsoverviewview.java。我計算出畫布的大小,然後在onDraw方法中調用我的paint方法,因爲這是我第一次知道畫布的大小。我仔細檢查了每個形狀都有正確邊界的代碼,但問題是沒有一個形狀服從它們的邊界,並且每個形狀的繪製都儘可能大,因爲它可能會出現在屏幕上。

public class ControlsOverlayView extends View{ 

    // graphical constants 
    private static int SIDE_ARROW_WIDTH; 
    ... 
    ... 

    public ControlsOverlayView(Context context, AttributeSet attrs) { 
     super(context, attrs); 

    } 

    @Override 
    protected void onDraw(Canvas canvas) { 

     resize(canvas.getWidth(), canvas.getHeight()); 
     paintControls(); 
     super.onDraw(canvas); 
    } 

    private void resize(int width, int height) { 
     // initialize screen size 
     SCREEN_WIDTH = width; 
     SCREEN_HEIGHT = height; 

     HALF_WIDTH = SCREEN_WIDTH/2; 
     HALF_HEIGHT = SCREEN_HEIGHT/2; 

     SIDE_ARROW_HEIGHT = SCREEN_WIDTH/6; 
     SIDE_ARROW_WIDTH = SIDE_ARROW_HEIGHT/2; 

     // calculate constants 
     TEXT_FONT_HEIGHT = Utils.Font_getHeight(TEXT_FONT); 

     SCREEN_FRAMED_WIDTH = SCREEN_WIDTH-(2*FRAME_SIZE); 
     SCREEN_FRAMED_HEIGHT = SCREEN_HEIGHT-(2*FRAME_SIZE); 
    } 

    // Creates a background drawable for the control layout including the different coloured panels and the next page arrows 
    public void paintControls(){ 
     // Calculated layout values 
     int panelWidth = SIDE_ARROW_WIDTH*3, textViewHeight = (SCREEN_HEIGHT-SIDE_ARROW_HEIGHT)/2; 
     int leftArrowX = (SCREEN_WIDTH/8)+(SIDE_ARROW_WIDTH/3), rightArrowX = SCREEN_WIDTH-(SCREEN_WIDTH/4)+(SCREEN_WIDTH/8)-(SIDE_ARROW_WIDTH/3), arrowY = (SCREEN_HEIGHT/2)-(SIDE_ARROW_HEIGHT/2); 

     // Rect array that stores the bounds of each layer of the background 
     Rect [] bounds = new Rect[3]; 
     int i = 0; 

     // background 
     ShapeDrawable background = new ShapeDrawable(new RectShape()); 
     bounds[i++] = new Rect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); 
     background.getPaint().setColor(CONTROLS_BACKGROUND_COLOR); 

     // left panel 
     ShapeDrawable leftPanel = new ShapeDrawable(new RectShape()); 
     bounds[i++] = new Rect(0, 0, panelWidth, SCREEN_HEIGHT); 
     leftPanel.getPaint().setColor(CONTROLS_PANEL_COLOR); 


     // right arrow 
     Path rightArrowPath = new Path(); 
     rightArrowPath.moveTo(SIDE_ARROW_WIDTH, SIDE_ARROW_HEIGHT/2); 
     rightArrowPath.lineTo(0, SIDE_ARROW_HEIGHT); 
     rightArrowPath.lineTo(0, 0); 
     rightArrowPath.lineTo(SIDE_ARROW_WIDTH, SIDE_ARROW_HEIGHT/2); 
     rightArrowPath.close(); 
     ShapeDrawable rightArrow = new ShapeDrawable(new PathShape(rightArrowPath, SIDE_ARROW_WIDTH, SIDE_ARROW_HEIGHT)); 
     bounds[i++] = new Rect(rightArrowX, arrowY, rightArrowX+SIDE_ARROW_WIDTH, arrowY+SIDE_ARROW_HEIGHT); 
     rightArrow.getPaint().setColor(CONTROLS_ARROW_COLOR); 

     Drawable [] layers = new Drawable[] { background, leftPanel, rightArrow }; 
     LayerDrawable controlsBackground = new LayerDrawable(layers); 
     controlsBackground.setBounds(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); 
     // set the bounds of each layer 
     for (i=0;i<controlsBackground.getNumberOfLayers();i++) { 
      controlsBackground.getDrawable(i).setBounds(bounds[i]); 
     } 
     controlsBackground.setAlpha(100); 
     controlsLayout.setBackgroundDrawable(controlsBackground); 

     controlsLayout.setVisibility(View.VISIBLE); 
    } 

}

活動被稱爲ControlsOverlayActivity.java,看起來像:

public class ControlsOverlayActivity extends Activity { 

    private ControlsOverlayView overlay; 
    private static WattpadApp appState; 


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

     setContentView(R.layout.controls_overlay); 

     // initialize the controls overlay 
     ControlsOverlayView.controlsLayout = (LinearLayout) findViewById(R.id.controls_layout); 
     ControlsOverlayView.controlsLayout.setOnClickListener(controlsListener); 
     ControlsOverlayView.controlsTextViews = new TextView[] { 
       (TextView) findViewById(R.id.controls_text_left_above), 
       (TextView) findViewById(R.id.controls_text_right_above), 
       (TextView) findViewById(R.id.controls_text_middle), 
       (TextView) findViewById(R.id.controls_text_left_below), 
       (TextView) findViewById(R.id.controls_text_right_below) 
     }; 
     // initialize the fade in/out animations for the controls overlay 
     ControlsOverlayView.controlsFadeIn = new AlphaAnimation(0,1); 
     ControlsOverlayView.controlsFadeIn.setDuration(ControlsOverlayView.CONTROLS_FADE_DURATION); 
     ControlsOverlayView.controlsFadeOut = new AlphaAnimation(1,0); 
     ControlsOverlayView.controlsFadeOut.setDuration(ControlsOverlayView.CONTROLS_FADE_DURATION); 
     ControlsOverlayView.controlsFadeOut.setAnimationListener(new AnimationListener(){ 
      public void onAnimationEnd(Animation animation) { 
       //ControlsOverlayView.controlsLayout.setVisibility(View.GONE); 
      } 
      public void onAnimationRepeat(Animation animation) {} 
      public void onAnimationStart(Animation animation) {} 
     }); 
    } 

    private OnClickListener controlsListener = new OnClickListener() { 

     @Override 
     public void onClick(View v) { 
      finish(); 
     } 
    }; 

} 

和XML文件被稱爲controls_overlay.xml,看起來像:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Controls Overlay --> 
<FrameLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/controls_overlay" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    <wp.wattpad.ui.ControlsOverlayView 
       android:layout_width="1dp" 
       android:layout_height="1dp" 
      /> 
    <LinearLayout 
      android:id="@+id/controls_layout" 
      android:orientation="horizontal" 
      android:visibility="invisible" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" > 

      <!-- Left Panel --> 
      <LinearLayout 
       android:orientation="vertical" 
       android:gravity="left" 
       android:layout_width="wrap_content" 
       android:layout_height="fill_parent" > 
       <TextView android:id="@+id/controls_text_left_above" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal|bottom" 
        android:text="@string/controls_prevpage" /> 
       <TextView android:id="@+id/controls_text_left_below" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal|top" 
        android:text="@string/controls_scrollslower" /> 
      </LinearLayout> 
      <!-- Middle Panel --> 
      <LinearLayout 
       android:orientation="vertical" 
       android:layout_width="wrap_content" 
       android:layout_height="fill_parent" > 
       <TextView android:id="@+id/controls_text_middle" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:gravity="center_horizontal|center_vertical" 
        android:text="@string/taptoscroll" /> 
      </LinearLayout> 
      <!-- Right Panel --> 
      <LinearLayout 
       android:orientation="vertical" 
       android:gravity="right" 
       android:layout_width="wrap_content" 
       android:layout_height="fill_parent" > 
       <TextView android:id="@+id/controls_text_right_above" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal|bottom" 
        android:text="@string/controls_nextpage" /> 
       <TextView android:id="@+id/controls_text_right_below" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal|top" 
        android:text="@string/controls_scrollfaster" /> 
      </LinearLayout> 
     </LinearLayout> 

我真的被卡在這裏,我想知道是否可能調用調整大小和從onDraw()方法繪製不是最好的地方做,但我不知道我可以做到這一點,因爲我需要知道的高度和屏幕寬度。我也嘗試過對super.onDraw()的調用,它沒有改變任何東西。

回答

2

幾個令人沮喪的時間後找到答案。我打電話resize()resize(canvas.getWidth(), canvas.getHeight());它應該是controlsLayout.getWidth()controlsLayout.getHeight()。儘管畫布高度的高度距離視圖高度幾個像素,但它完全忽略了邊界。不知道爲什麼這是這種情況,這是嚴重的挫折,但問題解決。