Android 5.0 M特性 样式设置

修改styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. --> 
   <!--导航栏底色-->
       <itemname="colorPrimary">@color/accent_material_dark</item> 
   <!--状态栏底色--> 
   <itemname="colorPrimaryDark">@color/accent_material_light</item> 
    <!--导航栏上的标题颜色--> 
   <itemname="android:textColorPrimary">@android:color/black</item> 
   <!--Activity窗口的颜色--> 
   <itemname="android:windowBackground">@color/material_blue_grey_800</item> 
   <!--按钮选中或者点击获得焦点后的颜色--> 
   <itemname="colorAccent">#00ff00</item> 
   <!--和 colorAccent相反,正常状态下按钮的颜色--> 
   <itemname="colorControlNormal">#ff0000</item> 
   <!--Button按钮正常状态颜色--> 
   <itemname="colorButtonNormal">@color/accent_material_light</item> 
   <!--EditText 输入框中字体的颜色--> 
   <itemname="editTextColor">@android:color/white</item> </style>
相关属性说明

1.colorPrimary: Toolbar导航栏的底色。
2.colorPrimaryDark:状态栏的底色,注意这里只支持Android5.0以上的手机。
3.textColorPrimary:整个当前Activity的字体的默认颜色。
4.android:windowBackground:当前Activity的窗体颜色。
5.colorAccent: CheckBox,RadioButton,SwitchCompat等控件的点击选中颜色
6.colorControlNormal: CheckBox,RadioButton,SwitchCompat等默认状态的颜色。
7.colorButtonNormal:默认状态下Button按钮的颜色。
8.editTextColor:默认EditView输入框字体的颜色。

一、Flat Button

一个在按下的时候会展现墨水散开的效果但没有凸起效果由墨水形成的按钮。

在 layout.xml内的任意位置声明你的 Button并设置 Borderless 样式.

 <Button 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    style="@style/Widget.AppCompat.Button.Borderless"/>

如何设置样式?

在你的 styles.xml内定义自定义样式。

<style name="MyButton" parent="Theme.AppCompat.Light">  
  <item name="colorControlHighlight">@color/pink</item>
</style>

通过 android:theme属性应用这个样式到你的 Button

<Button  
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Button"
   android:theme="@style/MyButton"
   style="@style/Widget.AppCompat.Button.Borderless"/>

二、Raised Button

一个典型的矩形 material 按钮在手指抬起和按下的时候会展现墨水在纸上散开的效果。

layout.xml内的任意位置声明你的 Button

<Button  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"/>

如何设置样式?

在你的styles.xml内定义自定义样式。

<style name="MyButton" parent="Theme.AppCompat.Light">  
    <item name="colorControlHighlight">@color/indigo</item>
    <item name="colorButtonNormal">@color/pink</item>
</style>  

通过 android:theme属性应用这个样式到你的 Button

<Button  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    android:theme="@style/MyButton"/>

兼容性问题

I. 切换 Button

按下状态的颜色你可以使用主题的 colorControlHighlight
属性,虽然它仅仅影响 Lollipop 版本的系统。

II. Android elevation

只在 Lollipop 设备上有效,因此你在 Lollipop 之前的设备上将看不到 Button
周围的阴影。

三、Radio Button


layout.xml文件内任意位置声明你的RadioButton

<RadioButton  
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:checked="true"
   android:text="Radio Button"/>

如何设置样式?

styles.xml文件内声明你的自定义样式.

<style name="MyRadioButton" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/indigo</item>
     <item name="colorControlActivated">@color/pink</item>
</style> 

通过 android:theme属性将这个样式应用到你的 RadioButton

<RadioButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Radio Button"
    android:theme="@style/MyRadioButton"/>

四、Switch

On/off Switches 切换可以设置单选状态。开关控制的选项,以及它所处的状态,应该通过与它对应一致的内部标签明确地展示出来,以达到与 radio button(单选按钮)相同的视觉效果。
on/off 滑动开关用文字标示 “on” 和 “off” 的做法已被弃用。请用文首所示图例来代替。

在任意的layout.xml文件内声明你的SwitchCompat

<android.support.v7.widget.SwitchCompat  
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:checked="true" />

SwitchCompat Switch 控件的向下兼容版本。

如何设置样式?

在你的 styles.xml 文件内声明自定义样式。

<style name="MySwitch" parent="Theme.AppCompat.Light">  
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">@color/indigo</item>
    <!-- inactive thumb color -->
    <item name="colorSwitchThumbNormal">@color/pink</item>
    <!-- inactive track color (30% transparency) -->
    <item name="android:colorForeground">@color/grey</item>
</style>  

在你的 SwitchCompat声明里设置 android:theme的属性值为你自定义的样式。

<android.support.v7.widget.SwitchCompat  
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:checked="true"
   android:theme="@style/MySwitch" />

Android 会自动给 SwitchCompatcolorControlActivatedandroid:colorForeground 增加 30% 的透明度。

五、Text field

允许用户输入文本,选择文本(剪切,复制,粘贴),通过自动补全检索查询数据。
在任意的* layout.xml*文件内声明你的* EditText*

<EditText  
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Hint text" />

如何设置样式?

在你的 styles.xml文件内声明自定义样式。

<style name="MyEditText" parent="Theme.AppCompat.Light">  
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>   

在你的 EditText声明里设置 android:theme的属性值为你自定义的样式。

<EditText  
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Hint text"
   android:theme="@style/MyEditText" />

兼容性问题

I. 在不同的Android 版本里,EditText的高度和垂直对齐方式是不同的。
II. 行背景在 Android 4.0-4.46.0 上是不透明的,而在 5.05.1 上是半透明的。

Single-line text field
当输入光标到达输入框右边缘时,文本框的内容会自动滚动到左边。

要让你的 EditText为单行,需要添加 android:singleLine属性,并且设置其值为true

<EditText  
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:singleLine="true"
   android:hint="Hint text" />

Multi-line text field 当光标达到输入框边缘时,文本框会为溢出的文字自动增加一行,以使文本可以垂直滚动。

要让你的 EditText为多行,需要添加 android:inputType属性,并且设置其值为textMultiLine

<EditText  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textMultiLine"
    android:hint="Hint text" />

Full-width text field
(和父布局等宽)适用于更深入复杂的工作。在你的 styles.xml中声明你自定义的样式。

 <style name="FullWidthEditText" parent="Widget.AppCompat.EditText">  
    <item name="android:padding">20dp</item>
    <item name="android:background">@null</item>
    <itemname="android:textSize">@dimen/abc_text_size_subhead_material</item>
</style>   

在你的* EditText*声明里设置 style属性值为你自定义的样式。

<EditText  
   style="@style/FullWidthEditText"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Subject" />

六、Check Box

允许用户从一组选项中选择多个选项。
如果你有多个选项出现在列表中,你可以通过使用 Checkboxes 代替 on/off Switches 来节省空间。
如果你只有一个选项,避免使用一个 Checkbox,但是可以使用一个 on/off switch

layout.xml文件内任一位置声明你的CheckBox

<CheckBox  
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:checked="true"
   android:text="Check Box"/>

如何设置样式?

styles.xml文件内声明你的自定义样式.

<style name="MyCheckBox" parent="Theme.AppCompat.Light">  
   <item name="colorControlNormal">@color/indigo</item>
   <item name="colorControlActivated">@color/pink</item>
</style>  

将这个样式通过android:theme属性应用到你的 CheckBox.

<CheckBox  
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:checked="true"
   android:text="Check Box"
   android:theme="@style/MyCheckBox"/>

样式的介绍就到这里了,下次和大家分享FloatingActionButton
谢谢大家耐心的看完!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值