4-VVI-材料设计之沉浸标题栏和TextInputLayout

零、前言

这是两个比较小的点,放在一起说一下: 沉浸标题栏:现在基本上都用沉浸标题栏了,不然最顶的一小块跟app风格不搭 TextInputLayout:包裹一个EditeText,多用于登陆验证的输入框

一、沉浸标题栏

沉浸标题栏.png

由于从5.0开始才有,以下会崩掉,所以需要适配处理

values-v19/styles.xml 无效果,仅防止低版本崩掉
<resources>
    <!--values-v19。v19 开始有 android:windowTranslucentStatus 这个属性-->
    <style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>
values-v21/styles.xml
<resources>
    <!--values-v21 5.0 以上提供了 setStatusBarColor() 方法设置状态栏颜色。-->
    <style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <!--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色-->
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

使用:给Activity设置主题即可

android:theme="@style/TranslucentTheme"

二、TextInputLayout

依赖
implementation 'com.android.support:design:26.1.0'

输入框获得焦点后会有一个上移动画,还可以设定小眼睛显隐密码

TextInputLayout.png

  <android.support.design.widget.TextInputLayout
        android:id="@+id/til2"
        app:passwordToggleEnabled="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/et_pw"
            android:layout_width="363dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="登陆密码"
            android:inputType="numberPassword"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
           />
    </android.support.design.widget.TextInputLayout>

其中app:passwordToggleEnabled="true" 显示小眼睛

还有一个点是改变颜色:

可以自己定义一个主题,设置colorAccent的颜色值

<style name="LoginTheme" parent="TranslucentTheme">
    <item name="colorAccent">#ffffff</item>
</style>

后记、

1.声明:

[1]本文由张风捷特烈原创,转载请注明 [2]欢迎广大编程爱好者共同交流 [3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正 [4]你的喜欢与支持将是我最大的动力

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

微信小程序之购物车功能

本文作者:IMWeb 林鑫 原文出处:IMWeb社区 未经同意,禁止转载 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟...

62390
来自专栏IT大咖说

听饿了么前端主管如何解析H5渲染性能

内容来源:2018 年 6 月 30 日,饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说(微信id...

32110
来自专栏葡萄城控件技术团队

纯前端表格控件SpreadJS V11.2新版本发布,全面支持React和Vue

SpreadJS 是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,在外观、功能和操作上都与 Excel 高度类似,在表格数据处理上比 Grid ...

21500
来自专栏程序员互动联盟

【入门指导第十三讲】概念墙

存在问题: 最近有小伙伴问html/html5/xhtml/xml这四个有什么区别? 解决方案: 小编在这里为大家详细解释一下。 html 学名叫做超文本标记语...

363100
来自专栏较真的前端

React 学习路线图 2018版

这个 React 学习路线的思维导图来源自 Adam Gołąb 的 react-developer-roadmap 。截止至本文发布时,原仓库已经有了中文版,...

15640
来自专栏Fundebug

2018年最值得关注的30个Vue.js开源项目

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

35580
来自专栏大数据钻研

前端开发,从草根到英雄(第一部分)

我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

29850
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 和iOS Simulator 那点事

React Native 和iOS Simulator 那点事 尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.o...

39040
来自专栏Jack的Android之旅

基于豆瓣和妹子的api用React Native写的demo for android

最近一直在学React Naitve,可以说React Native的确有他自身强大的地方,不管是运行效率还是热更新都和一般的h5有的一比,当然因为面世的时间还...

12420
来自专栏游戏杂谈

JavaScript 2016年的概况

国外的网站stateofjs.com根据超过九千位开发人员的问卷调查,发布了2016年JavaScript的年度概况报名。 注:本文翻译的部分...

12520

扫码关注云+社区

领取腾讯云代金券