前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >4-VVI-材料设计之沉浸标题栏和TextInputLayout

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

作者头像
张风捷特烈
发布2018-09-29 11:26:00
5660
发布2018-09-29 11:26:00
举报
文章被收录于专栏:Android知识点总结
零、前言

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

一、沉浸标题栏

沉浸标题栏.png

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

values-v19/styles.xml 无效果,仅防止低版本崩掉
代码语言:javascript
复制
<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
代码语言:javascript
复制
<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设置主题即可

代码语言:javascript
复制
android:theme="@style/TranslucentTheme"

二、TextInputLayout

依赖
代码语言:javascript
复制
implementation 'com.android.support:design:26.1.0'

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

TextInputLayout.png

代码语言:javascript
复制
  <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的颜色值

代码语言:javascript
复制
<style name="LoginTheme" parent="TranslucentTheme">
    <item name="colorAccent">#ffffff</item>
</style>

后记、
1.声明:

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.09.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 零、前言
  • 一、沉浸标题栏
    • values-v19/styles.xml 无效果,仅防止低版本崩掉
      • values-v21/styles.xml
        • 依赖
          • 还有一个点是改变颜色:
          • 后记、
            • 1.声明:
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档