Android中的圆形按钮

Posted 2023-04-14

【中文标题】Android中的圆形按钮

【英文标题】：Rounded Button in Android

【发布时间】：2012-03-09 05:29:20

【问题描述】：

我想在 android 程序中创建圆形按钮。我看过How to create EditText with rounded corners?

我想要实现的是：

圆边按钮 更改按钮在不同状态下的背景/外观（如 Onclick、Focus） 使用我自己的 PNG 作为背景，而不是创建形状。

【问题讨论】：

nishantvnair.wordpress.com/2010/11/09/…

谷歌有新框架，新技术更好Jetpack Compose

【参考方案1】：

您可以在不借助 ImageView 的情况下制作圆角按钮。

一个背景选择器资源，button_background.xml:

<?xml version="1.0" encoding="utf-8" ?> 
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <!--  Non focused states 
      --> 
      <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
      <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
     <!--  Focused states 
      --> 
      <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
      <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
     <!--  Pressed 
      --> 
      <item android:state_pressed="true" android:drawable="@drawable/button_press" /> 
    </selector>

对于每个状态，一个可绘制资源，例如button_press.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android: android:color="#FF404040" /> 
  <corners android:radius="6dp" /> 
  <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" /> 
</shape>

注意corners 元素，这会让你得到圆角！

然后在按钮上设置背景drawable：

android:background="@drawable/button_background"

编辑 (9/2018)：同样的技术可用于创建圆形按钮。圆形实际上只是一个方形按钮，其半径大小设置为方形边的 1/2

此外，在上面的示例中，stroke 和 gradient 不是必需元素，它们只是示例和您可以看到圆角形状的方式

【讨论】：

CSMith。我让选择器工作了。关于将代码放在哪里的第二部分，我有点困惑。我是否创建一个单独的 xml 文件。如果是这样，我该怎么称呼它？我假设按钮，我仍然将它的背景设置为@drawable/button_background ... Thx

是的，将背景设置为 button_background，您将在您的选择中为每个“状态”提供一个 xml 文件，第二部分是一个示例 button_press.xml。

CSmith。那么这个单独的 xml 文件在哪里被调用。在上面的示例中，您将背景设置为可绘制对象，并且可以很好地使背景在交互时发生变化。但是，除非您创建 png，否则该按钮不会被舍入。圆角并使用九个补丁以避免失真。

我对 android 开发很陌生，这个问题可能会非常天真：我应该将 XML 文件添加到哪个 drawable 文件夹？我有四个不同的drawable 文件夹：drawable-hdpi； drawable-mdpi; drawable-xhdpi; drawable-xxhdpi.

@ikartik90，使用drawable。其他文件夹通常用于覆盖“基础”可绘制文件夹中针对密度特定资产或设置的设置，在此示例中，不存在任何特定于密度的覆盖。

【参考方案2】：

如果您需要 Android 中的圆形按钮，则创建一个 XML 文件“RoundShapeBtn.xml”作为可绘制对象。

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">   
  <solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
  <corners
   android:bottomRightRadius="10dp"
   android:bottomLeftRadius="10dp"
   android:topLeftRadius="10dp"
   android:topRightRadius="10dp"/>
</shape>

将此添加到您的按钮代码中：

android:background="@drawable/RoundShapeBtn"

【讨论】：

是否也要在此处添加字体，以防我希望按钮文本为特定字体？

@GarimaTiwari 是的，您可以在设计相关方面做到这一点以及更多

实际上，如果您使用 CapitalLettersInTheName.. 命名文件，则会出现构建错误.. :)

【参考方案3】：

在 android 的 drawable 文件夹中创建 xml 文件：

rounded_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <corners android:radius="20dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid android:color="#EEFFFFFF"/> // Button Colour
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>

</shape>

现在这个 xml 文件作为你的按钮背景。

 <Button
        android:id="@+id/button"
        android:layout_
        android:layout_
        android:layout_gravity="center"
        android:background="@drawable/rounded_button"
        android:text="@string/button_text"
        android:textColor="@color/black"/>

【讨论】：

这实际上是大多数人正在寻找的。非常弯曲光滑的矩形边缘。如何在按钮上放置阴影？谢谢！

恒星！如果有人对必须制作单独的圆形按钮 XML 以获得不同的颜色感到恼火，您可以从可绘制 XML 中删除 solid android:color，而是使用 android:backgroundTint 为每个 Button 指定颜色

@K_7 如果你这样做，你会失去高程和阴影。只要按照这个，当你按住按钮时，你会得到高程和阴影。

【参考方案4】：

像这样扩展ImageView：

public class RoundedImageView extends ImageView 
  private static final String TAG = "RoundedImageView";

  private float mRadius = 0f;

  public RoundedImageView(Context context) 
    super(context);
  

  public RoundedImageView(Context context, AttributeSet attrs) 
    super(context, attrs);

    // retrieve styles attributes
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
    mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
    a.recycle();
  

  @Override
  protected void onDraw(Canvas canvas) 
    // only do this if we actually have a radius
    if(mRadius > 0) 
      RectF rect = new RectF(0, 0, getWidth(), getHeight());
      Path clipPath = new Path();
      clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
      canvas.clipPath(clipPath);
    
    super.onDraw(canvas);
  

然后将你的普通背景资源应用到它上面，它应该用圆角剪裁。

【讨论】：

默认有R.styleable.RoundedView_radius和R.styleable.RoundedView吗？

Cody，我如何查看 android.widget.imageview.class 的源代码。我不断收到您是否要为其附加源文件，因为它在 eclipse 中找不到。

@Jib 你可以访问Android源代码：source.android.com/source/downloading.html

感谢 Cody，这个程序化解决方案正是我所需要的。

【参考方案5】：

最好将按钮状态和形状放在 1 个 xml 选择器文件中。这应该使您的应用程序运行得更快/更好。试试这个（由 Android 应用程序开发简介提供）。在这里不发送垃圾邮件只是显示这不是我的代码。

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android: android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333"      android:endColor="#555555"  />            
    </shape>
    </item>
    <item android:state_focused="true">
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android: android:color="#333333" />
     <solid android:color="#58857e"/>       
    </shape>
    </item>  
    <item >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android: android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />            
    </shape>
    </item>

    </selector>

P.S. 设计提示：渐变和圆角矩形最好在您无法判断它们的存在时使用 - 明智地使用。

【参考方案6】：

It is recommended by Google 你不会模仿其他平台的 UI 元素。我不会在 Android 应用程序中放置圆形 ios 样式按钮。

【讨论】：

开发者决定将丑陋的用户界面作为标准并不是我们的错。

这有点过时了，但我想我会向任何阅读我以前公司的应用程序的人补充说，由于大量的 iOS UI 样式，应用程序商店几乎没有特色。我们必须修改并放入适当的材料设计考虑因素。遵守指南始终很重要！

@lase 完全不同意这些指导方针，它们不是硬性规定

@martinseal1987 好吧，尽管规则可能很宽松，但我只是为未来的读者提供轶事证据，证明平台持有者确实关心风格一致性，这可能通过以下方式显而易见答案链接到样式指南和跨平台实现的大部分内容。随意掷骰子！

@lase playstore 绝不会因为您的应用不遵守准则而否认您的应用，它们不是任何意义上的规则

【参考方案7】：

这可以使用角属性来完成。看下面的xml。

<item>
    <shape android:shape="rectangle" >
        <stroke
            android:
            android:
            android:color="#ffee82ee" />

        <solid android:color="#ffee82ee" />

        <corners
            android:bottomLeftRadius="102.0dip"
            android:bottomRightRadius="102.0dip"
            android:radius="102.0dip"
            android:topLeftRadius="102.0dip"
            android:topRightRadius="102.0dip" />
    </shape>
</item>

【参考方案8】：

圆形按钮也可以使用环形drawable创建，参见http://www.zoftino.com/android-shape-drawable-examples

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="40dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
    <padding android:bottom="50dp"
        android:left="16dp"
        android:right="16dp"
        android:top="50dp"/>
</shape>

【参考方案9】：

创建名为 btnOval 的 Drawable 资源-->然后是过去的代码；

 <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"  
android:padding="10dp">   
      <solid android:color="#6E6E6E"/> 
    </shape>

和按钮标签内的用户，

<Button
andorid:
android:hieght=""
android:background="@Drawable/btnOval"
/>

【参考方案10】：

试试下面的代码 创建一个名为 circular_button.xml 的可绘制文件并插入下面的

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:bottomRightRadius="100dp"
    android:bottomLeftRadius="100dp"
    android:topRightRadius="100dp"
    android:topLeftRadius="100dp"/>
</shape>

然后把按钮的背景改成这个drawable文件

 <Button
                android:layout_
                android:layout_
                android:background="@drawable/circle_button"
                android:text="Button"/>

如果你想要一个完整的圆形按钮，你可以使用下面的 drawable

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#008577"/>

    <size
        android:
        android:/>
</shape>