我如何在android中创建可堆叠图像?

时间:2013-05-15 21:47:15

标签: android imageview relativelayout android-ui image-rotation

我有一个要求,我必须旋转图像并将3个图像叠加在一起。 enter image description here

 <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中实现这一点。使用上面的代码,即使我使用了相对布局,我也只能看到单个图像?

1 个答案:

答案 0 :(得分: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中需要填充。如果您忘记添加它们,您的图片将被剪裁。