如果你的应用中需要一个圆形按钮,你能想到几种实现方式?
我在这里有几种思路,简单的说一下
1、使用圆形的背景图片,通过它实现按钮圆形
2、自定义按钮,重新绘制实现按钮圆形
3、使用shape中oval类型作为背景实现按钮圆形
相比较来说方法1最简单、方法2最复杂、方法3比方法1稍微复杂了一点点,但是方法1需要添加背景图片,方法3却不需要,换一种说法就是使用方法3可以减小应用程序的大小。
前两种方法不作讨论,这里简单的说一下方法3,方法3使用shape中oval类型来制作控件背景,运行之后你会发现控件是椭圆形的,这不是你想要的,那么这里就要另外的费一些功夫,多写几行代码来实现了,以达到设置空间宽高相等。同样的这种方法也适合其它控件。
完成效果是这样的
新建一个项目CircleBtnDemo
打开activity_main.xml,添加一个Button
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.circlebtndemo.MainActivity$PlaceholderFragment" >
android:id="@+id/circle_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="按钮"
android:textSize="18sp"
android:layout_centerInParent="true"
android:background="@drawable/selector_btn_bk" />
res/drawable下新建背景选择器selector_btn_bk.xml
运行项目,你会发现你的Button是这样的
不是圆形的,修改为宽高相等就行了。
打开MainActivity,添加以下代码
package com.example.circlebtndemo;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.RelativeLayout;
public class MainActivity extends ActionBarActivity {
private Button circleBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circleBtn = (Button) findViewById(R.id.circle_btn);
ViewTreeObserver vto = circleBtn.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
int height = circleBtn.getMeasuredHeight();
int width = circleBtn.getMeasuredWidth();
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) circleBtn
.getLayoutParams();
if (width > height) {
params.width = width;
params.height = width;
} else {
params.width = height;
params.height = height;
}
circleBtn.setLayoutParams(params);
return true;
}
});
}
}
再次运行,就是最上面的那张图片的效果了。