我想在一个安卓程序中创建圆角按钮。我已经查看了如何创建带有圆角的EditText?
我的目标是:
- 圆角边缘按钮
- 在不同状态下更改按钮背景或外观(如OnClick,Focus)
- 使用自己的PNG作为背景而不是创建一个形状。
我想在一个安卓程序中创建圆角按钮。我已经查看了如何创建带有圆角的EditText?
我的目标是:
你可以通过使用背景选择器资源button_background.xml
来实现带圆角的按钮,而无需使用ImageView。
<?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: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
不是必需的元素,它们只是示例和您可以看到圆角形状的方式。
drawable-hdpi
;drawable-mdpi
;drawable-xhdpi
;drawable-xxhdpi
。 - ikartik90 <?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"
请注意,我仅翻译内容并保留HTML标记,不提供解释。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_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"/>
solid android:color
,并改为使用每个Button
的android:backgroundTint
指定颜色。 - Kartik Chugh按照以下方式扩展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);
}
}
将您的普通背景资源应用于它,它应该被剪裁成圆角。
把按钮的状态和形状放在一个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>
P.S.-设计提示:渐变和圆角矩形最好在几乎看不出它们存在的时候使用-明智使用。
<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>
<?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>
<?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 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>