Android 5.0 M特性 样式设置

作者: 浅笑_JIE | 来源:发表于2016-06-07 11:36 被阅读4076次

    修改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 **会自动给 SwitchCompatcolorControlActivated 和 **android: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.4和** 6.0 **上是不透明的,而在 **5.0 **和 5.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
    谢谢大家耐心的看完!

    相关文章

      网友评论

      • 贝贝ovo:这个属性无效

        <!--EditText 输入框中字体的颜色-->
        <item name="editTextColor">@android:color/white</item>
        贝贝ovo:<item name="android:editTextColor">@color/white</item>这样就可以了

        “android:” 这个写错地方了
      • 5e30a667061c:android:theme="@style/MySwitch",为何无效
      • 说好一起300斤:很好,找了很多,只是想改变radiobutton的状态颜色,网上一搜全是图标替换。:smiley:
        如果是代码new radiobutton 怎么设置theme?
      • 微凉一季:大哥你的图啊
        浅笑_JIE:@9bb720ac800c 不客气:grin:
        9bb720ac800c:太棒了,帮到我 了
        浅笑_JIE:@微凉一季 抱歉 我也不知道图为什么挂了 最近项目太忙 有空我再看下
      • 于连林520wcf:图挂了
      • 彼岸_浅陌:图片看不到了 补一下啊
      • 是咚咚:图片看不到了
      • Passon_Fang:图片好像坏了
        浅笑_JIE:@DoubleFang 有没吧? 还能看到
      • 漂在海上的风筝:好
        浅笑_JIE:@漂在海上的风筝 谢谢你的支持,下次会出5.0的一些控件用法

      本文标题:Android 5.0 M特性 样式设置

      本文链接:https://www.haomeiwen.com/subject/uqpddttx.html