android 登录界面的实现

作者: 念念不忘_2016 | 来源:发表于2018-08-24 09:29 被阅读916次

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


    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代码就不贴出来了

    相关文章

      网友评论

      本文标题:android 登录界面的实现

      本文链接:https://www.haomeiwen.com/subject/pnaviftx.html