如何用图片制作自定义形状（在形状内）

Posted 2023-02-26

【中文标题】如何用图片制作自定义形状（在形状内）

【英文标题】：How can make custom shape with picture (inside the shape)

【发布时间】：2021-11-08 04:05:54

【问题描述】：

我是 android 编程新手，我尝试设计这种形状：

检查this link查看我想要设计的形状

这个形状是怎么做出来的，怎么把图片做成亚历山大这样的形状？

谁能帮帮我？ 请回答所有细节以了解代码

谢谢

【参考方案1】：

在 build.gradle 中添加依赖

implementation 'com.github.siyamed:android-shape-imageview:0.9.+@aar'

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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_
    android:layout_
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <com.github.siyamed.shapeimageview.mask.PorterShapeImageView
        android:id="@+id/imageView"
        android:layout_
        android:layout_
        app:siShape="@drawable/shape" />
    
</LinearLayout>

活动

public class MainActivity extends AppCompatActivity 

    ImageView imageView;

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

        imageView=findViewById(R.id.imageView);
        imageView.setImageResource(R.drawable.img);
    

可绘制资源

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFC107" />
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners
        android:topLeftRadius="0dip"
        android:topRightRadius="70dip"
        android:bottomLeftRadius="70dip"
        android:bottomRightRadius="0dip" />
</shape>

输出

【讨论】：

这个形状怎么插入图片？

我已经编辑了答案，请查看@Kirollos Mallak

感谢您的回答...... @Tanveer Hasan 我正在使用 Kotlin（这会有所不同吗？）还有其他东西我正在使用卡片视图和 recyclerView，所以我可以使用形状并插入图片（在 XML 中，而不是像你做的那样 Activity）

【参考方案2】：

您可以为此使用ShapeableImageView，它在material 组件包中提供。如果你已经在项目中使用了 Material 主题，那么你可以继续使用，否则，添加 material 依赖。

implementation 'com.google.android.material:material:1.4.0'

并且继承，你 AppTheme 从 MaterialComponents，在 styles.xml

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
     ...
     ...
</style>

为style.xml 添加新样式以创建图像的圆角。

<style name="ShapeAppearanceOverlay.RoundedCorner" parent="">
    <item name="cornerSizeTopRight">75dp</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeBottomLeft">75dp</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
</style>

在布局中将ImageView 更改为ShapeableImageView，并在ShapeAppearnaceOverlay 上方添加样式，使用app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedCorner"

<com.google.android.material.imageview.ShapeableImageView
        android:layout_
        android:layout_
        android:src="@drawable/pots"
        android:scaleType="centerCrop"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedCorner"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toEncrypt"
        app:layout_constraintBottom_toTopOf="@id/decrypted"
        android:id="@+id/encrypted" />

注意 - 使用android:scaleType="centerCrop"，这样您就不会在图像的任何一侧出现剪切效果。

结果 -