Android -两个圆形ImageButton,带有填充颜色、笔划和图标

rkkpypqq  于 2023-02-20  发布在  Android
关注(0)|答案(2)|浏览(134)

我正在尝试在Android中创建2个按钮/图像按钮。它们都有一个icon在其中。第一个按钮有stoke,第二个按钮是filled。我已经尝试创建drawable和其他一些组合,但是我发现很难得到正确的组合。有人能帮助生成按钮的XML吗?以下是按钮的设计。编辑-注意:我正在使用矢量绘图。
先谢了。

c90pui9n

c90pui9n1#

您可以使用MaterialButton实现此目的。您可以在材料设计文档中找到所有材料按钮属性。要使用材料设计,您的应用主题样式必须继承自Theme. MaterialComponents。例如:Theme.MaterialComponents.DayNight.DarkActionBar
1.对于笔划图像按钮,您可以按如下方式操作:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:padding="0dp"
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp"
    app:backgroundTint="@android:color/white"
    app:strokeWidth="3dp"
    app:strokeColor="#3e3e3e"
    app:iconTint="#3e3e3e"
    app:icon="@drawable/ic_add_24dp"
    app:iconSize="34dp"
    app:iconGravity="textStart"
    app:iconPadding="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Button.Circle"/>

这里的关键点是使用样式Widget.MaterialComponents.Button.OutlinedButton.Icon来设置按钮轮廓样式和自定义app:shapeAppearanceOverlay样式,您可以通过在styles.xml中将角大小定义为50%来绘制圆形,如下所示:

<style name="ShapeAppearanceOverlay.App.Button.Circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
 </style>

2.对于“填充图像”按钮,您可以按如下方式操作:

<com.google.android.material.button.MaterialButton
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:padding="0dp"
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp"
    app:backgroundTint="#3e3e3e"
    app:icon="@drawable/ic_pedal_bike_24dp"
    app:iconSize="24dp"
    app:iconGravity="textStart"
    app:iconPadding="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Button.Circle"/>

这与上面相同,但样式为“控件.材料组件.按钮.大纲按钮.图标

上述示例的矢量可绘制对象为:可绘制/ic_add_24dp.xml

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

可绘制/ic_pedal_bike_24dp.xml:

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M18.18,10l-1.7,-4.68C16.19,4.53 15.44,4 14.6,4H12v2h2.6l1.46,4h-4.81l-0.36,-1H12V7H7v2h1.75l1.82,5H9.9c-0.44,-2.23 -2.31,-3.88 -4.65,-3.99C2.45,9.87 0,12.2 0,15c0,2.8 2.2,5 5,5c2.46,0 4.45,-1.69 4.9,-4h4.2c0.44,2.23 2.31,3.88 4.65,3.99c2.8,0.13 5.25,-2.19 5.25,-5c0,-2.8 -2.2,-5 -5,-5H18.18zM7.82,16c-0.4,1.17 -1.49,2 -2.82,2c-1.68,0 -3,-1.32 -3,-3s1.32,-3 3,-3c1.33,0 2.42,0.83 2.82,2H5v2H7.82zM14.1,14h-1.4l-0.73,-2H15C14.56,12.58 14.24,13.25 14.1,14zM19,18c-1.68,0 -3,-1.32 -3,-3c0,-0.93 0.41,-1.73 1.05,-2.28l0.96,2.64l1.88,-0.68l-0.97,-2.67c0.03,0 0.06,-0.01 0.09,-0.01c1.68,0 3,1.32 3,3S20.68,18 19,18z"/>
</vector>
mzsu5hc0

mzsu5hc02#

对于第一个图标,使用材质设计中的PNG或使用您自己的图标

<ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="TODO"
            app:srcCompat="@drawable/control_point" />

第二次我用了icon

<ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#595959"
            app:srcCompat="@drawable/pedal_bike" />

相关问题