xml常用样式实现

在android项目开发中，会经常用到xml实现一些效果。以下是我在项目用到的，总结一下和大家分享。

实现效果图：

xml常用样式实现

实现一、实现一个有点击效果的圆角按钮

未点击时的效果：

xml常用样式实现

点击时的效果：

xml常用样式实现

未点击时的xml文件btn_sure_bg_normal.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置填充颜色 -->
    <solid android:color="#ff9faa"/>

    <!-- 设置圆角 -->
    <corners android:radius="3dp"/>

    <!-- 设置变宽宽度和颜色 -->
    <stroke android:width="1dp"
        android:color="#ff9faa"/>
</shape>

点击时的xml文件btn_sure_bg_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置填充颜色 -->
    <solid android:color="#abc"/>

    <!-- 设置圆角 -->
    <corners android:radius="3dp"/>

    <!-- 设置变宽宽度和颜色 -->
    <stroke android:width="1dp"
        android:color="#abc"/>
</shape>

实现点击效果的btn_sure_bg.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_sure_bg_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/btn_sure_bg_normal" />
</selector>

Activity的xml文件，给TextView设置点击事件后，就有点击效果了。未点击时时一个背景颜色为的#ff9faa圆角矩形，点击后是一个背景颜色为#abc的圆角矩形。

<TextView
        android:id="@+id/tv_sure"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/btn_sure_bg"
        android:gravity="center"
        android:text="确定" />

实现二、圆角单项选择按钮

实现效果如图：

xml常用样式实现

总体是一个RadioGroup，RadioGroup里面放3个RadioButton。

RadioGroup背景实现radiogroup_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#ff9faa" />
    <!-- 边框宽度和边框颜色 -->
    <stroke
        android:width="1dp"
        android:color="#ff9faa" />
    <!-- 边框角度 -->
    <corners android:radius="18dp" />
</shape>

RadioButton背景实现radiobutton_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/radiogroup_check_bg"/>
    <item android:drawable="@drawable/radiogroup_bg"/>
</selector>

RadioButton选中时的背景颜色radiogroup_check_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
        <!-- 填充颜色 -->
        <solid android:color="#f3f3f3"/>
        <!-- 线的宽度，颜色灰色 -->
        <stroke android:width="1dp" android:color="#f3f3f3"/>
        <!-- 矩形的圆角半径 -->
        <corners android:radius="18dp" />
</shape>

RadioButton未选中时的背景颜色radiogroup_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#ff9faa" />
    <!-- 边框宽度和边框颜色 -->
    <stroke
        android:width="1dp"
        android:color="#ff9faa" />
    <!-- 边框角度 -->
    <corners android:radius="18dp" />
</shape>

RadioButton文字颜色radiobutton_text_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#ff9faa" android:state_selected="true" />
    <item android:color="#ff9faa" android:state_checked="true" />
    <item android:color="#FFF" />
</selector>

实现圆角单选按钮Activity的xml文件：

<RadioGroup
            android:id="@+id/rg"
            android:layout_width="180dp"
            android:layout_height="25dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:background="@drawable/radiogroup_bg"
            android:orientation="horizontal">

        <RadioButton
                android:id="@+id/rb1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_weight="1"
                android:background="@drawable/radiobutton_bg"
                android:button="@null"
                android:checked="true"
                android:gravity="center"
                android:text="111"
                android:textColor="@drawable/radiobutton_text_bg"
                android:textSize="12sp"/>

        <RadioButton
                android:id="@+id/rb2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_weight="1"
                android:background="@drawable/radiobutton_bg"
                android:button="@null"
                android:gravity="center"
                android:text="121"
                android:textColor="@drawable/radiobutton_text_bg"
                android:textSize="12sp"/>

        <RadioButton
                android:id="@+id/rb3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_weight="1"
                android:background="@drawable/radiobutton_bg"
                android:button="@null"
                android:gravity="center"
                android:text="131"
                android:textColor="@drawable/radiobutton_text_bg"
                android:textSize="12sp"/>
    </RadioGroup>

实现RadioButton的点击切换效果：

private void init() {
        rg = (RadioGroup) findViewById(R.id.rg);

        rb1 = (RadioButton) findViewById(R.id.rb1);
        rb2 = (RadioButton) findViewById(R.id.rb2);
        rb3 = (RadioButton) findViewById(R.id.rb3);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb1:
                        checkd();
                        break;
                    case R.id.rb2:
                        checkd();
                        break;
                    case R.id.rb3:
                        checkd();
                        break;
                }
            }
        });
    }

    //实现点击切换效果
    private void checkd(int index) {
        rb1.setChecked(false);
        rb2.setChecked(false);
        rb3.setChecked(false);
        if (index == ) {
            rb1.setChecked(true);
        } else if (index == ) {
            rb2.setChecked(true);
        } else if (index == ) {
            rb3.setChecked(true);
        }
    }

实现三、开关按钮

开关实现的逻辑很简单，点击ToggleButton时图片进行切换。

实现效果图：

xml常用样式实现

ToggleButton背景实现togglebutton_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/toggle_btn_checked" android:state_checked="true" />
    <item android:drawable="@mipmap/toggle_btn_unchecked" />
</selector>

<ToggleButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:background="#0FFF"
            android:button="@drawable/togglebutton_bg"
            android:text=""
            android:textOff=""
            android:textOn=""/>

实现四、ios加载菊花进度条实现

实现思路：切一张这样的图片，然后设置图片旋转即可实现该效果

实现效果图：

xml常用样式实现

旋转动画，从0度转到360度：

my_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@mipmap/img_fabuzhong"
    android:fromDegrees="0.0"
    android:pivotX="50.0%"
    android:pivotY="50.0%"
    android:toDegrees="360.0" />

<ProgressBar
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp"
            android:indeterminateBehavior="repeat"
            android:indeterminateDrawable="@drawable/my_progress"/>

实现五、水平进度条实现

实现效果图：

xml常用样式实现

progress_horizontal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 背景  gradient是渐变,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="16dp" />

            <solid android:color="#F0F0F0" />
        </shape>
    </item>
    <!-- 第二条进度条颜色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="16dip" />

                <gradient
                    android:angle="90.0"
                    android:centerColor="#ac6079"
                    android:centerY="0.45"
                    android:endColor="#6c213a"
                    android:startColor="#e71a5e" />
            </shape>
        </clip>
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="16dip" />

                <solid android:color="#3abec0" />
            </shape>
        </clip>
    </item>

</layer-list>

<ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:layout_margin="25dp"
            android:max="100"
            android:progress="15"
            android:progressDrawable="@drawable/progress_horizontal"/>

实现六、圆角虚线边框实现

实现效果图：

xml常用样式实现

xuxian_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke
                android:width="2dp"
                android:color="#000000" />

            <solid android:color="#FFFFFF" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape>
            <!-- dashWith:虚线跨度，dashGap:虚线间隔，dashGap=0dp时，为实线 -->
            <stroke
                android:width="2dp"
                android:color="#000000"
                android:dashGap="10dp"
                android:dashWidth="10dp" />

            <solid android:color="#FFFFFF" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape>
            <stroke
                android:width="2dp"
                android:color="#000000" />

            <solid android:color="#FFFFFF" />

            <corners android:radius="5dp" />
        </shape>
    </item>

</layer-list>

<TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:background="@drawable/xuxian_background"
            android:lineSpacingExtra="5dp"
            android:padding="18dp"
            android:text="\t\t\t\t失败只是暂时停止成功，假如我不能,我就一定要;假如我要,我就一定能!无论你觉得自己多么的不幸，永远有人比你更加不幸。无论你觉得自己多么的了不起，也永远有人比你更强。 "
            android:textColor="#858585"/>

xml常用样式实现

实现一、实现一个有点击效果的圆角按钮

实现二、圆角单项选择按钮

实现三、开关按钮

实现四、ios加载菊花进度条实现

实现五、水平进度条实现

实现六、圆角虚线边框实现

继续阅读

Android时间轴(Timeline)效果的实现

Android之Application的使用

如何开启手机地震预警功能呢？突然，我的安卓手机开始倒计时，显示“2、6”，我立刻拿起手机跑出门。你知道为什么有些人能收到

Android中使用SVG

封装一个简单的崩溃监听类封装一个简单的崩溃监听类

eclipse项目迁移到android studio(图文版)注意看第二张图，Android Studio导入的一定是Build.gradle。好多人没说清这点。

打开多个Activity后返回到原始界面数据

android的四种activity加载模式（launchMode）

Android四大组件之一：Activity总结（上）

对于Android的Activity启动模式的一些总结和理解安卓Activity的启动模式

Activity任务栈和启动模式

Android app 第三方支付宝支付接入

android 使用shape自定义圆角矩形

基础篇(十六) Service和子线程

Android调用gallery获取图片从gallery中获取图片

挑战练习---禁止一题多答（3.7）（Android编程权威指南）