Android 5.0新控件——TextInputLayout-阿里云开发者社区

开发者社区> 啊啊啊88jdk> 正文

Android 5.0新控件——TextInputLayout

简介: Android 5.0(M)新控件——TextInputLayout 介绍之前,先直观的看一下效果 TextInputLayout其实是一个容器,他继承自LinearLayout,该容器是作用于TextView的,TextInputLayout只能包裹一个子节点,类似于ScrollView。
+关注继续查看

Android 5.0(M)新控件——TextInputLayout

介绍之前,先直观的看一下效果

P1

TextInputLayout其实是一个容器,他继承自LinearLayout,该容器是作用于TextView的,TextInputLayout只能包裹一个子节点,类似于ScrollView。

本文以EditText举例,实现的效果如上效果图,EditText输入内容以后,hint内容移动至编辑框上方。

实现

导入依赖

因为TextInputLayout是Android 5.0以后新加的库的控件(Android Design Support Library),所以在使用前先要将Library导入到项目中来

P2

或者在gradle下添加依赖

compile 'com.android.support:design:23.0.1'

XML

   <android.support.design.widget.TextInputLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <EditText
           android:id="@+id/et_pwd"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="密码" />
   </android.support.design.widget.TextInputLayout>

到此为止,如果你运行,会发现已经有了动画效果

P3

使用

XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        app:hintTextAppearance="@style/FloatingStyle"
        app:hintAnimationEnabled="false"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#F00F0F"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_pwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="密码" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="ok"
        android:text="确定" />

</LinearLayout>

测试类

package com.example.kongqw.myapplication;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private EditText mUserName;
    private EditText mPassWord;
    private TextInputLayout mTextInputLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextInputLayout = (TextInputLayout) findViewById(R.id.til_username);
        // mUserName = (EditText) findViewById(R.id.et_username);
        mPassWord = (EditText) findViewById(R.id.et_pwd);
        // 通过TextInputLayout设置hint内容,也可以通过直接设置EditText的hint属性
        mTextInputLayout.setHint("用户名");
    }

    // 确认按钮123123
    public void ok(View view) {
        // 方式一:通过TextInputLayout获取到里面的子控件EditText后在获取编辑的内容
        String username = mTextInputLayout.getEditText().getText().toString();
        // 方式二:直接通过EditText获取到里面的编辑内容
        String pwd = mPassWord.getText().toString();
        Toast.makeText(this, "username = " + username + "\npwd = " + pwd, Toast.LENGTH_SHORT).show();
        // 显示错误信息
        mTextInputLayout.setError("错误提示信息");
    }
}

那么如何修改他的样式呢,我做了如下简单的总结

修改样式

取消动画

可以通过TextInputLayout对象,执行setHintAnimationEnabled(boolean enabled)方法

// false 关闭动画 true 开启动画
mTextInputLayout.setHintAnimationEnabled(false);

或者在xml里添加hintAnimationEnabled属性设置

<!-- false 关闭动画 true 开启动画 -->
app:hintAnimationEnabled="false"
  • 效果
    P4

设置hint移动到上方以后的颜色和字体大小

在XML里对应的TextInputLayout标签下添加hintTextAppearance属性

<android.support.design.widget.TextInputLayout
    ……
    app:hintTextAppearance="@style/FloatingStyle">

    <EditText
        …… />
</android.support.design.widget.TextInputLayout>    

然后在res->values->styles.xml下添加一个style

<style name="FloatingStyle" parent="@android:style/TextAppearance">
    <!-- 字体颜色 -->
    <item name="android:textColor">#AA00FF</item>
    <!-- 字体大小 -->
    <item name="android:textSize">20sp</item>
</style>
  • 效果(#AA00FF,20sp)
    P5

设置编辑文字的颜色

这个就是设置EditText的颜色

<android.support.design.widget.TextInputLayout
    ……>

    <EditText
        ……
        android:textColor="#FF0000" />
</android.support.design.widget.TextInputLayout>

但是hint字体颜色,在EditText里设置就不起作用,目前我还没有找到用什么方法修改,感谢哪位大神能指点一二

设置下划线的颜色

修改res->values->styles.xml下”AppTheme”里的colorAccent属性

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    ……
    <item name="colorAccent">#0000FF</item>
</style>
  • 效果(#0000FF)
    P6

设置错误提示的字体样式

目前还没发现怎样修改,找到方法以后再续……

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26776 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10021 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10880 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13825 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9154 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11814 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4653 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22364 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7344 0
206
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载