Android开发知识小集安卓学习

android 登录界面的实现

2018-08-24  本文已影响916人  念念不忘_2016

多谢你们的评论,这里是效果图,之前项目的图片删除了,凑活看看吧,大致效果如下:


image.png

这个是项目中登录界面的实现方式,在此记录一下,
activity_main.xml文件如下:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
android:layout_height="fill_parent" 
android:layout_width="fill_parent" 
android:scrollbars="none" 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout 
    android:id="@id/content_view" 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent">
    <ImageView 
        android:id="@+id/iv_logo" 
        android:layout_height="@dimen/logo_height" 
        android:layout_marginLeft="8.0dip" 
        android:layout_marginRight="8.0dip" 
        android:layout_marginTop="@dimen/logo_margin_top" 
        android:layout_width="@dimen/logo_width" 
        android:src="@drawable/logo" 
        app:layout_constraintLeft_toLeftOf="parent" 
        app:layout_constraintRight_toRightOf="parent" 
        app:layout_constraintTop_toTopOf="parent"/>
    <LinearLayout 
        android:id="@+id/llyt_form" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="28.0dip" 
        android:layout_marginRight="28.0dip" 
        android:layout_marginTop="@dimen/form_margin_top" 
        android:layout_width="0.0dip" android:orientation="vertical" 
        app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent" 
         app:layout_constraintTop_toBottomOf="@id/iv_logo">

        <android.support.design.widget.TextInputLayout 
            android:layout_height="wrap_content"
             android:layout_width="fill_parent" 
             app:hintEnabled="false">
            <android.support.design.widget.TextInputEditText 
                android:drawableLeft="@drawable/ic_username"
                 android:drawablePadding="8.0dip" 
                 android:drawableStart="@drawable/ic_username" 
                 android:hint="@string/hint_login_username" 
                 android:id="@id/et_account" 
                 android:imeOptions="actionNext"
                  android:inputType="textVisiblePassword" 
                  android:layout_height="wrap_content" 
                  android:layout_width="fill_parent" 
                  android:lines="1" 
                  android:maxLines="1" 
                  android:singleLine="true" 
                  android:textAppearance="@style/TextAppearance.AppCompat.Small" 
                  android:textColor="@color/white"
                  android:textColorHint="@color/hint_text"/>
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout 
            android:id="@id/input_layout_password" 
            android:layout_height="wrap_content" 
            android:layout_width="fill_parent" 
            app:hintEnabled="false" 
            app:passwordToggleDrawable="@drawable/ic_password_visibility_selector" 
            app:passwordToggleEnabled="true" 
            app:passwordToggleTint="#50ffffff">

            <android.support.design.widget.TextInputEditText 
                android:digits="@string/digits_password" 
                android:drawableLeft="@drawable/ic_password" 
                android:drawablePadding="8.0dip" 
                android:drawableStart="@drawable/ic_password" 
                android:hint="@string/hint_input_password" 
                android:id="@id/et_password"
                android:imeOptions="actionDone" 
                android:inputType="textPassword" 
                android:layout_height="wrap_content" 
                android:layout_width="fill_parent" 
                android:lines="1" 
                android:maxLines="1" 
                android:singleLine="true" 
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:textColor="@color/white" 
                android:textColorHint="@color/hint_text"/>
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>
    <android.support.v7.widget.AppCompatCheckBox 
        android:button="@drawable/remember_password_checkbox_selector" 
        android:checked="true" 
        android:id="@id/cb_remember_password" 
        android:layout_alignParentLeft="true" 
        android:layout_centerVertical="true" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="8.0dip" 
        android:layout_width="wrap_content" 
        android:padding="8.0dip" 
        android:text="@string/remember_password" 
        android:textAppearance="@style/TextAppearance.AppCompat.Small" 
        android:textColor="@color/white" 
        app:layout_constraintLeft_toLeftOf="@id/llyt_form" 
        app:layout_constraintTop_toBottomOf="@id/llyt_form"/>
    <android.support.v7.widget.AppCompatButton 
        android:id="@id/btn_forget_password" 
        android:layout_alignParentRight="true" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="8.0dip" 
        android:layout_width="wrap_content" 
        android:minHeight="0.0dip" 
        android:padding="8.0dip"
         android:text="@string/button_forget_password" 
         android:textAppearance="@style/TextAppearance.AppCompat.Small" 
         android:textColor="@color/white" 
         app:layout_constraintRight_toRightOf="@id/llyt_form" 
         app:layout_constraintTop_toBottomOf="@id/llyt_form" 
         style="@style/Widget.AppCompat.Button.Borderless"/>
    <android.support.v7.widget.AppCompatButton 
        android:background="@drawable/bg_btn_round_rect" 
        android:id="@id/btn_login" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="0.0dip" 
        android:layout_marginRight="0.0dip" 
        android:layout_marginTop="8.0dip" 
        android:layout_width="0.0dip" 
        android:minHeight="0.0dip" 
        android:padding="8.0dip" 
        android:text="@string/button_login" 
        android:textAppearance="@style/TextAppearance.AppCompat.Medium" 
        android:textColor="@color/white" 
        app:layout_constraintLeft_toLeftOf="@id/llyt_form" 
        app:layout_constraintRight_toRightOf="@id/llyt_form"
        app:layout_constraintTop_toBottomOf="@id/btn_forget_password"/>
    <android.support.v7.widget.AppCompatButton 
        android:id="@id/btn_to_register" 
        android:layout_alignParentRight="true" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="8.0dip" 
        android:layout_marginRight="8.0dip" 
        android:layout_marginTop="8.0dip" 
        android:layout_width="wrap_content" 
        android:minHeight="0.0dip" 
        android:padding="8.0dip" 
        android:text="立即注册" 
        android:textColor="@color/white" 
        app:layout_constraintLeft_toLeftOf="@id/btn_login" 
        app:layout_constraintRight_toRightOf="@id/btn_login" 
        app:layout_constraintTop_toBottomOf="@id/btn_login" 
        style="@style/Widget.AppCompat.Button.Borderless"/>
    <TextView 
        android:id="@id/tv_third_part_login_label" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="0.0dip" 
        android:layout_marginRight="0.0dip" 
        android:layout_marginTop="16.0dip" 
        android:layout_width="wrap_content" 
        android:padding="8.0dip" 
        android:text="@string/label_third_part_login" 
        android:textColor="@color/hint_text" 
        app:layout_constraintLeft_toLeftOf="@id/btn_to_register" 
        app:layout_constraintRight_toRightOf="@id/btn_to_register" 
        app:layout_constraintTop_toBottomOf="@id/btn_to_register"/>
    <View 
        android:background="@color/hint_text" 
        android:id="@id/view" 
        android:layout_height="1.0dip" 
        android:layout_marginBottom="0.0dip" 
        android:layout_marginTop="0.0dip" 
        android:layout_width="0.0dip"
         app:layout_constraintBottom_toBottomOf="@id/tv_third_part_login_label" 
         app:layout_constraintLeft_toLeftOf="@id/btn_login" 
         app:layout_constraintRight_toLeftOf="@id/tv_third_part_login_label" 
         app:layout_constraintTop_toTopOf="@id/tv_third_part_login_label" 
         app:layout_constraintVertical_bias="0.5"/>
    <View 
        android:background="@color/hint_text" 
        android:layout_height="1.0dip" 
        android:layout_marginBottom="0.0dip" 
        android:layout_marginTop="0.0dip" 
        android:layout_width="0.0dip" 
        app:layout_constraintBottom_toBottomOf="@id/tv_third_part_login_label" 
        app:layout_constraintLeft_toRightOf="@id/tv_third_part_login_label" 
        app:layout_constraintRight_toRightOf="@id/btn_login" 
        app:layout_constraintTop_toTopOf="@id/tv_third_part_login_label" 
        app:layout_constraintVertical_bias="0.5"/>
    <LinearLayout 
        android:layout_height="wrap_content" 
        android:layout_margin="8.0dip" 
        android:layout_width="wrap_content" 
        android:orientation="horizontal" 
        app:layout_constraintLeft_toLeftOf="parent" 
        app:layout_constraintRight_toRightOf="parent" 
        app:layout_constraintTop_toBottomOf="@id/tv_third_part_login_label">
        <ImageButton 
            android:background="@color/transparent" 
            android:id="@id/ibtn_phone_code_login" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:minHeight="50.0dip" 
            android:minWidth="50.0dip" 
            app:srcCompat="@drawable/ic_phone_login"/>
        <android.support.v4.widget.Space 
            android:layout_height="fill_parent"
             android:layout_width="20.0dip"/>
        <ImageButton 
            android:background="@color/transparent" 
            android:id="@id/ibtn_wechat_login" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:minHeight="50.0dip" 
            android:minWidth="50.0dip" 
            app:srcCompat="@drawable/ic_wechat_login"/>
        <android.support.v4.widget.Space 
            android:layout_height="fill_parent" 
            android:layout_width="20.0dip"/>
        <ImageButton 
            android:background="@color/transparent" 
            android:id="@id/ibtn_trial_login" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:minHeight="50.0dip" 
            android:minWidth="50.0dip" 
            app:srcCompat="@drawable/ic_trial"/>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>

密码是否可见文件:drawable/ic_password_visibility_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/ic_password_visibility_on" />
<item android:state_checked="true" android:drawable="@drawable/ic_password_visibility_off" />
</selector>

登录按钮:drawable/bg_btn_round_rect.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/accent" />
<corners android:radius="4.0dip" />
</shape>

具体的java代码就不贴出来了

上一篇下一篇

猜你喜欢

热点阅读