android shape 按钮背景_Android利用shape实现圆形按钮

如果你的应用中需要一个圆形按钮，你能想到几种实现方式？

我在这里有几种思路，简单的说一下

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;

}

});

}

}

再次运行，就是最上面的那张图片的效果了。