Android EditText 평면 화 된 로그 인 인터페이스 구현

12032 단어 AndroidEditText
먼저 로그 인 화면 에 적 힌 효과 도 를 살 펴 보 겠 습 니 다.

2.editText 감청,원 클릭 으로 비 울 수 있 습 니 다.

3 checkBox 색상 통일

코드
다음은 이 인 터 페 이 스 를 어떻게 실현 하 는 지,나 는 코드 를 모두 붙 일 것 이다.

<RelativeLayout 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:id="@+id/activity_login"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/logoScreenBackground">

 <de.hdodenhof.circleimageview.CircleImageView
  android:id="@+id/iv_icon"
  android:layout_width="90dp"
  android:layout_height="90dp"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="60dp"
  android:scaleType="centerCrop"
  android:src="@mipmap/ic_logo" />

 <TextView
  android:id="@+id/tv_title"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="160dp"
  android:text="AlphaGo"
  android:textColor="#000"
  android:textSize="23sp"
  android:typeface="monospace" />

 <RelativeLayout
  android:id="@+id/rl_userName"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@id/tv_title"
  android:layout_marginTop="40dp"
  android:background="@drawable/rectangle_edittext">

  <ImageView
   android:id="@+id/iv_userIconName"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerVertical="true"
   android:paddingBottom="15dp"
   android:paddingLeft="30dp"
   android:paddingTop="15dp"
   android:src="@mipmap/ic_edittextuname" />

  <View
   android:id="@+id/viewName"
   android:layout_width="1dip"
   android:layout_height="20dp"
   android:layout_centerVertical="true"
   android:layout_marginLeft="10dp"
   android:layout_toRightOf="@id/iv_userIconName"
   android:background="@color/colorCursor" />

  <EditText
   android:id="@+id/et_userName"
   android:layout_width="match_parent"
   android:layout_height="30dp"
   android:layout_centerVertical="true"
   android:layout_marginLeft="10dp"
   android:layout_toRightOf="@id/viewName"
   android:background="@null"
   android:ems="19"
   android:hint="    "
   android:textColorHint="@color/colorCursor"
   android:textCursorDrawable="@drawable/color_cursor"
   android:textSize="15sp" />

  <ImageView
   android:id="@+id/iv_unameClear"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_centerVertical="true"
   android:layout_marginRight="20dp"
   android:src="@mipmap/ic_backspace_grey600_24dp"
   android:visibility="invisible" />

 </RelativeLayout>

 <RelativeLayout
  android:id="@+id/rl_userPassword"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@id/rl_userName"
  android:layout_marginTop="1dp"
  android:background="@drawable/rectangle_edittext">

  <ImageView
   android:id="@+id/iv_userIconPwd"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerVertical="true"
   android:paddingBottom="15dp"
   android:paddingLeft="30dp"
   android:paddingTop="15dp"
   android:src="@mipmap/ic_edittextupwd" />

  <View
   android:id="@+id/viewPwd"
   android:layout_width="1dip"
   android:layout_height="20dp"
   android:layout_centerVertical="true"
   android:layout_marginLeft="10dp"
   android:layout_toRightOf="@id/iv_userIconPwd"
   android:background="@color/colorCursor" />

  <EditText
   android:id="@+id/et_password"
   android:layout_width="match_parent"
   android:layout_height="30dp"
   android:layout_centerVertical="true"
   android:layout_marginLeft="10dp"
   android:layout_toRightOf="@id/viewPwd"
   android:background="@null"
   android:drawablePadding="5dp"
   android:ems="19"
   android:hint="   "
   android:inputType="textPassword"
   android:textColorHint="@color/colorCursor"
   android:textCursorDrawable="@drawable/color_cursor"
   android:textSize="15sp" />

  <ImageView
   android:id="@+id/iv_pwdClear"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_centerVertical="true"
   android:layout_marginRight="20dp"
   android:src="@mipmap/ic_backspace_grey600_24dp"
   android:visibility="invisible" />

 </RelativeLayout>

 <CheckBox
  android:id="@+id/cb_checkbox"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@id/rl_userPassword"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="20dp"
  android:background="@null"
  android:checked="false"
  android:duplicateParentState="false"
  android:text="    "
  android:textColor="#666666"
  android:textSize="15sp"
  app:buttonTint="@color/colorLoginButton" />

 <Button
  android:id="@+id/btn_login"
  android:layout_width="340dp"
  android:layout_height="wrap_content"
  android:layout_below="@id/cb_checkbox"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="20dp"
  android:background="@drawable/round_corner_bg"
  android:gravity="center"
  android:padding="10dp"
  android:text="  "
  android:textColor="#fff"
  android:textSize="18sp" />

</RelativeLayout>
몇 가지 중점 적 인 문제
그림 에서 전체 구 조 는 위 에서 아래로 분포 되 어 있 음 을 알 수 있다.그러면 우 리 는 이런 순 보 에 따라 분석 할 것 이다.
1.어떻게 한 장의 그림 을 원형 으로 보 여 줍 니까?
2.전체 입력 상자 의 레이아웃(입력 상자 의 세로 선 구현)
3.edittext 입력 여 부 를 감청 합 니 다.
4.checkbox 색상 과 화면 을 통일
1.한 장의 그림 을 어떻게 원형 으로 보 여 줍 니까?
저 는 그림 의 원형 화 를 쉽게 실현 할 수 있 는 오픈 소스 프로젝트 CircleImageView 를 사용 합 니 다.
우선 build.gradle 에 copile'de.hdodenhof:circlemimageview:2.1.0'을 추가 합 니 다.
xml 레이아웃 에서 ImageView 대신를 사용 합 니 다.

 <de.hdodenhof.circleimageview.CircleImageView
  android:id="@+id/iv_icon"
  android:layout_width="90dp"
  android:layout_height="90dp"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="60dp"
  android:scaleType="centerCrop"
  android:src="@mipmap/ic_logo" />
2.전체 입력 상자 의 레이아웃(입력 상자 의 세로 선 구현)
전체 입력 상 자 는 일반적인 ImageView 에 textView 를 더 해 이 루어 진 것 입 니 다.그림 과 알림 문자 의 세로 선 을 구분 하려 면 view 로 직접 써 야 합 니 다.

<View
   android:id="@+id/viewPwd"
   android:layout_width="1dip"
   android:layout_height="20dp"
   android:layout_centerVertical="true"
   android:layout_marginLeft="10dp"
   android:layout_toRightOf="@id/iv_userIconPwd"
   android:background="@color/colorCursor" />
이렇게 세로 줄 을 다 썼 습 니 다.거리 크기 는 입력 상자 에 따라 조절 하면 됩 니 다.
editText 를 쓸 때 간결 하 게 하려 면 배경 을'@null'로 설정 하고'shape'를 직접 써 야 합 니 다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <size android:width="1dp"/>
 <solid android:color="@color/colorCursor"/>
</shape>
"color Cursor"는 자기 인터페이스 스타일 이에 요.
3.EditText 입력 여 부 를 감청
코드 를 먼저 붙 이 겠 습 니 다.

public class EditTextClearTools {
 public static void addClearListener(final EditText et , final ImageView iv){
  et.addTextChangedListener(new TextWatcher() {
   @Override
   public void beforeTextChanged(CharSequence s, int start, int count, int after) {

   }

   @Override
   public void onTextChanged(CharSequence s, int start, int before, int count) {

   }

   @Override
   public void afterTextChanged(Editable s) {
    //           0    clear  
    String str = s + "" ;
    if (s.length() > 0){
     iv.setVisibility(View.VISIBLE);
    }else{
     iv.setVisibility(View.INVISIBLE);
    }
   }
  });

  iv.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    et.setText("");
   }
  });
 }

}
우선 레이아웃 에서 삭제 단 추 는 기본적으로 숨겨 진 android:visibility="invisible"입 니 다.
그리고 EditText 의 입력 이 벤트 를 감청 합 니 다.입력 한 내용 의 길이 가 0 보다 크 면 아이콘 을 삭제 하고 입력 을 비 울 수 있 습 니 다.
위의 코드 는 도구 류 참조이 블 로그--AndroidMsky이 블 로그 도 로그 인 화면 을 썼 다.
프로그램 에서 호출 된 코드:

protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_logo_activty);
  init();
 }

 private void init(){
  EditText userName = (EditText) findViewById(R.id.et_userName);
  EditText password = (EditText) findViewById(R.id.et_password);
  ImageView unameClear = (ImageView) findViewById(R.id.iv_unameClear);
  ImageView pwdClear = (ImageView) findViewById(R.id.iv_pwdClear);

  EditTextClearTools.addClearListener(userName,unameClear);
  EditTextClearTools.addClearListener(password,pwdClear);
 }
이상 은 로그 인 인터페이스의 전체적인 실현 입 니 다.여 기 는 데모 급 의 예 일 뿐 입 니 다.여러분 들 은 더 좋 은 실현 방법 이 있 으 면 많이 교류 할 수 있 습 니 다.만약 에 잘못 이 있 으 면 아낌없이 가르쳐 주 십시오.
그리고 여기 보시 면 감사합니다. 제 글 을 읽 고 안 드 로 이 드 의 길에 함께 토론 하고 교류 할 수 있 는 파트너 가 하나 더 생 겼 습 니 다.
프로젝트 주소:https://github.com/DongXUU/LoginDemo전체 프로젝트 를 다운로드 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
C 언어 는 역 추적 알고리즘 을 바탕 으로 8 황후 문 제 를 해결 하 는 방법
C++성능 분석 튜 토리 얼 의 순환 전개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage