안 드 로 이 드 사용자 등록 인터페이스 간단 한 디자인

본 논문 의 사례 는 안 드 로 이 드 사용자 등록 인터페이스의 디자인 을 공유 하여 여러분 께 참고 하 실 수 있 습 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
I.실례 목표
사용자 등록 인터페이스 를 설계 합 니 다.텍스트 상자,편집 상자,단추,체크 상자 등 기본 컨트롤 을 사용 해 야 합 니 다.
II.기술 분석
먼저 레이아웃 파일 에 필요 한 컨트롤 을 설정 하기 위해 컨트롤 의 표 시 를 사용 한 다음 주 Activity 에서 이 컨트롤 을 가 져 와 모니터 를 추가 하여 작업 을 감청 하고 마지막 으로 콘 솔 에서 작 동 하 는 내용 을 출력 합 니 다.
III.실현 절차
Eclipse 에 Android 프로젝트 를 만 듭 니 다.이름 은 TestUser Register 입 니 다.사용자 등록 인터페이스 를 설계 합 니 다.텍스트 상자,편집 상자,단추,체크 단추,체크 상자,목록 선택 상자,목록 보기,그림 보기 등 컨트롤 을 사용 해 야 합 니 다.
(1)프로젝트 res 디 렉 터 리 에 있 는 drawableldpi 폴 더 에 logo 5.jpg 와 background 3.jpg 라 는 두 장의 그림 을 넣 어 표시 하 는 로고 그림 과 배경 그림 으로 사용 합 니 다.
(2)프로젝트 의 res/values 디 렉 터 리 에 새 배열 자원 파일 arrays.xml 을 추가 합 니 다.이 파일 에 두 개의 문자열 배열 을 추가 합 니 다.이름 은 type 과 care 이 고 코드 는 다음 과 같 습 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string-array name = "type">
  <item>  </item>
  <item>  </item>
  <item>  </item>
  <item>   </item>
  <item>  </item>
 </string-array>

 <string-array name = "care">
  <item>1.        </item>
  <item>2.               </item>
  <item>3.           </item>
  <item>4.                </item>
 </string-array>

</resources>

(3)프로젝트 의 res/layot 디 렉 터 리 에서 activity 수정main.xml 파일 은 먼저 인터페이스 전체 레이아웃 을 표 레이아웃 으로 바 꾸 고 배경 을 설정 한 다음 에 이미지 보 기 를 로고 이미지 로 추가 합 니 다.코드 는 다음 과 같 습 니 다.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:background="@drawable/background3">

 <ImageView 
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/logo5"
  android:id="@+id/imageView02"
  android:layout_margin="5dp"
  android:adjustViewBounds="true"
  android:maxWidth="75dp"
  android:maxHeight="60dp"/>
</TableLayout>

상기 코드 에서 android:adjustViewBounds 속성 은 ImageView 가 자신의 경 계 를 조정 하여 필요 한 그림 의 길이 변 화 를 유지 할 지 여 부 를 설정 하 는 데 사 용 됩 니 다.true 일 때 자신의 경 계 를 조정 하여 필요 한 그림 의 길이 변 화 를 유지 할 지 여 부 를 표시 합 니 다.android:max Width 와 android:max Height 는 ImageView 의 최대 너비 와 최대 높이 를 나 타 냅 니 다.
(4)TableRow 표 줄 세 개 를 추가 하고 3 개의 텍스트 상자(TextView)와 편집 상자 컨트롤(EditText)을 추가 하여 사용자 이름,비밀번호,비밀 번 호 를 표시 하고 입력 합 니 다.구체 적 인 코드 는 다음 과 같다.

<TableRow>

  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="   ："
   android:layout_marginLeft="5dp"/>

  <EditText 
   android:layout_width="250dp"
   android:layout_height="wrap_content"
   android:hint="      "
   android:id="@+id/editText01"
   android:singleLine="true"
   android:inputType="textPersonName"/>

 </TableRow>


 <TableRow>
  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="  ："
   android:layout_marginLeft="5dp"/>

  <EditText 
   android:layout_width="250dp"
   android:layout_height="wrap_content"
   android:hint="     "
   android:id="@+id/editText02"
   android:singleLine="true"
   android:inputType="textPassword"/>
 </TableRow>

 <TableRow>
  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="    ："
   android:layout_marginLeft="5dp"/>

  <EditText 
   android:layout_width="250dp"
   android:layout_height="wrap_content"
   android:hint="     "
   android:id="@+id/editText03"
   android:singleLine="true"
   android:inputType="textPassword"/>
 </TableRow>

위 코드 에서 EditText 컨트롤 의 android:singleLine="true"는 한 줄 의 입력 텍스트 를 표시 합 니 다.android:input Type="textPersonName"은 입력 형식 이 사용자 이름 임 을 표시 합 니 다.안 드 로 이 드:input Type="textPassword"는 입력 한 내용 을 암호 로 표시 하고 입력 한 내용 을"."로 대체 하여 암호 가 누설 되 지 않도록 합 니 다.
(5)선형 레이아웃 을 추가 합 니 다.텍스트 상자 컨트롤(TextView)과 선택 단추 그룹(RadioGroup)을 추가 합 니 다.그 중에서 선택 단추 그룹 에 선택 단추 컨트롤 두 개 를 추가 합 니 다.그 중에서 선형 레이아웃 의 android:orientation 속성 은'horizontal'로 설정 되 어 있 습 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

<LinearLayout 
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:layout_marginTop="10dp">

  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginLeft="5dp"
   android:layout_gravity="center_vertical"
   android:text="       " />

  <RadioGroup

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/sex">

   <RadioButton 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text=" "
     android:id="@+id/radioButton1"/>

   <RadioButton 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text=" "
     android:id="@+id/radioButton2"/>
  </RadioGroup>

 </LinearLayout>

(6)선형 레이아웃 을 추가 합 니 다.텍스트 상자(TextView)와 목록 선택 상자 컨트롤(Spinner)을 추가 합 니 다.선형 레이아웃 의 android:orientation 속성 은"horizontal"로 설정 되 어 있 습 니 다.그 중에서 목록 선택 상자 의 android:entries 속성 은"@array/type"입 니 다.코드 는 다음 과 같 습 니 다.

<LinearLayout 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:layout_marginTop="10dp">

  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="       "
   android:layout_marginLeft="5dp"/>

  <Spinner 
   android:entries="@array/type"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/spinner"/>

 </LinearLayout>

(7)텍스트 상자 컨트롤(TextView),목록 보기 컨트롤(ListView),체크 상자 컨트롤(CheckBox),일반 단추 컨트롤(Button)을 추가 합 니 다.코드 는 다음 과 같 습 니 다.

<TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="    "
   android:textSize="27sp"
   android:gravity="center_horizontal"/>

 <ListView 
   android:id="@+id/listView"
   android:entries="@array/care"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

 <CheckBox 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/checkBox"
   android:text="       "/>

 <Button 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/reg"
   android:text="  "
   android:gravity="center_horizontal"
   android:visibility="invisible"/>

위 코드 에서 TextView 컨트롤 의 android:gravity="center"horizontal"은 텍스트 상자 컨트롤 이 화면 에 수평 으로 놓 여 있 음 을 표시 합 니 다.일반 단추 의 android:visibility 속성 은 이 컨트롤 이 보 이 는 지 여 부 를 표시 합 니 다.여기 서 설정 한 것 은 보이 지 않 습 니 다.
（8）activity_main.xml 파일 전체 코드

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:background="@drawable/background3">

 <ImageView 
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/logo5"
  android:id="@+id/imageView02"
  android:layout_margin="5dp"
  android:adjustViewBounds="true"
  android:maxWidth="75dp"
  android:maxHeight="60dp"/>

 <TableRow>

  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="   ："
   android:layout_marginLeft="5dp"/>

  <EditText 
   android:layout_width="250dp"
   android:layout_height="wrap_content"
   android:hint="      "
   android:id="@+id/editText01"
   android:singleLine="true"
   android:inputType="textPersonName"/>

 </TableRow>


 <TableRow>
  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="  ："
   android:layout_marginLeft="5dp"/>

  <EditText 
   android:layout_width="250dp"
   android:layout_height="wrap_content"
   android:hint="     "
   android:id="@+id/editText02"
   android:singleLine="true"
   android:inputType="textPassword"/>
 </TableRow>

 <TableRow>
  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="    ："
   android:layout_marginLeft="5dp"/>

  <EditText 
   android:layout_width="250dp"
   android:layout_height="wrap_content"
   android:hint="     "
   android:id="@+id/editText03"
   android:singleLine="true"
   android:inputType="textPassword"/>
 </TableRow>


 <LinearLayout 
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:layout_marginTop="10dp">

  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginLeft="5dp"
   android:layout_gravity="center_vertical"
   android:text="       " />

  <RadioGroup

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/sex">

   <RadioButton 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text=" "
     android:id="@+id/radioButton1"/>

   <RadioButton 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text=" "
     android:id="@+id/radioButton2"/>
  </RadioGroup>

 </LinearLayout>


 <LinearLayout 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   android:layout_marginTop="10dp">

  <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="       "
   android:layout_marginLeft="5dp"/>

  <Spinner 
   android:entries="@array/type"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/spinner"/>

 </LinearLayout>

 <TextView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="    "
   android:textSize="27sp"
   android:gravity="center_horizontal"/>

 <ListView 
   android:id="@+id/listView"
   android:entries="@array/care"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

 <CheckBox 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/checkBox"
   android:text="       "/>

 <Button 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/reg"
   android:text="  "
   android:gravity="center_horizontal"
   android:visibility="invisible"/>


</TableLayout>

(9)MainActivity.java 파일 에서 콤 보 상자 컨트롤,일반 단추 컨트롤,단일 단추 그룹 컨트롤 과 목록 선택 상자 컨트롤 을 가 져 오고 모니터 를 추가 합 니 다.코드 는 다음 과 같 습 니 다.

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.app.Activity;


public class MainActivity extends Activity {


 private Button reg = null;
 private int location = -1;
 private Spinner spinner = null;
 private CheckBox checkBox = null;
 private EditText editText01 = null ;
 private EditText editText02 = null;
 private EditText editText03 = null;
 private RadioButton radio =null ;
 private ListView listView = null;
 private RadioGroup sex;

 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  //       
  reg = (Button) findViewById(R.id.reg);
  spinner = (Spinner) findViewById(R.id.spinner);
  checkBox = (CheckBox) findViewById(R.id.checkBox);
  editText01 = (EditText) findViewById(R.id.editText01);
  editText02 = (EditText) findViewById(R.id.editText02);
  editText03 = (EditText) findViewById(R.id.editText03);

  listView = (ListView) findViewById(R.id.listView);
  sex = (RadioGroup) findViewById(R.id.sex);


  ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.care, android.R.layout.simple_spinner_item);
  listView.setAdapter(adapter);//          
  //           
  checkBox.setOnCheckedChangeListener(new checkBoxOnCheckedChangeListener ());

  sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {



   public void onCheckedChanged(RadioGroup group, int checkedId) {

     radio = (RadioButton) findViewById(checkedId);

   }
  });


  spinner.setOnItemSelectedListener(new spinnerOnItemSelectedListener());

  reg.setOnClickListener(new regOnClickListener());

 }


 class regOnClickListener implements OnClickListener{


  public void onClick(View v) {

   Log.i("        ：", editText01.getText().toString());
   Log.i("       ：", editText02.getText().toString());
   Log.i("         ：", editText03.getText().toString());

   if (radio != null) {
    Log.i("       ：", radio.getText().toString());
   }else {
    Log.i("       ：", " ");
   }

   Log.i("       ：", spinner.getItemAtPosition(location).toString());

  }

 }

 class spinnerOnItemSelectedListener implements OnItemSelectedListener{


  public void onItemSelected(AdapterView<?> parent, View view,
    int position, long id) {

   //              
   location = position;   

  }

  public void onNothingSelected(AdapterView<?> parent) {
  }

 }


 //        
 class checkBoxOnCheckedChangeListener implements OnCheckedChangeListener{


  public void onCheckedChanged(CompoundButton buttonView,
    boolean isChecked) {

   if (isChecked) {
    reg.setVisibility(View.VISIBLE);
   }else {
    reg.setVisibility(View.INVISIBLE);
   }

  }

 }

}

상기 코드 에서 드 롭 다운 목록 상자 컨트롤 러 의 모니터 를 통 해 선택 한 내용 의 위 치 를 가 져 온 다음 location 변 수 를 할당 합 니 다.콤 보 상자 컨트롤 의 모니터 에서 이 콤 보 상자 가 선택 되면 등록 단 추 를 표시 합 니 다.그렇지 않 으 면 보이 지 않 습 니 다.
IV.운행
정보 미 작성 전

정 보 를 작성 하고 등록 을 클릭 하면  

콘 솔 출력 정보

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.