xml常用样式实现

来源：互联网发布：施耐德m258编程手册编辑：程序博客网时间：2024/04/27 20:17

在android项目开发中，会经常用到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="确定" />

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

实现效果如图：

总体是一个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(0);                        break;                    case R.id.rb2:                        checkd(1);                        break;                    case R.id.rb3:                        checkd(2);                        break;                }            }        });    }    //实现点击切换效果    private void checkd(int index) {        rb1.setChecked(false);        rb2.setChecked(false);        rb3.setChecked(false);        if (index == 0) {            rb1.setChecked(true);        } else if (index == 1) {            rb2.setChecked(true);        } else if (index == 2) {            rb3.setChecked(true);        }    }

实现三、开关按钮

开关实现的逻辑很简单，点击ToggleButton时图片进行切换。
实现效果图：
这里写图片描述
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加载菊花进度条实现

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

旋转动画，从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"/>

实现五、水平进度条实现

实现效果图：
这里写图片描述
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"/>

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

实现效果图：
这里写图片描述
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"/>

0 0