[Android 10.02] 03. Form Stuff

2010. 10. 2. 21:55Android

일단 Hello Android를 작성하고 나면 자기가 원하는 방법으로 레이아웃을 꾸미는 법을 배워보자..!!

다음과 같이 안드로이드는 구조화 되어 있으며 프로그램을 작성할때 다음과 같이 레이어를 만드는것이 효율적이라고 볼수 있다.

1.TextView
1.1 TextView를 자바로 구성해보자..
 import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class HelloAndroid extends Activity
{
         public void onCreate(Bundle savedInstanceState)
         {
                  super.onCreate(savedInstanceState);
                  TextView i = new TextView(this);
                   i.setText("HelloAndroid!");
                   setContentView(i);
         }
}

1.2 Xml로 TextView 구성
 <TextView
         android:layout_width="fill_parent"
         android:layout_height="wrap_content“
         android:gravity=“center”
         android:paddingBottom=“10px”
         android:textSize=“40px”
         android:textColor=“#FF00FF”
         android:text=“HelloAndroid”
/>
</LinearLayout>

참고로 android:textColor=“#FF00FF” 이 부분에서 뒤에 컬러는 RGB값을 나타내며 앞에 두자리가 빨강 중간 두자리가 녹색 마지막 2자리가 파랑을 나타내며 각각 16진수로 나타내어 255를 최대값을 가질수 있습니다.

윈폼을 해보면 알수 잇는데 컨테이너라는 것이 있습니다. 이것은 내부적으로 또하나의 제한된 창을 만드는 것으로 하위레이아웃을 만들수 있습니다. 이때 설정 할 수 있는 값을 표로 정리하면 다음과 같습니다.
속성
 layout_above  ~의 위에 배치한다.
 lyaout_below   ~의 아래 에배치한다
 layout_toLeftOf  ~의 왼쪽에 배치한다.
 layout_toRightOf  ~의 오른쪽에 배치한다.
 layout_alignLeft ~와 왼쪽 변을 맞춘다.
 layout_alignRight ~와 오른쪽 변에 맞춘다.
 layout_alignBottom  ~와 아래쪽 변을 맞춘다.
 layout_alignTop  ~와 위쪽 변을 맞춘다. 
 layout_alignParentLeft  true이면 부모와 왼쪽변을 맞춘다.
 layout_alignParentTop  true이면 부모와 위쪽변을 맞춘다. 
 layout_alignParentBottom   true이면 부모와 아래쪽변을 맞춘다.
 layout_alignBaseline ~와 베이스 라인을 맞춘다. 
 layout_alignWithParentifMissing layout_to)LeftOf등의 속성에 대해 앵커가 발견되지 않으면 부모를 앵커로 사용한다.
 layout_centerhorizontal  ture이면 부모의 수평 중앙에 배치한다.
 layout_centerVerical  ture이면 부모의 수직 중앙에 배치한다.
 layout_centerInParent  ture이면 부모의 수평,수직 중앙에 배치한다.

 클래스 설명 
 FrameLayout  단일 객체를 표현하기 위한 뷰 프레임의 역활을 하는 레이아웃이다. 단 두개 이상의 객체를 표현할 때는 나중에 그린 객체를 먼저 보여준다.
 TableLayout  행과 열을 가진 테이블 레이아웃으로 행은 가장 큰 구성요소에 맞게 크기가 재설정되고 셀테두리는 감춰진다.
 AbsoluteLayout 프래그래머가 좌표값으로 객체의 위치를 명시하는 레이아웃 

2. EditText
프로젝트명.Java
import android.app.Activity;
import android.os.Bundle;
import android.view.View;

public class Welcome extends Activity
{
          public void onCreate(Bundle savedInstanceState)
          {
                   super.onCreate(savedInstanceState);
                   setContentView(R.layout.main);
                   Button enter = (Button)findViewById(R.id.Button01);
                   enter.setOnClickListener(new View.OnClickListener()
                   {
                              public void onClick(View v) 
                              {
                                        EditText etName = (EditText)findViewById(R.id.EditText01);
                                        setContentView(R.layout.second);
                                        TextView Msg = (TextView)findViewById(R.id.TextView01);
                              }                  
                   });
           }
}

3. ImageView
일단 이미지를 불러와서 사용하기 위해서는 이미지를 등록해야 하는데 이때 이미지는 res->drawable-hdpi에 이미지를 import해주면 된다.
그 후 레이아웃을 작성하면 되는데 이때 이전까지만 해도 따로 입력했었는데 이번엔 툴을 이용하는 방법을 해보자면 일단 main.xml파일로 간다. 그 후 outline 부분으로 가서 +를 클릭 하면 아래와 같은 창이 나오는데 여기는 대부분은 버튼이라던가 기타 여러 위젯이 있는데 필요한걸 골라서 가져오면 된다.
가져왔다면 다음과 같은 내용이 작성될 것이다.
 <ImageView
              android:layout_width=“fill_parent"
              android:layout_height=“fill_parent”
              android:src=@drawable/helloandroid”
              android:scaleType=“center”>
</ImageView>

여기에 android:src="@drawable/이미지 이름"을 적어 추가해주면 원하는 이미지가 출력된다.

4. Button
일반적으로 은근슬쩍 많이 쓰는 버튼...
버튼을 사용하려면 다음과 같은 코드를 입력해야 한다.
먼저 xml코드를 작성하고 Java코드를 작성해 보면...
xml코드 위에 쓴 방법으로 해서 좀 추가할껀 추가해서 다음과 같은 코드를 만든다.
<Button
android:text="버튼테스트"
android:id="@+id/Button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></Button>
<Button
android:text="종 료 "
android:id="@+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"></Button>
</LinearLayout> 

Java코드
 public class ButtonTest extends Activity
{
         private Button testButton;
         private Button exitButton;
         public void onCreate(Bundle savedInstanceState)
         {
                  super.onCreate(savedInstanceState);
                  setContentView(R.layout.main);
                  testButton = (Button) findViewById(R.id.Button01);
                  exitButton = (Button) findViewById(R.id.Button02);
                  testButton.setOnClickListener(new View.OnClickListener()
                  {
                             public void onClick(View v)
                             {
                                        Toast.makeText(ButtonTest.this,"ButtontestON!!",Toast.LENGTH_SHORT).show();
                              }
                  });
                  exitButton.setOnClickListener(new View.OnClickListener() 
                  {
                           public void onClick(View v)
                           {
                                   finish();
                           }
                  });
}
이렇게 하면 버튼도 완성되고 추가로 토스트라는 기능을 사용하였는데 토스트란 알람 같은 깜빡 거리는 것을 말한다.
Toast 사용법
 Toast.makeText(클래스명.this,"출력 될 내용",Toast.LENGTH_SHORT).show();

5. CheckBox
xml코드는 임의로 outline에서 checkbox를 추가해주고 id값은 checkbox라고 해주고 테스트 해본다.
 import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.CheckBox;
import android.widget.Toast;


public class CheckBoxTest extends Activity
{
         public void onCreate(Bundle savedInstanceState)
         {
                 super.onCreate(savedInstanceState);
                 setContentView(R.layout.main);
                 final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox);
                 checkbox.setOnClickListener(new OnClickListener() {public void onClick(View v)
                 {
                            if (checkbox.isChecked())
                            {
                                   Toast.makeText(CheckBoxTest.this, "Selected", Toast.LENGTH_SHORT).show();
                            }else{
                                           Toast.makeText(CheckBoxTest.this, "Not selected", Toast.LENGTH_SHORT).show();
                                    }
                }
        });
}


6. RadioButton
 이것도 xml에 Radio버튼을 3개를 만든다.
 RadioButton red = (RadioButton) findViewById(R.id.apple);
RadioButton blue = (RadioButton) findViewById(R.id.orange);
RadioButton green = (RadioButton) findViewById(R.id.melon);
red.setOnClickListener(radio_listener);
blue.setOnClickListener(radio_listener);
green.setOnClickListener(radio_listener);

OnClickListener radio_listener=new OnClickListener()
{
              public void onClick(View v)
              {
                      RadioButton rb = (RadioButton)v;
                      Toast.makeText(RadioButton.this, rb.getText(), Toast.LENGTH_SHORT).show();
               }
};

이려면 라디오 버튼이 클릭되면 라디오버튼의 텍스트가 출력된다.

7. ListView
7.1 ListView란?
 Adapter를 이용해 어떤 항목을 집합을 수직으로 표시하는 위젯으로 선택위젯에는 ListView, Spinner, GridView, Gallery등이 있다.

Adapter(아답터)
선택 위젯에 들어갈 데이터를 공급하고 모양을 결정하는 역할 즉 원본 데이터와 ListView를 연결 시켜줌과 동시에 리스트에 어떻게 표시할 것인 가를 정의해준다.

Adapter의 종류
CursorAdapter : Cursor(DB Query 결과에 랜덤하게 읽고 쓸수 있게 해주는 Interface)로부터 데이터를 선택 위젯에 공급하는 아답터, Content Provider가 제공하는 Data를 선택 위젯에 연결할 때도 사용함

SimpleAdapter : Data를 XML Layout 파일에 지정된 View형태로 표시하는데 사용함

ActivityAdapter, ActivityIconAdapter :  특징 Intend 발생시 실행 될 activity의 이름이나 아이콘 목록을 위한 아답터

ArrayAdapter : arry나 java.util.List에 저장된 data를 위한 아답터

7.2 리스트뷰가 있는 프로그램 작성
7.2.1 먼저 xml 코드를 구성해준다.


<TableLayout
           android:id="@+id/TableLayout01"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content“>
<TableRow
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
<EditText
           android:id="@+id/edittext"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_weight="3"></EditText>
</TableRow>
<TableRow
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
<Button android:text="ADD"
           android:id="@+id/add"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_weight=“1"></Button>
<Button
           android:text="DELETE"
           android:id="@+id/delete"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_weight=“1"></Button>
</TableRow>
<ListView
           android:id="@+id/listview"
           droid:layout_width="fill_parent"
           droid:layout_height="fill_parent"></ListView>
</LinearLayout>

7.2.2 .java파일
 import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

public class ListTestActivity extends Activity
{
          ArrayList<String> Items;
          ArrayAdapter<String> Adapter;
          ListView list;
          public void onCreate(Bundle savedInstanceState)
          {
                    super.onCreate(savedInstanceState);
                    setContentView(R.layout.main);
                    Items = new ArrayList<String>();
                    Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, Items);
                    list = (ListView)findViewById(R.id.ListView01);
                    list.setAdapter(Adapter);
                    list.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
                    list.setOnItemClickListener(mItemClickListener);
                    findViewById(R.id.Button01).setOnClickListener(mClickListener);
                    findViewById(R.id.Button02).setOnClickListener(mClickListener);
          }
          Button.OnClickListener mClickListener = new View.OnClickListener()
          {
                   public void onClick(View v) 
                   {
                            EditText ed = (EditText)findViewById(R.id.EditText01);
                            switch(v.getId())
                            {
                                    case R.id.Button01: // ListView 목록 입력
                                               String text = ed.getText().toString();
                                               if(text.length() != 0)
                                               {
                                                         Items.add(text);
                                                         ed.setText("");
                                                         Adapter.notifyDataSetChanged();
                                                }
                                               break;
                                    case R.id.Button02: // ListView 목록 삭제
                                              int id;
                                              id = list.getCheckedItemPosition();
                                              if(id != ListView.INVALID_POSITION)
                                              {
                                                          Items.remove(id);
                                                          list.clearChoices();
                                                         Adapter.notifyDataSetChanged();
                                               }
                                              break;
                             }
                   }
          };
          AdapterView.OnItemClickListener mItemClickListener = new AdapterView.OnItemClickListener()
          {
                      public void onItemClick(AdapterView parent, View view, int position, long id)
                      {
                               String mes;
                               mes = "Select Item = " + Items.get(position);
                               Toast.makeText(ListTestActivity.this, mes, Toast.LENGTH_SHORT).show();
                      } // ListView 목록 선택시 Toast 출력
          };
}