`
xuanzhui
  • 浏览: 200852 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

通过XML定义控件背景形状颜色

阅读更多

在drawable里面定义xml,在background中引用

<Button
	android:id="@+id/completeBtn"
	android:layout_width="80dp"
	android:layout_height="40dp"
	android:layout_marginTop="32dp"
	android:text="完成"
	android:textColor="@color/white"
	android:textSize="18sp"
	android:background="@drawable/green_radius"/>

 

1. 圆角矩形

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#10B703" />

            <!-- 应该是圆角 -->
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

 

2. 左右边框为半圆的矩形

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#10B703" />

            <!-- 应该是控件高度的一半 -->
            <corners android:radius="25dp" />
        </shape>
    </item>
</layer-list>

 

3. 带边框的圆角矩形

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
        	<!-- 边框 -->
            <stroke android:color="@color/grey97" android:width="1px"/>

            <!-- 主背景色 -->
            <solid android:color="@color/white" />
            
            <!-- 圆角 -->
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

 

4. 只有部分边角是圆角、别的是直角的矩形

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke android:color="@color/grey97" android:width="1px"/>

            <solid android:color="@color/white" />
            
            <!-- 需要圆角的地方设置大于0的数值 -->
            <corners
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="4dp"
                android:topLeftRadius="4dp"
                android:topRightRadius="0dp"/>
        </shape>
    </item>
</layer-list>

 refer Creating a rectangle shape with only two rounded edges

 

5. 某个边框不显示的矩形

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 不需要的边框标识为边框的width负值 -->
    <item android:left="-1px">
        <shape>
            <stroke android:color="@color/grey97" android:width="1px"/>

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

            <!-- 圆角控制 -->
            <corners
                android:bottomRightRadius="4dp"
                android:bottomLeftRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="4dp"/>

        </shape>
    </item>

</layer-list>

  refer Open-sided Android stroke

 

6. 圆形

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    	<!-- 由控件定义的地方保证高宽相等 -->
		<shape
            android:shape="oval"
            xmlns:android="http://schemas.android.com/apk/res/android">

            <solid android:color="@color/white" />

            <stroke android:color="#DCDCDC" android:width="1dp"/>

        </shape>
    </item>
</layer-list>

 

7. 点击变换背景

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 正常无点击的情况 -->
    <item android:state_pressed="false">
        <shape>
        	<!-- 可以添加stroke等其他特征 -->
            <solid android:color="@color/color1" />

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

	<!-- 点击时的情况 -->
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/color2" />

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

 

8. ProgressBar颜色渐变,在progressDrawable中引用

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 初始背景 -->
    <item android:id="@android:id/background">
        <shape>
            <gradient
                android:startColor="#ff9d9e9d"
                android:endColor="#ff9d9e9d"
                />
        </shape>
    </item>

    <!-- 过程中的渐变 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="@color/light_orange"
                    android:endColor="@color/main_orange" />
            </shape>
        </clip>
    </item>

</layer-list>

 refer How to Customize a Progress Bar In Android

          Custom Drawable for ProgressBar/ProgressDialog

 

9. 普通的线性渐变

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="0"
                android:startColor="#C8C8C8"
                android:centerColor="#979797"
                android:endColor="#C8C8C8"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

  

 

 

 

分享到:
评论

相关推荐

    WPF中xaml设置控件颜色的方法全集

    10. **模板和样式**:通过定义控件模板和样式,你可以全局更改控件的颜色外观,这在创建主题时非常有用。 总之,WPF的XAML提供了丰富的颜色和画刷机制,使得UI设计充满无限可能。熟练掌握这些技术,能让你的应用...

    dotnet OpenXML 读取 PPT 形状边框定义在 Style 的颜色画刷.rar

    通过`dotnet OpenXML 读取 PPT 形状边框定义在 Style 的颜色画刷.md`这个文档,开发者可以学习到如何结合`OpenXML`库和WPF技术,实现对PowerPoint文件的高效处理和自定义。这样的文档对于需要在程序中动态编辑或生成...

    使用xml文件显示不同的圆角背景

    本教程将探讨如何使用XML文件创建具有不同圆角背景的形状,并将其应用于GridView控件。这不仅可以使界面看起来更加专业,还可以通过编程动态地改变背景颜色,提升用户体验。 首先,让我们了解XML形状资源在Android...

    android中动态更改View背景

    背景可以是颜色、图片、形状等,通常在XML布局文件中设定。 动态更改View背景的方法主要有以下几种: 1. **使用Drawable资源**:Android提供了Drawable资源,它不仅包含颜色,还可以是图像、渐变、形状等。在代码...

    可以改变背景形状的自定义Textview

    在Android开发中,自定义视图是提升应用界面独特性和用户体验的重要手段。...通过在XML布局或代码中实例化此视图,我们可以轻松地为应用程序添加具有个性化背景形状的文本元素,以提升界面的视觉效果和用户体验。

    自定义seekbar颜色和背景

    SeekBar的滑块颜色可以通过设置`thumb`属性来自定义。在XML布局文件中,可以使用`android:thumb`属性并指定一个Nine-Patch图像或者颜色资源。例如: ```xml android:layout_width="match_parent" android:...

    Android自定义导航控件动态添加控件一

    通过修改控件的属性,如颜色、大小、形状等,或者利用Android的动画库添加过渡和滑动效果,可以提升用户体验。 8. **测试和调试**: 自定义控件的开发过程中,测试和调试必不可少。使用Android Studio的布局预览...

    实验二 布局管理器及简单控件的使用

    6. **约束布局(ConstraintLayout)**:最新的布局管理器,通过定义控件之间的约束关系实现灵活的布局,适合复杂的界面设计。 二、简单控件 简单控件是构建用户界面的基本元素,包括: 1. **文本视图(TextView)*...

    Android 编写自定义控件实例

    6. **在布局文件中使用**:最后,将自定义控件添加到项目的`res/layout`目录下的XML布局文件中,通过`&lt;com.example.SaRoundProgressBar&gt;`标签引用,并可以设置之前定义的属性。 saRoundProgressBarDemo的具体实现...

    仿QQ消息提醒的自定义控件

    这可以通过创建XML属性文件并在`attrs.xml`中定义,然后在Java代码中通过`TypedArray`获取这些属性值。 3. **状态管理**: 控件可能需要根据不同的状态(如是否显示、数字值等)改变其显示效果。可以使用`setters`...

    WPF自定义时间控件,可选择日期、时间

    一般情况下,这个文件会定义控件的属性、方法和事件。 2. **XAML设计**: - 控件的视觉外观通常通过XAML来定义,XAML是一种XML-based的语言,用于描述WPF UI元素及其布局。 - 自定义DateTimePicker可能包含两个子...

    WPF自定义控件以及换肤的实现

    自定义控件的关键在于理解和利用WPF的模板系统,包括ControlTemplate和DataTemplate,它们允许我们自由定义控件的视觉表示。 控制皮肤,即换肤功能,是为用户提供个性化界面的一种方式。在WPF中,换肤主要依赖于...

    多种风格的Android 自定义progressbar控件

    1. **形状**:可以通过修改ProgressBar的背景和前景Drawable来改变进度条的形状,例如圆形、矩形、弧形等。 2. **颜色**:调整进度条的颜色和未完成部分的颜色,这可以通过设置Drawable的颜色属性来实现。 3. **动画...

    FusionCharts图表控件中文版使用手册定义.pdf

    《FusionCharts图表控件中文版使用手册定义》是一份详细介绍如何使用FusionCharts图表控件的网络文档。FusionCharts是一款强大的图表生成工具,它能够帮助开发者创建丰富的交互式图表,广泛应用于数据分析和可视化...

    自定义控件Demo

    4. 添加属性:为了在XML布局文件中使用自定义控件,需要在res/values/attrs.xml中定义自定义属性。然后在自定义控件中通过`TypedArray`获取这些属性值。 5. 注册到R类:在res目录下新建一个XML文件,例如`custom_...

    Android之shape实现控件圆角、背景等

    利用`&lt;stroke&gt;`标签可以为形状添加边框,`android:width`定义边框宽度,`android:color`定义边框颜色。 ```xml &lt;solid android:color="#FFFFFF"/&gt; &lt;!-- 白色填充 --&gt; ...

    android自定义组合控件

    为了使自定义控件更易于使用和定制,可以定义XML属性。这需要在res/values/attrs.xml文件中声明自定义属性,然后在构造函数或`setAttributes()`方法中解析这些属性。这样,用户就可以在布局XML中直接设置控件的样式...

    自定义控件与属性

    为了实现这一点,可以使用`attrs.xml`文件定义自定义属性,然后在自定义控件的构造函数或者`setAttributes()`方法中解析这些属性。例如,你可以定义颜色、尺寸、文字等属性,然后在Java代码中读取并应用这些值。 4....

    Android自定义控件【仿IOS开关】

    2. 在XML布局文件中定义自定义控件,并指定相关的属性,如宽高、颜色等。 3. 在Java代码中重写必要的方法,如onDraw()用于绘制控件的视觉元素,onMeasure()用于确定控件的尺寸,以及onClick()或...

    WPF温度控件,C#温度控件

    **UCTemperatureControl.xaml** 是XAML(Extensible Application Markup Language)文件,用于定义控件的视觉外观和布局。在XAML中,我们可以定义控件的模板、样式和资源,以实现温度计的图形效果。可能包括使用形状...

Global site tag (gtag.js) - Google Analytics