Android控件之圆角的Button和其他控件的使用


                                                                                圆角的Button


下面是效果图1:

下面是效果图2:


在res目录下的drawable或drawable-mdpi建立xml文件shape.xml,如下图所示:


shape.xml-------图1的效果


<span style="font-size:24px;"><?xml version="1.0" encoding="UTF-8"?> 
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <!-- 填充的颜色 --> 
    <solid android:color="#FFFFFF" /> 
    <!-- 设置按钮的四个角为弧形 --> 
    <!-- android:radius 弧形的半径也就是弧形的弧度 --> 
    <corners android:radius="5dip" /> 
      
<!-- padding:Button里面的文字与Button边界的间隔 --> 
<padding 
   android:left="10dp" 
   android:top="10dp" 
   android:right="10dp" 
   android:bottom="10dp" 
/> 
</shape> </span>

shape2.xml-------图2的效果


<span style="font-size:24px;"><?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- 填充的颜色:这里设置背景透明 -->
    <solid android:color="@android:color/transparent" />
    <!-- 边框的颜色 :不能和窗口背景色一样-->
    <stroke
        android:width="3dp"
        android:color="#00ff00" />
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="5dip" />

    <!-- padding:Button里面的文字与Button边界的间隔 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape></span>


main.xml

在android:background="@drawable/shape"就使用了shape.xml资源

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
<TextView    
    android:layout_width="fill_parent"   
    android:layout_height="wrap_content"   
    android:text="@string/hello" 
    />   
<Button   
    android:id="@+id/roundButton" 
    android:text=" 圆角按钮 " 
    android:layout_width="wrap_content"   
    android:layout_height="wrap_content"   
    android:background="@drawable/shape" 
    /> 
</LinearLayout> </span>


strings.xml

<span style="font-size:24px;"><?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <string name="hello">Hello World, RoundButtonDemoActivity!</string> 
    <string name="app_name">RoundButtonDemo</string> 
</resources> </span>


MaActivity.java


<span style="font-size:24px;">import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

	private Button roundButton;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		  roundButton=(Button)findViewById(R.id.roundButton);  
		 //使用匿名类注册Button事件  
        roundButton.setOnClickListener(new OnClickListener()  
      {       
            public void onClick(View v)  
            {  
                Toast.makeText(MainActivity.this, "你点击了圆角按钮",Toast.LENGTH_LONG).show();  
            }  
        });  
	}
}</span>


*******************************************************************************
下面我们来看看一个似曾相识的UI布局:


它主要是利用自己写好的drawable里的布局文件的引用实现的倒圆角效果:

linearlayout_blue_beijing.xml                  蓝色的背景 (如上图的保存按钮)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#0099cc" />
    <stroke
        android:width="0.01dp"
        android:color="#0099cc" />
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"/>
</shape>

linearlayout_red_beijing.xml                   红色 的背景 (如上图的用户ID输入框,只是边框是红色的)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <stroke
        android:width="0.01dp"
        android:color="#f00" />
    <corners android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomRightRadius="20dp"
        android:bottomLeftRadius="20dp"/>
</shape>

linearlayout_userxieyi.xml                         灰色的背景

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

linearlayout_white_beijing.xml               蓝 的背景 (如上图的用户ID输入框)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <stroke
        android:width="0.01dp"
        android:color="#0099cc" />
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"/>
</shape>

其实,写这么多只是想你们可以拿来直接使用,方便快捷。当然如果你有喜欢的颜色可以自己进行设置:

第三行color表示背景里面的颜色:(对应上面的代码)
 <solid android:color="#ffffff" />

第六行color表示背景边框的颜色

 <stroke
        android:width="0.01dp"
        android:color="#0099cc" />

其中corners里的表示四个属性用来设置圆倒角的圆弧度:

<corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"/>



                            ————————————————————————OK——————————————————————
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值