Question

我正在尝试设计一个从底部呈圆形的视图，请参阅图像

我尝试了不同的设计方式，比如XML，以编程方式，但我无法取得任何成功。我使用XML代码从底部做圆圈但是当我使用任何图像或横幅滑块如图所示时，它会保持整个视图。

现在我正在使用此代码XML

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@drawable/bottom_radius"
    android:orientation="vertical">

    <ss.com.bannerslider.views.BannerSlider
        android:id="@+id/bannerSlider"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

bottom_radius.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimaryDark" />
    </shape>
</item>
<item
    android:bottom="4dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />
    </shape>
</item>

输出就像XML一样

XML输出看起来像我预期的那样好，但是当我运行程序并在移动设备或模拟器上看到输出时，输出看起来像

请提供解决方案，以便我可以设计我想要设计的内容。我将非常感谢你。

Answer 1

将android:background="@drawable/bottom_radius"放入图片而不是linearlayout

Answer 2

制作一个可绘制的文件。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke android:width="1dp"
        android:color="@color/colorPrimary"
        />
    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        />
    <corners android:bottomRightRadius="150dp"
        android:bottomLeftRadius="150dp"
        />
</shape>

然后将其设置为主要布局的背景

Answer 3

看一下PorterDuff.Mode课程。它让开发人员以多种不同的方式组合两个位图。我们将使用下面的Porter-Duff模式PorterDuff.Mode.DST_IN。

以下是如何生成您正在寻找的结果的简短演示。首先，结果如下：

我们将使用下面的图像使用Porter-Duff模式PorterDuff.Mode.DST_IN将照片裁剪为我们想要的形状。一旦使用Porter-Duff模式应用，非透明区域将保留在目标位图（我们的照片）中，并且照片中与下面图像的透明像素对应的像素将被抛出。

现在裁剪照片，我们将使用下图显示黄色边框。（上面显示的裁剪位图中的黄色边框并未真正使用。黄色区域中所有像素的Alpha值都是1.0非常重要。）此图像与上一图像具有相同的尺寸，但透明区域也包括黄弧上方的区域。这个drawable将简单地绘制在图像的顶部。

以下是代码：

<强> MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView topImage = findViewById(R.id.bottomImage);
        topImage.setImageBitmap(cropAndOverlay(topImage, R.drawable.smile,
                                               R.drawable.smile_transparent));
    }

    private Bitmap cropAndOverlay(@NonNull ImageView imageView,
                                  @DrawableRes int cropId, @DrawableRes int overlayId) {
        // Get the bitmap for the current image.
        Bitmap dst = ((BitmapDrawable) imageView.getDrawable()).getBitmap();

        // Get the cropping image. This is the Porter-Duff source image.
        Bitmap src = Bitmap.createBitmap(dst.getWidth(), dst.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas resultCanvas = new Canvas(src);
        Drawable drawable = ResourcesCompat.getDrawable(getResources(), cropId, null);
        drawable.setBounds(0, 0, resultCanvas.getWidth(), resultCanvas.getHeight());
        drawable.draw(resultCanvas);

        // Combine the source with the destination bitmap while applying the Porter-Duff mode.
        Bitmap resultBitmap = getPorterDuffBitmap(dst, src, PorterDuff.Mode.DST_IN);
        resultCanvas.setBitmap(resultBitmap);

        // Place the overlay image on the bitmap.
        drawable = ResourcesCompat.getDrawable(getResources(), overlayId, null);
        drawable.setBounds(0, 0, resultBitmap.getWidth(), resultBitmap.getHeight());
        drawable.draw(resultCanvas);
        dst.recycle();
        return resultBitmap;
    }

    private Bitmap getPorterDuffBitmap(Bitmap dst, Bitmap src, PorterDuff.Mode mode) {
        Bitmap bitmap =
            Bitmap.createBitmap(dst.getWidth(), dst.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);

        // Draw the original bitmap (DST)
        canvas.drawBitmap(dst, 0, 0, null);

        // Draw the mask (SRC) with the specified Porter-Duff mode
        Paint maskPaint = new Paint();
        maskPaint.setXfermode(new PorterDuffXfermode(mode));
        canvas.drawBitmap(src, 0, 0, maskPaint);

        return bitmap;
    }
}

和XML：

<强> activity_main.xml中

<LinearLayout 
    android:id="@+id/mainLayout"
    android:background="#b1a8a8"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/bottomImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/photo" />

</LinearLayout>

我在主要活动中提出了这个问题，但该技术可能会更好地应用于自定义视图。

如何从底部设计圆形视图？

3 个答案: