如何在 Android 中实现 Shapeable ImageView？

在 Android 中，ShapeableImageView 用于将图像的形状更改为圆形、菱形等。此外，您可以为 ImageView 设置角半径。通过使用此 ShapeableImageView 并使用最少的代码，您可以做更多事情。所以在本文中，我们将在 android 中制作一个 ShapableImageView。通过实现这个应用程序，我们将大致了解如何在 android 应用程序中完成照片编辑。在这里，我们将实现两个功能，即剪切或圆角图像的角落。

我们将在本文中构建什么？

这里我们将使用两张图片，一张我们将使用 XML 代码编辑，另一张使用Java代码。使用 SeekBar，用户可以分别对图像的所有四个角进行圆角或切割。请注意，我们将使用Java语言来实现这个应用程序。下面给出了一个示例视频，以了解我们将在本文中做什么。

分步实施

步骤 1：创建一个新项目

• 打开一个新项目。
• 我们将使用Java语言开发 Empty Activity。保持所有其他选项不变。
• 您可以在方便时更改项目的名称。
• 将有两个名为 activity_main.xml 和 MainActivity 的默认文件。Java

如果您不知道如何在 Android Studio 中创建新项目，可以参考如何在 Android Studio 中创建/启动新项目？

第 2 步：添加所需的依赖项

打开 Gradle 脚本 > build.gradle(module)。转到应用>右键单击>打开模块设置>依赖项>添加依赖项>库依赖项。

在搜索栏中输入材料，然后单击搜索。选择下图中显示的依赖项-

单击立即同步以保存更改。

第 3 步：使用 activity_main.xml 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件。下面是activity_main.xml文件的代码。

第 4 步：处理 Themes.xml 文件

导航到res > values > Themes > Themes.xml文件并在其中使用以下代码。

XML

执行上述代码后，activity_main.xml 文件的设计如下所示。

第 5 步：使用MainActivity。Java

转到MainActivity。 Java文件并参考以下代码。下面是MainActivity 的代码。 Java文件。代码中添加了注释以更详细地理解代码。

Java

package com.example.shapableimageview;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.SeekBar;
import android.widget.Spinner;
  
import com.google.android.material.imageview.ShapeableImageView;
import com.google.android.material.shape.CornerFamily;
  
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {
  
    // Initialize variable
    ShapeableImageView imageView;
    Spinner spFamily;
    SeekBar sbTopLeft,sbTopRight,sbBottomLeft,sbBottomRight;
    int cornerFamily= CornerFamily.CUT,topLeft=0,topRight=0,bottomLeft=0,bottomRight=0;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // assign variable
        imageView=findViewById(R.id.image_View);
        spFamily=findViewById(R.id.sp_family);
        sbTopLeft=findViewById(R.id.sb_top_left);
        sbTopRight=findViewById(R.id.sb_top_right);
        sbBottomLeft=findViewById(R.id.sb_bottom_left);
        sbBottomRight=findViewById(R.id.sb_bottom_right);
  
        // Initialize array list
        ArrayList arrayList=new ArrayList<>();
          
        // add values in array List
        arrayList.add("cut");
        arrayList.add("rounded");
  
        // set adapter
        spFamily.setAdapter(new ArrayAdapter<>(MainActivity.this,
                android.R.layout.simple_spinner_dropdown_item,arrayList));
  
        // Set Listener on spinner
        spFamily.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView parent, View view, int position, long id) {
                // check condition
                if(position==0)
                {
                    // when cut selected
                    cornerFamily=CornerFamily.CUT;
                }
                else
                {
                    // when rounded selected
                    cornerFamily=CornerFamily.ROUNDED;
                }
  
                // create update method
                updateImage();
            }
  
            @Override
            public void onNothingSelected(AdapterView parent) {
  
            }
        });
  
        // set listener on all seekbar
        sbTopLeft.setOnSeekBarChangeListener(this);
        sbTopRight.setOnSeekBarChangeListener(this);
        sbBottomRight.setOnSeekBarChangeListener(this);
        sbBottomLeft.setOnSeekBarChangeListener(this);
    }
  
    private void updateImage() {
        // set appearance
        imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel().toBuilder()
                .setTopLeftCorner(cornerFamily,topLeft)
                .setTopRightCorner(cornerFamily,topRight)
                .setBottomLeftCorner(cornerFamily,bottomLeft)
                .setBottomRightCorner(cornerFamily,bottomRight)
                .build());
    }
  
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        switch (seekBar.getId())
        {
            case R.id.sb_top_left:
                                    topLeft=progress;
                                    break;
            case R.id.sb_top_right:
                                    topRight=progress;
                                    break;
            case R.id.sb_bottom_left:
                                    bottomLeft=progress;
                                    break;
            case R.id.sb_bottom_right:
                                    bottomRight=progress;
                                    break;
        }
        // call update method
        updateImage();
    }
  
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
  
    }
  
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
  
    }
}

这是我们应用程序的最终输出。

输出：