Neo's Programming

다음은 에디트 + 텍스트 뷰 포함하는 라이너 위젯이다.

예제 코드를 실행 해 보면 입력 문자의 수를 파악 할 수 있다.

XML Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
   
    <imageview.test.Edit_Widget
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    />
</LinearLayout>

Java Code

package imageview.test;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.text.*;
import android.util.*;
import android.widget.*;

public class ImageViewActivity extends Activity{
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
 }
}

class Edit_Widget extends LinearLayout implements TextWatcher{
 EditText m_edit;
 TextView m_text;
 
 public Edit_Widget(Context context){
  super(context);
  init();
 }
 
 public Edit_Widget(Context context, AttributeSet att){
  super(context, att);
  init();
 }
  
 private void init(){
  setOrientation(LinearLayout.VERTICAL);
  m_edit = new EditText(getContext());
  m_text = new TextView(getContext());
  m_text.setText("Now Length : 0");
  LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  addView(m_edit, param);
  addView(m_text, param);
  m_edit.addTextChangedListener(this);
 }

 public void afterTextChanged(Editable arg0) {
 }

 public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,int arg3) {
 }

 public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
  m_text.setText("Now Length : " + arg0.length());
 }
}
여기에선 잘 살펴보면 TextWatcher를 이용하여 확장 개념으로 적용 한 것이다.

또한 텍스트 위젯들을 XML에 적용해서 하지 않고 바로 코드에 쓴 케이스로 XML에 적용할 경우 findViewById를 이용하여 각기 할당하여 사용하면 된다.

커스텀 위젯은 기존 위젯 클래스를 상속받아 기능을 확장, 수정하는 것을 말한다. 단, ViewGroup Or 파생 클래스 확장하여 내부 위젯 작용까지도 처리를 해야한다.

간단한 예를 보면 다음과 같다. 문자를 입력하면 사운드가 나온다.

물론 사전작업으로 raw에 mp3 파일을 등록한 후 작업한다.

XML Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="input text"
    />
    <imageview.test.SoundEditWidget
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12pt"
    />
</LinearLayout>

imageview.test.SoundEditWidget 이 부분을 보면 Package 명이 섞여 있다!! 필자가 공부하는 책엔 이게 뭔지 명시가 되어 있지 않아 개인적으로 만든 Package 이용시 굉장히 헛갈렸다.

Java Code

package imageview.test;

import android.app.Activity;
import android.content.Context;
import android.media.AudioManager;
import android.media.SoundPool;
import android.os.Bundle;
import android.util.AttributeSet;
import android.widget.EditText;

public class ImageViewActivity extends Activity{
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
 }
}

class SoundEditWidget extends EditText{
 SoundPool m_pool = null;
 int m_click;
 public SoundEditWidget(Context context){
  super(context);
  init(context);
 }
 
 public SoundEditWidget(Context context, AttributeSet att){
  super(context, att);
  init(context);
 }
 
 public SoundEditWidget(Context context, AttributeSet att, int defStyle){
  super(context, att, defStyle); 
  init(context);
 }
 
 private void init(Context context){
  m_pool = new SoundPool(1,AudioManager.STREAM_MUSIC,0);
  m_click = m_pool.load(context, R.raw.aid, 1);
 }
 
 protected void onTextChanged(CharSequence text, int start, int before, int after){
  if(m_pool != null){
   m_pool.play(m_click, 1,1,0,0,1);
  }
 }
}
이 코드들을 작성하다가 팁 하나!! 이클립스를 사용하는 분들은 알겠지만 Ctrl + Shift + O 를 누르면 import 대상들이 자동 import 된다.

레이팅바는 흔히 많이 보는 별 모양을 클릭하면서 점수를 입력 받는 것이다.

XML은 다음과 같이 작성을 한다.

<RatingBar
        android:id="@+id/ratingbar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stepSize="0.2"
        android:rating="3"
    />

여기에서 stepSize는 클릭 위치에 따라 얼마나 rating을 증가 시킬 것인가 이고 rating은 현재 값 설정이다.

numStars의 경우는 별의 숫자, isIndicator는 편집 가능 유무를 말하며 true로 둘 경우 편집이 불가능 하다.

또한 style="?android:attr/ratingBarStyleSmall 은 별의 형태를 작게 나타내며 읽기 전용으로 변화가 되고, ratingBarStyleIndicator를 적용하면 그냥 읽기 전용으로 적용이 된다.

테스트 할 자바 파일은 다음과 같다.

public class ImageViewActivity extends Activity{
 RatingBar _rating;
 TextView _text;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        _rating = (RatingBar)findViewById(R.id.ratingbar1);
        _text = (TextView)findViewById(R.id.text);
       
        _rating.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {   
   @Override
   public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
    _text.setText("Value : " + rating);
   }
  });
    } 
}

프로그레스는 진행 상태를 나타 내 준다.

안드로이드에서는 우리가 알고 있는 막대 형태의 프로그레스와 원형의 프로그레스 두가지가 있다.

막대 형태의 프로그레스를 쓰고 싶으면 style="?android:attr/ProgressBarStyleHorizontal" 처리를 하면 나타나고

원형을 하고 싶다면 XML에서 그 내용을 기입 할 필요가 없다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ProgressBar       
        android:id="@+id/prg1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="10"
        android:secondaryProgress="50"
    />
    <ProgressBar       
        android:id="@+id/prg2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
    />
    <Button
        android:id="@+id/defirst"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="defirst"
    />
    <Button
        android:id="@+id/infirst"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="infirst"
    />
    <Button
        android:id="@+id/desecond"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="desecond"
    />
    <Button
        android:id="@+id/insecond"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="insecond"
    />
   
    <Button
        android:id="@+id/start"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="start"
    />
    <Button
        android:id="@+id/stop"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="stop"
    />
</LinearLayout>

다음은 프로그레스바와 관련된 메서드에 대한 설명이다.

캘러리는 수평으로 스크롤이 되는 어댑터 뷰로 중안에는 선택 항목으로 보이고 앞, 뒤 항목이 표시된다.

무난히 웹사이트에서 이미지 보이는 효과에서 많이들 봐 왔을 것이다.

xml에서 spacing 속성은 이미지간의 간격, animationDuration 은 이미지 스크롤 교체 시간을 이야기 한다.

xml 파일은 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gallery"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:spacing="5px"
    android:animationDuration="1500"
    />

자바 파일은 다음과 같다.

public class ImageViewActivity extends Activity{
 
     /** Called when the activity is first created. */
  @Override   
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
        
         Gallery g = (Gallery)findViewById(R.id.gallery);
         g.setAdapter(new ImageAdapter(this));
     }
}

class ImageAdapter extends BaseAdapter{
 Context _context;

 int[] _img = {R.drawable.calendar,R.drawable.ic_launcher};
 
 public ImageAdapter(Context context){
  _context = context;
 }
 
 public int getCount() {
  return _img.length;
 }

 public Object getItem(int position) {
  return _img[position];
 }

 public long getItemId(int position) {
  return position;
 }

 public View getView(int position, View convertView, ViewGroup parent) {
  ImageView view;
  if(convertView == null){
   view = new ImageView(_context);
  }
  else{
   view = (ImageView)convertView;
  }
  view.setImageResource(_img[position]);
  view.setScaleType(ImageView.ScaleType.FIT_XY);
  view.setLayoutParams(new Gallery.LayoutParams(45,45));
  return view;
 } 
}

여기에서 보면 LayoutParams 의 Width, Height 설정하는 부분의 사이즈는 이미지 사이즈를 말 하는 것이다.

이미지 파일을 만들어서 보여 줄 때 픽셀 단위로 확실하게 통일 해야 할 것이다. (필자 생각이다.)

이것은 2차원 표 형태로 출력하는 위젯이다.

그리드 뷰는 많이들 봐 왔을 것이다.

여기에는 문자열, 이미지 모두 가능하고 다수의 데이터 중 하나를 선택 받을 경우 적합하다.

xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:columnWidth="60dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    />

java

package imageview.test;

import android.app.Activity;
import android.os.*;
import android.view.*;
import android.widget.*;
import android.widget.AdapterView.*;
import android.content.*;

public class ImageViewActivity extends Activity{
 
     /** Called when the activity is first created. */
  @Override   
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
        
         GridView grid = (GridView)findViewById(R.id.grid);
         ImageAdapter adapter = new ImageAdapter(this);
         grid.setAdapter(adapter);
        
         grid.setOnItemClickListener(new OnItemClickListener(){
          public void onItemClick(AdapterView<?> parent, View view, int index, long id){
           Toast.makeText(ImageViewActivity.this, index+"선택", Toast.LENGTH_SHORT).show();
          }
         });
     }
}

class ImageAdapter extends BaseAdapter{
 Context _context;
 int[] picture = {R.drawable.calendar,R.drawable.calendar,R.drawable.calendar};
 public ImageAdapter(Context context){
  this._context=context;
 }
 
 public int getCount(){
  return 100;
 }
 
 public Object getItem(int index){
  return picture[index%3];
 }
 
 public long getItemId(int index){
  return index;
 }
 
 public View getView(int index, View view, ViewGroup parent){
  ImageView imgview;
  if(view==null){
   imgview = new ImageView(_context);
   imgview.setLayoutParams(new GridView.LayoutParams(45,45));
   imgview.setAdjustViewBounds(false);
   imgview.setScaleType(ImageView.ScaleType.CENTER_CROP);
   imgview.setPadding(8,8,8,8);
  }
  else{
   imgview = (ImageView)view;
  }
  imgview.setImageResource(picture[index % 3]);
  return imgview;
 }
}

실행을 해 보면 100개의 공간에 이미지가 들어가 있는 것을 확인 할 수가 있다.

커스텀 항목 뷰는 원하는 항목 배치에 좋다.

먼저 커스텀 레이아웃을 작성한다.

mail.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
   <TextView
        android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentLeft="true"
     android:id="@+id/text"
    />
    <Button
        android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/btn"
     android:text="test"
     android:layout_alignParentRight="true"
    />   
    <ListView
        android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:id="@+id/list"
    />
</RelativeLayout>

Item 클래스

public class Item {
 String _name;
 public Item(String name){
  this._name = name;
 }
}

Adapter 클래스

class ListAdapter extends BaseAdapter{
 Context _main;
 LayoutInflater _inflater;
 ArrayList<Item> _item;
 int _layout;
 
 public ListAdapter(Context context, int layout, ArrayList<Item> arr){
  this._main=context;
  this._inflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  this._layout=layout;
  this._item=arr;
 }
 
 public int getCount(){
  return this._item.size();
 }
 
 public String getItem(int index){
  return this._item.get(index)._name;
 }
 
 public long getItemId(int index){
  return index;
 }
 
 public View getView(int index, View view, ViewGroup parent){
  final int idx = index;
  if(view==null){
   view = this._inflater.inflate(this._layout,parent,false);
  }
  TextView txtview = (TextView)view.findViewById(R.id.text);
  txtview.setText(this._item.get(idx)._name);
  
  Button btn = (Button)view.findViewById(R.id.btn);
  btn.setOnClickListener(new Button.OnClickListener(){
   public void onClick(View v){
    String str = _item.get(idx)._name;
    Toast.makeText(_main, str, Toast.LENGTH_SHORT).show();
   }
  });
  return view;
 }
}

메인 클래스

public class ImageViewActivity extends Activity{
 
 ArrayList<Item> arr;
 
 ListView list ;
    /** Called when the activity is first created. */
 @Override   
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        arr = new ArrayList<Item>();
        Item item;
        item = new Item("first");
        arr.add(item);
        item = new Item("second");
        arr.add(item);
        item = new Item("third");
        arr.add(item);
       
        ListAdapter adapter = new ListAdapter(this,R.layout.main,arr);
        ListView list;
        list=(ListView)findViewById(R.id.list);
        list.setAdapter(adapter);
 }
}
실행을 하면 어댑터를 통하여 제어를 하는 것이 확인 가능하다.