我正在尝试在Android中创建2个按钮/图像按钮。它们都有一个icon在其中。第一个按钮有stoke,第二个按钮是filled。我已经尝试创建drawable和其他一些组合,但是我发现很难得到正确的组合。有人能帮助生成按钮的XML吗?以下是按钮的设计。编辑-注意:我正在使用矢量绘图。先谢了。
icon
stoke
filled
drawable
c90pui9n1#
您可以使用MaterialButton实现此目的。您可以在材料设计文档中找到所有材料按钮属性。要使用材料设计,您的应用主题样式必须继承自Theme. MaterialComponents。例如:Theme.MaterialComponents.DayNight.DarkActionBar1.对于笔划图像按钮,您可以按如下方式操作:
<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>
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" />
2条答案
按热度按时间c90pui9n1#
您可以使用MaterialButton实现此目的。您可以在材料设计文档中找到所有材料按钮属性。要使用材料设计,您的应用主题样式必须继承自Theme. MaterialComponents。例如:Theme.MaterialComponents.DayNight.DarkActionBar
1.对于笔划图像按钮,您可以按如下方式操作:
这里的关键点是使用样式Widget.MaterialComponents.Button.OutlinedButton.Icon来设置按钮轮廓样式和自定义app:shapeAppearanceOverlay样式,您可以通过在styles.xml中将角大小定义为50%来绘制圆形,如下所示:
2.对于“填充图像”按钮,您可以按如下方式操作:
这与上面相同,但样式为“控件.材料组件.按钮.大纲按钮.图标
上述示例的矢量可绘制对象为:可绘制/ic_add_24dp.xml:
和可绘制/ic_pedal_bike_24dp.xml:
mzsu5hc02#
对于第一个图标,使用材质设计中的PNG或使用您自己的图标
第二次我用了icon