多谢你们的评论,这里是效果图,之前项目的图片删除了,凑活看看吧,大致效果如下:
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代码就不贴出来了
网友评论