반응형
SMALL

▩ 커스텀컴포넌트 이벤트 처리, 볼륨을 높여라

 

안드로이드는 다양한 기본 위젯을 제공을 한다. Button, TextView, EditText,ListView,CheckBox,

RadioButton,Gallery,Spinner있다.  이 위젯들 중에서도 개발자가 필요로 의해서 직접 View클래스를 상속받아서 위젯을 개발해야 한다. 이것이 커스텀 컴포넌트다.

만약 기존의 위젯을 약간만 변화를 주고 싶으면 위젯을 상속받아서 메소드를 제정의하면 된다.

 

이번 포스트에서는 볼륨을 동작하는 위젯을 만들어 보자!

 

1) 아래 그림과 같이 이미지를 res/drawable 폴더에 저장합니다. 이름은 "knob.png"입니다.

 

 

2>  VolumeControView01 프로젝트를 생성합니다.

3>1번. MainActivity.java 파일이 자동 생성되었을 겁니다.

           VolumeControlView.java  파일을 만듭니다.

    2번. 1) 그림저장된 상태를 나타냅니다.

   

 

    3번. activity_main.xml 코드을 작성합니다.

         < main.volumecontroview01.VolumeControlView  → 커스텀컴포넌트를 사용할 때는

                   android:id ="@+id/volume"

                   android:layout_width="300px"

                   android:layout_height="300px"

                   android:layout_gravity="center"/>

 

4>VolumeContrView01.java 코드를 작성합니다.

    package Kr.co.company.customcomponet;

  

   public class VolumeControlview extends ImaeView implements View.OnTouchListener{

     private double angle = 0.0;

     private knobListener listener;

     float x,y;

     float mx,my;

   

    public interface KnobListener{

           public void onChanged(double angle);

    }

    public void setKnobListener(KnobListener lis){

          listener = list;

    }

    public VolumeControlView(Context context){

         super(context);

         this.setImageResource(R.drawable.knob);

         this.setOnTouchListener(this);

   }

    public VolumeControlview(Context context, AttributeSet attrs){

        super(context, attrs);

        this.setImageResource(r.drawable.knob);

        this.setOnTouchListener(this);

    }

    private double getAngle(float x, float y) {

       mx = x -(getWidth() /2.0f);

       my = (getHeight() / 2.0f) -y;

       double  degree = Math.atan2(mx,my) * 180.0/3.141592;

       return degree;

    }

    public boolean onTouch(View v, MotionEvent event){

       x = event.getX(0);

       y = event.geetY(0);

       angle = getAngle(x,y);

       invalidate();

       listener.onChanged(angle);

       return true;

   }

   protected void onDraw(Canvas c){

      Paint paint = new Paint();

      c.save();

      c.rate(float ) angle.geWidth()/ 2. getHeight()/2;

      super.onDraw(c);

      c.restore();

     }

}

 

5> MainActivitiy.java  코드를 작성합니다.

 

6. 볼륨실행을 아래와 같습니다.

 

   

위의 예저처럼 안드로이드에서 지원되지 않는 위젯을 개발하고자 할때에는 개발자가

직접 View 클래슬 상속받아서 필요한 위젯을 개발할 수 있다.

반응형
LIST
반응형
SMALL

이벤트 처리 (체크박스버튼(checkbox button))사용하기 ▣

 

이벤트 처리에는 체크박스(checkbox) 위젯이 있습니다.

체크박스(checkbox) 위젯은 어느때 사용하면 쓰기 편한지 알아보도록 하겠습니디. 체크박스(checkbox) 위젯은 여러 개를 동시에 선택할때 사용되어지는 위젯입니다.

 

예제를 통해서 알아보겠습니다.

 

1) CheckBox file 프로젝트를 생성합니다.

 

   * checkBox01 파일 만듭니다. 

     체크박스버튼(checkboxbutton) 입력하고 next 누룹니다.

 

 

  * 아래와 같은 화면이 보입니다. next누루고 이동합니다.

  

 

 * 아래와 같은 화면으로 이동됩니다. 빈프로젝트를 선택합니다.

 

 

  * 아래와 같은 화면이 보이고  finish 눌러줍니다.

                                                       

 

2) *es/layout에서 activity_main.xml 에서 Design 선택합니다.

     Checkbox 클릭한 상태에서 드러그하여 붙여넣기 합니다.

     그리고 text로 화면이동합니다. 코드를 작성합니다.

 

 

<CheckBox

     android:id="@+id/meat"

     android:layout_width="wrap_content"

     android:layout_weight="1"

     android:text="고   기"

     android:onClick="onCheckboxClicked"/>

<Checkbox

    android:id="@+id/cheese"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="치즈"

    android:onClick="onCheckboxClicked/>

 

 

  3> CheckBox01Activity 파일을 아래와 같은 방법으로 코드를 작성하면된다.

 

public void onCheckboxClicked(View view){

   boolean checked = ((CheckBox) View).isChecked();

   switch(view.getId()){

      case R.id.checkbox_meat:

        if(checked)

         Toast.makeText(getApplicationContext(),"고기선택",

           Toast.LENGTH_SHORT).show();

        else

         Toast.makeText(getApplicationContext(),"고기선택해제",

          Toast.LENGTH_SHORT).show();

        break;

     case R.id.checkbox_cheese:

        if(checked)

         Toast.makeText(getApplicationContext()," 치즈선택",

            Toast.LENGTH_SHORT).show();

        else

         Toast.makeText(getApplicationContext(),"치즈선택해제",

           Toast.LENGTH_SHORT).show();

      break;

}

 

 

 

4> 체크박스버튼(checkbox button) 실행합니다.

 

 

 

   * 아래와 같이 두개의 체그박스 위젯이 생성되었으며,

고기를 클릭과 동시에(Toast)"고기선택" 보이고 치즈를 클릭하며

(Toast)"치즈선택"이 보여집니다.

 

 

체크박스(checkbox) 위젯기능을 알아보았습니다.

반응형
LIST
반응형
SMALL

▩ 커스텀 버튼의 특징을 알아보겠습니다. ▩

커스텀 버튼은  눌렀을때와 누르지 않았을때에 상태를 보여줍니다.

 

우선 첫번째,  Custombutton프로젝트 생성합니다.

 

두번째,  res/drawable 폴더에 두개의 그림 붙여넣기 합니다.

그리고 main.xml이라는 새로운 파일을 생성 합니다.

[코드작성- 그림에 대한 코드인식이라고 생각하면 됩니다..]

     

      <item android: drawable ="@drawable/btn2

           android:state_pressed ="true/> 

          버튼을 눌렀을때  그림표시을 나타냅니다.

 

      <item android:drawable="@drawable/btn1"/> 

            버튼 누르지 않은 상태 그림표시을 나타냅니다.

         

 

* 왼쪽 drawable 선택을 합니다. 그리고  마우스 오른쪽 버튼 누릅니다.

  그러면 ew -> drawable resource file 클릭합니다.

  fileName 입력하고  저장버튼을 누르며 됩니다. 

 

 

세번째, res/layout/activity_main.xml 파일을 생성합니다.

   Design 선택합니다.

   Button 이라고 적혀있는 위젯을 볼실수 있습니다.

   Button을 클릭한 상태에서 드래그 하여 붙여넣기 해주시면

   됩니다.  

  

   그리고 아래 화면에서 Design에서 text 화면을 클릭하시면

됩니다.

<Button

     android:id ="@+id/button"

     android:id:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:padding="10dp"  --> 이 코드는 없어도 무관합니다.

     android:onClick="onClick" --> onClick  메소드 호출할때 동작합니다.

     android:background="@drawable/main"/> --> 버튼에 그림을  붙여넣기입

                                                                   니다.

 

Button서 adroid:background ="@drawable/main/>

보면 @/drawable/main 은  res/drawale/main.xml 을 참조

하고 있는것을 보실수 있습니다.

 

   drawable에서도 코드를 작성해야합니다.

 

 

 

4. 최종적으로 onCreate()에서 코드를 작성합니다.

        아래 그림같이 코드로 작성하시며 됩니다.

 

public void onClick(View target){

  Toast.makeText(getApplicationContext(),"Beep Bop",

   Toast.LENGTH_SHORT).show();

  }

 

 

 

 

5. 커스텀 버튼 실행결과입니다.

   아래와같이 이미지를 보시면 왼쪽 그림 누르기 전  화면이고,

   오른쪽 그림은 보시다시피 누르기 후 화면입니다.

    색깔이 바뀌는걸 보실수 있습니다. 커스텀버튼 이벤트입니다.

          

 

 

 

Key point:   버튼을 생성하기 전에 두개의 그름을 drawable 부착하고, res/drawable/main 생성하여 두개의 사진에 각각의 명령을 부여합니다.

 

res/layout에서  버튼을 생성하여 android:background ="@drawable/main 을 불려옵니다.

 

오늘 포스팅은 간단하지만 버튼이 동작했을때와 안했을때 상태표시를 보여줍니다. 앱을 개발하는 개발자에게는 필요한 기능입니다.

 

반응형
LIST

+ Recent posts