2013-05-15 29 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