2013-05-15 67 views
0

我有一個要求,我必須旋轉圖像並堆疊3個圖像在彼此之上。 enter image description here如何在android中創建可堆疊的圖像?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:id="@+id/rellay" 
    tools:context=".MainActivity" > 

    <com.example.stackableimages.ImageRotatedView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:src="@drawable/square" 
     android:id="@+id/image" /> 
    <com.example.stackableimages.ImageRotatedView2 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:src="@drawable/square2" 
     android:id="@+id/image1" /> 

</RelativeLayout> 

注意:它應該以雜亂無章的方式堆放。每次旋轉的角度都不相同。旋轉動畫不是解決方案。我使用了三個圖像瀏覽的相對佈局。我是否需要創建自定義視圖並覆蓋onDraw方法

View.setRotation有助於實現此目的,但它在api 11之後可用。我的應用程序應該與api 7兼容。 我如何在android中實現這一點。使用上面的代碼,即使我使用了相對佈局,我也只能看到單個圖像?

+0

您需要一個FrameLayout才能工作。我目前在移動設備上,所以我不能發佈代碼,但谷歌肯定會幫助你與FrameLayouts – James

回答

2

自定義視圖:

public class MyImageView extends ImageView{ 

    private int mHeight; 
    private int mWidth; 
    private float mRotate; 

    public MyImageView(Context context) { 
     super(context); 
     initRotate(); 
    } 

    public MyImageView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     initRotate(); 
    } 

    private void initRotate(){ 
     mRotate = (new Random().nextFloat() - 0.5f) * 30; 
    } 

    @Override 
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) { 
     super.onLayout(changed, left, top, right, bottom); 
     mWidth = bottom - top; 
     mHeight = right - left; 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     int borderWidth = 2; 
     canvas.save(); 
     canvas.rotate(mRotate, mWidth/2, mHeight/2); 
     Paint paint = new Paint(); 
     paint.setAntiAlias(true); 
     paint.setColor(0xffffffff); 
     canvas.drawRect(getPaddingLeft() - borderWidth, getPaddingTop() - borderWidth, mWidth - (getPaddingRight() - borderWidth), mHeight - (getPaddingBottom() - borderWidth), paint); 
     super.onDraw(canvas); 
     canvas.restore(); 
    } 
} 

和佈局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:orientation="vertical" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
     > 
    <TextView 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:text="Hello World, MyActivity" 
      /> 
    <FrameLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:padding="30dp"> 

     <com.capitan.TestRotation.MyImageView 
       android:id="@+id/image_view1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/your_drawable" 
       android:padding="10dp"/> 
     <com.capitan.TestRotation.MyImageView 
       android:id="@+id/image_view2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/your_drawable" 
       android:padding="10dp"/> 
     <com.capitan.TestRotation.MyImageView 
       android:id="@+id/image_view3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/your_drawable" 
       android:padding="10dp"/> 

    </FrameLayout> 
</LinearLayout> 

鐵墊都需要ImageViews。如果您忘記添加它們,您的照片將被剪裁。

+0

謝謝,完美的作品。怎麼樣的白色邊框?我需要在Draw上添加這個嗎? – Preethi

+0

我編輯過onDraw()。現在有白色邊框 – Capitan