使用TextInputLayout分分鐘構(gòu)造一個酷炫登錄框架-創(chuàng)新互聯(lián)

Google在2015的IO大會上，給我們帶來了更加詳細(xì)的Material Design設(shè)計(jì)規(guī)范，同時(shí)，也給我們帶來了全新的Android Design Support Library，Android Design Support Library的兼容性更廣，直接可以向下兼容到Android 2.2

在成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作過程中，需要針對客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

下面我們用TextInputLayout構(gòu)造一個酷炫的登錄框架

先上效果圖：

使用TextInputLayout分分鐘構(gòu)造一個酷炫登錄框架

要使用Design Support Library現(xiàn)在gradle中加入

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

登錄頁面的布局：

<?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"  
    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="com.lg.logindemo.MainActivity">  
  
    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="200dp"  
        android:gravity="center"  
        android:text="Welcome"  
        android:textColor="@color/colorPrimary"  
        android:textSize="30dp" />  
  
    <android.support.design.widget.TextInputLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="10dp">  
  
        <EditText  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:hint="Username"  
            android:paddingLeft="10dp"  
            android:paddingRight="10dp"  
            android:singleLine="true" />  
    </android.support.design.widget.TextInputLayout>  
  
    <android.support.design.widget.TextInputLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="10dp">  
  
        <EditText  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:hint="Password"  
            android:inputType="textPassword"  
            android:paddingLeft="10dp"  
            android:paddingRight="10dp"  
            android:singleLine="true" />  
    </android.support.design.widget.TextInputLayout>  
  
    <android.support.v7.widget.AppCompatButton  
        android:id="@+id/login"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="20dp"  
        android:background="@color/colorPrimary"  
        android:onClick="onLogin"  
        android:text="LOGIN"  
        android:textColor="@android:color/white"  
        android:textSize="20sp"  
        android:textStyle="bold" />  
  
    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="10dp"  
        android:gravity="center"  
        android:onClick="register"  
        android:text="No account yet?Create one"  
        android:textSize="16sp"  
        android:textStyle="bold" />  
</LinearLayout>

TextInputLayout 繼承于LinearLayout也是一個布局，要配合它的子控件來顯示出想要的效果，這里谷歌把它專門設(shè)計(jì)用來包裹EditText(或者EditText的子類)，然后當(dāng)用戶進(jìn)行輸入動作的時(shí)候我們設(shè)置的android:hint 提示就會以動畫的形式運(yùn)動到左上角

public class MainActivity extends AppCompatActivity {  
    private Button button;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        setTitle("Login");  
        button=(Button)findViewById(R.id.login);  
        button.setOnClickListener(new View.OnClickListener() {  
            @Override  
            public void onClick(View v) {  
                Toast.makeText(MainActivity.this,"Login Successful",Toast.LENGTH_SHORT).show();  
            }  
        });  
    }  
  
    //注冊
    public void register(View view){  
        startActivity(new Intent(this,RegisterAcitvity.class));  
    }  
}

很簡單，只是為了畫個框架，可以根據(jù)需求自己完善

下面是注冊頁面的布局：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    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="com.lg.logindemo.RegisterAcitvity">  
  
    <android.support.design.widget.TextInputLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        app:counterEnabled="true"  
        app:counterMaxLength="6"  
        app:counterOverflowTextAppearance="@style/ErrorStyle"  
        android:layout_marginTop="10dp"  
        >  
  
        <EditText  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:hint="Username"  
            android:paddingLeft="10dp"  
            android:paddingRight="10dp"  
            android:singleLine="true" />  
    </android.support.design.widget.TextInputLayout>  
  
    <android.support.design.widget.TextInputLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        app:counterEnabled="true"  
        app:counterMaxLength="12"  
        app:counterOverflowTextAppearance="@style/ErrorStyle"  
        android:layout_marginTop="10dp">  
  
        <EditText  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:hint="Password"  
            android:inputType="textPassword"  
            android:paddingLeft="10dp"  
            android:paddingRight="10dp"  
            android:singleLine="true" />  
    </android.support.design.widget.TextInputLayout>  
  
    <android.support.design.widget.TextInputLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="10dp">  
  
        <EditText  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:hint="Email"  
            android:inputType="textEmailAddress"  
            android:paddingLeft="10dp"  
            android:paddingRight="10dp"  
            android:singleLine="true" />  
    </android.support.design.widget.TextInputLayout>  
  
    <android.support.design.widget.TextInputLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="10dp">  
  
        <EditText  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:hint="Phone"  
            android:inputType="phone"  
            android:paddingLeft="10dp"  
            android:paddingRight="10dp"  
            android:singleLine="true" />  
    </android.support.design.widget.TextInputLayout>  
  
    <RadioGroup  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="10dp"  
        android:orientation="horizontal">  
  
        <android.support.v7.widget.AppCompatRadioButton  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1"  
            android:text="Male"  
            android:textSize="16sp" />  
  
        <android.support.v7.widget.AppCompatRadioButton  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1"  
            android:text="Female"  
            android:textSize="16sp" />  
    </RadioGroup>  
  
    <android.support.v7.widget.AppCompatButton  
        android:id="@+id/register"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="20dp"  
        android:background="@color/colorPrimary"  
        android:text="CREATE ACCOUNT"  
        android:textColor="@android:color/white"  
        android:textSize="20sp" />  
</LinearLayout>

android:singleLine="true"屬性設(shè)置單行顯示

設(shè)置app:counterEnabled="true" 打開Edittext右下角字?jǐn)?shù)統(tǒng)計(jì)，app:counterMaxLength="6"設(shè)置它的長度

但要謹(jǐn)記，使用這個功能的時(shí)候必須加上 app:counterOverflowTextAppearance屬性，不然程序很報(bào)錯

自定義ErrorStyle樣式:

<style name="ErrorStyle">  
     <item name="android:textColor">@color/colorAccent</item>  
</style>

當(dāng)然，如果想要修改Edittext框的選中顏色可以修改AppTheme中的colorAccent屬性

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
        <!-- Customize your theme here. -->  
        <item name="colorPrimary">@color/colorPrimary</item>  
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
        <item name="colorAccent">@color/colorPrimary</item>  
</style>

源碼地址：http://down.51cto.com/data/2222023

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標(biāo)題：使用TextInputLayout分分鐘構(gòu)造一個酷炫登錄框架-創(chuàng)新互聯(lián)
本文來源：http://chinadenli.net/article32/gsssc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、域名注冊、用戶體驗(yàn)、網(wǎng)站改版、外貿(mào)建站、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

使用TextInputLayout分分鐘構(gòu)造一個酷炫登錄框架-創(chuàng)新互聯(lián)