Question

我想创建像上面的图像拇指.. 为此我在下面创建了XML

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">


      <View
            android:id="@+id/view1"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="10dp"    
            android:background="@drawable/images1">
        </View>
        <View
            android:id="@+id/view2"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/images1">
        </View>
        <View
            android:id="@+id/view3"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="20dp"
            android:background="@drawable/images1">
        </View>

</RelativeLayout>

但是我创建的这个是在XML中手动添加的。并且可能会在不同的设备类型中产生不同的反应。有没有其他方法来创建这种类型的视图..

接受任何帮助。

谢谢。

Answer 1

你的想法很好。您使用dp作为尺寸单位，因此Views在不同设备上的外观相似。我唯一可以提出的改进措施 - 将所有这些内容移到单独的View类：

class ThumbView extends RelativeLayout {
    private ImageView vLayer1;
    private ImageView vLayer2;
    private ImageView vLayer3;

    public ThumbView(Context context, String pathToFile) {
        super(context);
        LayoutInflater inflater = (LayoutInflater) getContext()
          .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View view = inflater.inflate(R.layout.view_thumb, this, true);
        vLayer1 = view.findViewById(R.id.view1);
        vLayer2 = view.findViewById(R.id.view2);
        vLayer3 = view.findViewById(R.id.view3);

        Drawable drawable = Drawable.createFromPath(pathToFile);

        vLayer1.setImageDrawable(drawable);
        vLayer2.setImageDrawable(drawable);
        vLayer3.setImageDrawable(drawable);
    }
}

我假设您将使用图库中的文件来获取大拇指，因此添加了文件到构造函数的路径。因此，从代码创建这些视图会更容易。

您可以用于此目的的另一种方法是直接在Bitmaps上绘制Canvas。如果您想创建大量此类视图（例如在List / Grid中显示它们），这种方式可以提供一些性能优势。有关详细信息，请按此Guide。

Answer 2

您可以使用此自定义视图。

LayeredImageView.java

public class LayeredImageView extends RelativeLayout {
    private final int offset = 50;
    private int offsetMargin = offset;
    private int count = 0;
    private int imageHeight = 600;
    private int imageWidth = 600;
    private Context context;
    private Paint paint = new Paint();

    public LayeredImageView(Context context) {
        super(context);
        this.context = context;
        init();
    }

    private void init() {
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(3);
        this.setWillNotDraw(false);
        paint.setColor(Color.WHITE);
    }

    public LayeredImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }

    public LayeredImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init();
    }

    public void addImage(int res) {
        count++;
        ImageView imageView = new ImageView(context);
        imageView.setImageDrawable(ContextCompat.getDrawable(context, res));
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                imageWidth,
                imageHeight);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        params.setMargins(offsetMargin, offsetMargin, 0, 0);
        imageView.setLayoutParams(params);
        this.addView(imageView);
        this.invalidate();
        offsetMargin += offset;
    }

    public void setImageHeight(int imageHeight) {
        this.imageHeight = imageHeight;
    }

    public void setImageWidth(int imageWidth) {
        this.imageWidth = imageWidth;
    }

    @Override
    public void onDrawForeground(Canvas canvas) {
        for (int o = offset, i = 0; i < count; o += offset, i++) {
            canvas.drawRect(o, o, imageWidth + o, imageHeight + o, paint);
        }
        super.onDrawForeground(canvas);
    }
}

视图包含一些硬编码值，您可以根据需要更改这些值。

然后在您的活动或片段中夸大布局并动态添加图像

LayeredImageView view = (LayeredImageView) findViewById(R.id.view);
view.addImage(R.drawable.img_1);
view.addImage(R.drawable.img_2);
view.addImage(R.drawable.img_3);

样本

Answer 3

对于重叠视图， FrameLayout 是您应该使用的确切容器，因为它是为此目的而构建的。 FrameLayout将子视图一个堆叠在另一个上，最近添加的一个在顶部。 z-index取决于子视图的顺序。在下面的布局中， view3 将位于 view2 之上，而 view2 将位于 view1 之上。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/images1">
    </View>
    <View
        android:id="@+id/view2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/images1">
    </View>
    <View
        android:id="@+id/view3"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="20dp"
        android:background="@drawable/images1">
    </View>

</FrameLayout>

Answer 4

使用frame layout，并按每个marginLeft的递增顺序使用marginTop和image view。您可以使用库来提供边距尺寸，以获得响应输出。

https://github.com/intuit/sdp

您甚至可以使用循环以编程方式将image views以不同的边距添加到frame layout。这样您就可以根据自己的输入添加任意数量的image views。

Answer 5

只需复制并在代码下面设置FrameLayout就是专为此目的而设计的以下是根布局 FrameLayout 然后

Imageview 一个又一个

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/imageview1"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_marginTop="10dp"
    android:background="@color/colorPrimary">
</ImageView>
<ImageView
    android:id="@+id/imageview2"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="10dp"
    android:background="@color/colorPrimaryDark">
</ImageView>
<ImageView
    android:id="@+id/imageview3"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_marginTop="30dp"
    android:layout_marginLeft="20dp"
    android:background="@color/colorAccent">
</ImageView> </FrameLayout>

试试这个，请告诉我

Answer 6

使用此代码...

View view = inflater.inflate(R.layout.view_thumb, this, true);
            viewLayer1 = view.findViewById(R.id.view1);
            viewLayer2 = view.findViewById(R.id.view2);
            viewLayer3 = view.findViewById(R.id.view3);
    Drawable drawable = Drawable.createFromPath(pathToFile);

            viewLayer1.setImageDrawable("@drawable/images1");
            viewLayer2.setImageDrawable("@drawable/images1");
            viewLayer3.setImageDrawable("@drawable/images1");

你的问题必须解决

分层图像视图

6 个答案: