Android 中的圆形按钮

我想在 Android 程序中创建圆形按钮

我想实现的是:

  1. 圆边按钮
  2. 在不同的状态下更改按钮的背景/外观(如 Onclick，Focus)
  3. 使用我自己的 PNG 作为背景，而不是创建一个形状。
235357 次浏览
小开

像这样扩展 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);
}
}

并应用您的正常背景资源到它，它应该是圆角剪辑。

小开
最佳答案

您可以在不使用 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>

对于每个状态，都有一个可绘制的资源，例如:

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

注意 corners元素，这使您获得圆角！

然后在按钮上设置可绘制的背景:

android:background="@drawable/button_background"

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

此外，在上面的例子中，stroke和 gradient不是必需的元素，它们只是例子和方法，您将能够看到圆角形状

小开

Google 建议您不要模仿来自其他平台的 UI 元素。我不会在 Android 应用程序中放置圆形的 iOS 风格按钮。

小开

如果您在 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"
小开

这可以通过使用隅角属性来完成。

<item>
<shape android:shape="rectangle" >
<stroke
android:height="1.0dip"
android:width="1.0dip"
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>

小开

最好将按钮状态和形状放在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:width="1dip" 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:width="1dip" android:color="#333333" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle"  >
<corners android:radius="12dip" />
<stroke android:width="1dip" android:color="#333333" />
<gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />
</shape>
</item>


</selector>

附注: 设计提示: 渐变和圆角矩形是最好的使用时，你几乎不能告诉他们在那里-使用明智。

小开

在 android 中的可绘制文件夹中创建 xml 文件，如:

Round _ 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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/rounded_button"
android:text="@string/button_text"
android:textColor="@color/black"/>
小开

圆形按钮也可以用环形图创建，参见 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>
小开

创建名为 btnOval 的可绘制资源—— > 然后过去的代码;

 <?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:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>
小开

试试以下代码 创建一个名为 凡尔赛循环 _ 按钮. 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>

然后将按钮的背景更改为这个可绘制文件

 <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/circle_button"
android:text="Button"/>

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

<?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:width="120dp"
android:height="120dp"/>
</shape>

提交答案