Android 고급 xml 레이아웃 입력 상자 EditText 디자인

오늘 은 심 플 한 패션 을 구현 하 는 안 드 로 이 드 로그 인 화면 을 소개 한다.여러분,일단 효과 도 한번 보 세 요.

사용자 가 입력 할 때 동적 으로 삭제 단추 가 나타 납 니 다.

지금 먼저 기술 포 인 트 를 나열 해 보 자.
1.원 각 입력 상자 와 단추 배경 을 사용 하 는 방법
2.'핸드폰 번호','비밀번호'뒤의 세로 줄 을 어떻게 실현 합 니까?
3.입력 상자 의 레이아웃 을 어떻게 삽입 합 니까?
4.입력 상자 의 입력 이 벤트 를 감청 하고 삭제 단추 의 동적 디 스 플레이 숨 기기
1.원 각 입력 상자 와 단추 배경 을 사용 하 는 방법
안 드 로 이 드 는 개발 자 를 위해 shape 라 는 xml 라벨 을 준비 하여 모양 을 사용자 정의 하 는 데 사용 합 니 다.
그럼 흰색 입력 상자 배경 을 정의 하 겠 습 니 다.코드 는 다음 과 같 습 니 다:

<!--    -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >

 <solid android:color="#ffffff" />
 <!--    -->
 <stroke
 android:width="1dip"
 android:color="#ffffff" />
 <!--       -->
 <padding
 android:bottom="10dp"
 android:left="10dp"
 android:right="10dp"
 android:top="10dp" />
 <!--    -->
 <corners android:radius="6dp" />

</shape>

모든 View 의 background 로 설정 하면 됩 니 다.

android:background="@drawable/shape_wihte_frame"

2.'핸드폰 번호','비밀번호'뒤의 세로 줄 을 어떻게 실현 합 니까?
이것 은 사실 매우 간단 합 니 다.세로 선 만 쓰 면 됩 니 다.너 비 는 1dp 또는 1px(또는 더 적합 하 다 고 생각 하 는 수치)입 니 다. 

 <View
 android:id="@+id/view1"
 android:layout_width="1dip"
 android:layout_height="fill_parent"
 android:layout_centerVertical="true"
 android:layout_gravity="center_horizontal"
 android:layout_marginLeft="2dp"
 android:layout_marginRight="2dp"
 android:layout_toRightOf="@+id/textView1"
 android:background="#EEEFFF" />

3.입력 상자 의 레이아웃 을 어떻게 삽입 합 니까?
안 드 로 이 드 는 우리 에 게 여러 가지 구 조 를 제공 해 주 었 지만,너 는 어떤 것 으로 도 인 터 페 이 스 를 잘 설계 할 수 없 었 다.끼 워 넣 어야 합 니 다.많은 초보 자 들 이 끼 워 넣 지 못 합 니 다.여러분 은 대담 하 게 끼 워 넣 고 여러 가지 구 조 를 사용 해 야 합 니 다.반드시 멋 진 효 과 를 조합 할 것 입 니 다.이 레이아웃 은 간단 합 니 다.

 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:background="@drawable/shape_wihte_frame" >

 <TextView
 android:id="@+id/textView1"
 android:layout_width="40dp"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_centerVertical="true"
 android:lines="1"
 android:padding="1dp"
 android:text="   "
 android:textSize="11sp" />

 <View
 android:id="@+id/view1"
 android:layout_width="1dip"
 android:layout_height="fill_parent"
 android:layout_centerVertical="true"
 android:layout_gravity="center_horizontal"
 android:layout_marginLeft="2dp"
 android:layout_marginRight="2dp"
 android:layout_toRightOf="@+id/textView1"
 android:background="#EEEFFF" />

 <EditText
 android:id="@+id/phonenumber"
 android:layout_width="wrap_content"
 android:layout_height="40dp"
 android:layout_centerVertical="true"
 android:layout_marginLeft="2dp"
 android:layout_toRightOf="@+id/view1"
 android:background="@drawable/transparent"
 android:ems="19"
 android:hint="      "
 android:inputType="phone"
 android:padding="1dp"
 android:textSize="12sp" >

 <requestFocus />
 </EditText>

 <ImageView
 android:id="@+id/del_phonenumber"
 android:layout_width="20dp"
 android:layout_height="20dp"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:layout_marginRight="3dp"
 android:src="@drawable/text_del"
 android:visibility="invisible" />
 </RelativeLayout>

4.입력 상자 의 입력 이 벤트 를 감청 하고 삭제 단추 의 동적 디 스 플레이 숨 기기
생각 은 간단 하 다.바로 EditText 의 입력 이 벤트 를 감청 한 다음 에 입력 길이 가 0 보다 크 면 뒤의 삭제 단 추 를 표시 하고=0 이면 삭제 단 추 를 숨 기 고 삭제 단 추 를 누 르 면 입력 상 자 를 비 웁 니 다.여기 서 나 는 모두 가 호출 할 수 있 도록 도구 류 를 하나 썼 다.고 내 집적 저 결합 은 우리 의 공 통 된 추구 이다.

public class EditTextClearTools {
 public static void addclerListener(final EditText e1, final ImageView m1) {

 e1.addTextChangedListener(new TextWatcher() {

 @Override
 public void onTextChanged(CharSequence s, int start, int before,
  int count) {
 // TODO Auto-generated method stub

 }

 @Override
 public void beforeTextChanged(CharSequence s, int start, int count,
  int after) {
 // TODO Auto-generated method stub

 }

 @Override
 public void afterTextChanged(Editable s) {
 // TODO Auto-generated method stub
 //            0     clear  。
 String s1 = s + "";
 if (s.length() > 0) {
  m1.setVisibility(View.VISIBLE);
 } else {
  m1.setVisibility(View.INVISIBLE);
 }

 }
 });

 m1.setOnClickListener(new OnClickListener() {

 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 //      
 e1.setText("");

 }
 });

 }

}

마스터 코드

public class MainActivity extends Activity {
 EditText e1, e2;
 ImageView m1, m2;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 requestWindowFeature(Window.FEATURE_NO_TITLE);
 setContentView(R.layout.activity_user_login);
 init();
 }

 private void init() {
 // TODO Auto-generated method stub
 e1 = (EditText) findViewById(R.id.phonenumber);
 e2 = (EditText) findViewById(R.id.password);
 m1 = (ImageView) findViewById(R.id.del_phonenumber);
 m2 = (ImageView) findViewById(R.id.del_password);
 //          
 EditTextClearTools.addclerListener(e1, m1);
 EditTextClearTools.addclerListener(e2, m2);

 }

}

xml 안 드 로 이 드 프로그램의 중요성 은 여러분 이 개발 하 는 과정 에서 천천히 느 낄 수 있 을 것 이 라 고 믿 습 니 다.여기 서 는 간단 한 예 를 들 어 좋 은 안 드 로 이 드 기술 블 로 그 를 많이 업데이트 할 것 이다.저 는 안 탁 천 입 니 다.여러분 의 지지 에 감 사 드 립 니 다.많은 소통 과 소통 을 바 랍 니 다.
코드 연결:원본 코드 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.