TextInputLayout和AppCompatButton简单用法

2015 I/O大会谷歌推出了 Android Design Support Library,所以就更新下来看了看。从最简单的开始写吧,来看TextInputLayout,为什么要使用TextInputLayout,这个控件用于在多个输入框时,用户可能忘记hint内容,这个时候hint提醒就会在上方显示,也能用于判断,界面挺美的。

AppCompatButton安卓5.0开始引入的全新设计Material Design,触摸反馈的波纹效果,可惜这个波纹效果只支持5.0及以上的版本。

效果图:

这里写图片描述

这里写图片描述

这里写图片描述

实现 TextInputLayout

第一步 :导入Support Library

要使用TextInputLayout控件,你需要导入两个Library。第一个是appcompat-v7,它确保material style可以向后兼容。第二个是Design Support Library。在你的build.gradle文件中,添加如下依赖:

 compile 'com.android.support:design:22.2.0'
 compile 'com.android.support:appcompat-v7:22.2.0'

第二步:给Activity设置主题(清单文件中)


<activity android:name=".MainActivity"
            android:theme="@style/LoginTheme"
            >

styles.xml文件里添加:


<style name="LoginTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowBackground">@color/primary</item>

        <item name="colorControlNormal">@color/iron</item>
        <item name="colorControlActivated">@color/iron</item>
        <item name="colorControlHighlight">@color/iron</item>
        <item name="android:textColorHint">@color/iron</item>

        <item name="colorButtonNormal">@color/primary_darker</item>
    </style>

colors.xml(自定义颜色)


<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="primary_darker">#CC1D1D</color>
    <color name="colorAccent">#FF4081</color>
    <color name="primary">#E43F3F</color>
    <color name="red" >#FF0000</color>
    <color name="text_red">#ec0f38</color>
    <color name="white" >#FFFFFF</color>
    <color name="black" >#282828</color>
    <color name="jet">#222222</color>
    <color name="oil">#333333</color>
    <color name="monsoon">#777777</color>
    <color name="jumbo">#888888</color>
    <color name="aluminum">#999999</color>
    <color name="base">#AAAAAA</color>
    <color name="iron">#CCCCCC</color>
    <color name="global_bg">#eeeff3</color>
    <color name="light_blue">#6593cb</color>
    <color name="gray">#aaaaaa</color>
    <color name="title">#363636</color>
    <color name="tbtitle">#FF0000</color>
    <color name="toolbar_bg">#FAFBFD</color>
</resources>

第三步 :设计用户界面(在布局中使用使用TextInputLayout,AppCompatButton)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <EditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username"
            />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       >
        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password"
            />
    </android.support.design.widget.TextInputLayout>
    <android.support.v7.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点击按键"/>

</LinearLayout>

这样就写好了!

源代码下载地址:
https://github.com/a2978157/MyTextInputLayout

猜你喜欢

转载自blog.csdn.net/a2978157/article/details/74375104
今日推荐