android 包含圆角图像的小部件

bvhaajcl  于 2023-06-20  发布在  Android
关注(0)|答案(2)|浏览(90)

如何制作一个材质你喜欢的小部件与图像的角落是圆的?
在Google Photo中是already made,但如何获得相同的效果?
由于RemoteView的限制,许多方式(如ShapeableImageView)是禁止的,无法绕过。

以下是第一个建议答案的一些其他详细信息:

我的widget. xml看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/colorBackground"
    android:theme="@style/widget_theme">

    <ImageView
        android:id="@+id/widget_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/MY_IMAGE" />

</LinearLayout>
    • res/values文件夹中的attrs.xml**如下所示:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="AppWidgetAttrs">
        <attr name="appWidgetPadding" format="dimension" />
        <attr name="appWidgetInnerRadius" format="dimension" />
        <attr name="appWidgetRadius" format="dimension" />
    </declare-styleable>
</resources>
    • res/values文件夹中的styles.xml**如下所示:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Widget theme -->
    <style name="widget_theme" parent="Theme.Material3.DayNight">
        <item name="appWidgetRadius">@dimen/rounded_corners</item>
        <item name="appWidgetInnerRadius">@dimen/rounded_corners_inner</item>
        <item name="appWidgetPadding">0dp</item>
    </style>

</resources>
    • res/values文件夹中的dimens.xml**如下所示:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="rounded_corners">16dp</dimen>
    <dimen name="rounded_corners_inner">8dp</dimen>
</resources>

我在虚拟Pixel 4a(API 30)上测试我的应用。
最小API为API 24
Compile和Target SDK都是API 31

oxiaedzo

oxiaedzo1#

实际解决方案

op想要的是一个只包含图像的小部件,并且该图像应该是四舍五入的,例如:

您所需要的只是:

  • 小部件布局,包含一个带有图像的imageview。在上面的例子中,我有(我使用线性布局,但它取决于期望的最终结果):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/colorBackground"
    android:theme="@style/WidgetTheme">

    <ImageView
        android:id="@+id/test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/test" />

</LinearLayout>
  • 一个小部件的样式,这是我的(支持圆角和自动暗/亮主题,即使在这个特定的小部件中,背景颜色是不可见的)
<!-- Widget theme -->
    <style name="WidgetTheme" parent="Theme.Material3.DayNight">
        <item name="appWidgetRadius">@dimen/rounded_corners</item>
        <item name="appWidgetInnerRadius">@dimen/rounded_corners_inner</item>
        <item name="appWidgetPadding">0dp</item>
    </style>
  • 以上属性必须在attrs.xml文件中声明为可样式化。再一次,这是我的:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="AppWidgetAttrs">
        <attr name="appWidgetPadding" format="dimension" />
        <attr name="appWidgetInnerRadius" format="dimension" />
        <attr name="appWidgetRadius" format="dimension" />
    </declare-styleable>
</resources>

这就是全部,如果你想让图像是圆形的,只需设置一个巨大的边界半径。

老的和被误解的解决方案

我可能迟到了,但我也有同样的问题。一个简单的解决方法是,当图像是小部件布局中的普通ImageView时,使用前景来“屏蔽”图像窗体。所以我做的是:
1.创建此可绘制图形,并根据需要命名

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
      <path
          android:pathData="M-0.1094,-0.0957L-0.1094,24.0957L24.1094,24.0957L24.1094,-0.0957L-0.1094,-0.0957zM12,0.123A11.8773,11.8773 0,0 1,23.877 12A11.8773,11.8773 0,0 1,12 23.877A11.8773,11.8773 0,0 1,0.123 12A11.8773,11.8773 0,0 1,12 0.123z"
          android:fillColor="#000"/>
    </vector>

1.在ImageView前景中使用这个drawable,并将其颜色设置为背景色(这里我使用系统背景色,但如果不同,请使用您的颜色):

android:foreground="@drawable/ic_inverted_circle_foreground_black_24dp"
android:foregroundTint="?android:attr/colorBackground"

1.结果:

编辑:操作请求是不同的,但这仍然是一个有效的解决方案,为图像的布局部件,所以我不会删除它,以防万一。

rjjhvcjd

rjjhvcjd2#

像其他人一样,我也在过去的几周里敲打我的头,以获得带有图像的圆形小部件。我只得到了我的解决方案,像char一样工作,但它只适用于API 31及以上。这就是你必须做出的牺牲。
要在任何小部件中获得圆形图像,就像这样:

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/flower"
    android:clipToOutline="true"
    android:background="@drawable/roundedcorner"/>

这里的关键是使用
android:clipToOutline.
可抽拉圆角

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="25.0dip" />
    <solid android:color="@android:color/white" />
</shape>

不幸的是,这个xml属性只适用于API 31及以上版本。对于Android版本以下,它将简单地忽略属性,并显示整个图像没有任何圆角。

相关问题