天天看点

Android使用纯XML代码定制简单的Button样式

效果图:

Android使用纯XML代码定制简单的Button样式

在Android开发中,有时候不使用图片,仅通过XML代码就可以定制简单的Button样式(例如圆角、边框、渐变色等),因为比较简单,所以下面就直接贴代码,不进行详细的说明了:)

在drawable文件夹下新建一个btn_style.xml文件:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按钮按下时的样式 -->
    <item android:state_pressed="true">
        <!-- shape:按钮形状 -->
        <shape android:shape="rectangle">
            <!-- solid:背景填充颜色 -->
            <solid android:color="#656d78" />
            <!-- gradient:背景渐变颜色,如果不想按钮只有一种颜色,可以使用这个标签 -->
            <gradient android:startColor="#dddddd" android:centerColor="#999999" android:endColor="#555555" 
                android:angle="0" />
            <!-- corners:圆角 -->
            <corners android:radius="3dip" />
            <!-- stroke:边框 -->
            <stroke android:width="1dip" android:color="#f403c9" />
            <!-- padding:内边距 -->
            <padding android:left="10dp" android:top="10dp" 
                android:right="10dp" android:bottom="10dp" /> 
        </shape>
    </item>
    <!-- 按钮获得焦点时的样式 -->
    <item android:state_focused="true">
        <!-- shape:按钮形状 -->
        <shape android:shape="rectangle">
            <!-- solid:背景填充颜色 -->
            <solid android:color="#656d78" />
            <!-- gradient:背景渐变颜色,如果不想按钮只有一种颜色,可以使用这个标签 -->
            <gradient android:startColor="#dddddd" android:centerColor="#999999" android:endColor="#555555" 
                android:angle="0" />
            <!-- corners:圆角 -->
            <corners android:radius="3dip" />
            <!-- stroke:边框 -->
            <stroke android:width="1dip" android:color="#f403c9" />
            <!-- padding:内边距 -->
            <padding android:left="10dp" android:top="10dp" 
                android:right="10dp" android:bottom="10dp" /> 
        </shape>
    </item>
    <!-- 按钮正常时的样式 -->
    <item>
        <!-- shape:按钮形状 -->
        <shape android:shape="rectangle">
            <!-- solid:背景填充颜色 -->
            <solid android:color="#656d78" />
            <!-- gradient:背景渐变颜色,如果不想按钮只有一种颜色,可以使用这个标签 -->
            <gradient android:startColor="#dddddd" android:centerColor="#999999" android:endColor="#555555" 
                android:angle="180" />
            <!-- corners:圆角 -->
            <corners android:radius="3dip" />
            <!-- stroke:边框 -->
            <stroke android:width="1dip" android:color="#f403c9" />
            <!-- padding:内边距 -->
            <padding android:left="10dp" android:top="10dp" 
                android:right="10dp" android:bottom="10dp" /> 
        </shape>
    </item>
</selector>
           

布局文件activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    android:orientation="vertical"
    tools:context="com.example.buttonstyledemo.MainActivity" >

    <!-- 按钮控件 -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginBottom="10dp"
        android:background="@drawable/btn_style"
        android:text="使用XML定制Button样式"/>

</LinearLayout>
           

java文件:

package com.example.buttonstyledemo;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}
           

注:对于btn_style.xml文件中的<shape>标签,它的作用是设置控件的形状,它的属性android:shape可以指定如下4个值:

  • rectangle:矩形
  • oval:椭圆
  • line:直线
  • ring:圆环