안드로이드 CustomWidget 만들기

안드로이드 CustomWidget 만들기

CustomWidget을 만들기 위해서 4단계를 거쳐야 합니다.

1. CustomWidget의 Layout생성
2. Widget을 상속받는 Custom클래스 생성
3. Custom Class에 생성자 추가
4. Custom Widget에 Custom Layout inflating

1. CustomWidget의 Layout생성

-CustomWidget에 표현하고 싶은 Layout을 만듭니다.

2.Widget을 상속받는 Custom클래스 생성

-아래와 같이 Widget을 상속하는 클래스를 생성합니다.

public class CustomWidget extends LinearLayout {


}

3. Custom Class에 생성자 추가

-여러가지 생성자가 있는데 xml파일에서도 Class에서 만든 CustomWidget을 사용하기 위해서

 AttributeSet이 추가된 생성자를 추가해야합니다.

public class CustomWidget extends LinearLayout {

    public CustomWidget(Context context, @Nullable AttributeSet attrs) {

        super(context, attrs);

    }

}

4.Custom Widget에 Custom Layout inflating

-1번에서 작성했던 Layout을 Custom Widget에 inflating 해줍니다.

public class CustomWidget extends LinearLayout implements View.OnClickListener{
    AutoCompleteTextView autoEt;
    ImageView img;
    Button add_btn;
    Button next_btn;

    int imageno = 0;

    public CustomWidget(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        LayoutInflater.from(context).inflate(R.layout.customwidget,this);

        autoEt = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);
        img = (ImageView)findViewById(R.id.image1);
        add_btn = (Button)findViewById(R.id.b_add);
        next_btn = (Button)findViewById(R.id.b_next);

        add_btn.setOnClickListener(this);
        next_btn.setOnClickListener(this);
    } 

그리고 만든 CustomWidget을 추가해주고 싶은 xml파일에 추가해주면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:padding="8dp"
    android:layout_height="match_parent"
    tools:context="com.examples.androidpractice7.MainActivity">


    <com.examples.androidpractice7.CustomWidget
        android:id="@+id/cswidget"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.examples.androidpractice7.CustomWidget>

</LinearLayout>

만약 만든 CustomWidget의 Button클릭 같은 event를 다른 activity파일에서 구현해주고 싶으면 interface를 이용하면 됩니다.

아래는 interface를 이용한 예제입니다.

interface를 사용하기 위해서 추상 메소드를 만들고 setOnAMListiner 호출을 통해 다른 activity에서

추상 메소드를 구현하게  만들었습니다.

public class CustomWidget extends LinearLayout implements View.OnClickListener{
    AutoCompleteTextView autoEt;
    ImageView img;
    Button add_btn;
    Button next_btn;

    int imageno = 0;

    private Boolean M = false;
    public CustomWidget(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        LayoutInflater.from(context).inflate(R.layout.customwidget,this);

        autoEt = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);
        img = (ImageView)findViewById(R.id.image1);
        add_btn = (Button)findViewById(R.id.b_add);
        next_btn = (Button)findViewById(R.id.b_next);

        add_btn.setOnClickListener(this);
        next_btn.setOnClickListener(this);

    }

    public void setItem(Fruit temp){
        autoEt.setText(temp.getName());
        img.setImageResource(temp.getImgno());
        add_btn.setText("M");
        M = true;
    }

    interface OnAMListener{
        void onAdd(String name, int imgno, int p);
        void onModify(String name, int imgno, int p);
    }

    public OnAMListener onAddListener;
    public OnAMListener onModifyListener;

    public void setOnAMListener(OnAMListener onAddListener){
        this.onAddListener = onAddListener;
        this.onModifyListener = onAddListener;

    }
    @Override
    public void onClick(View view) {
        if(view == add_btn){
            if(M){
                onModifyListener.onModify(autoEt.getText().toString(), Fruit.image[imageno], imageno);
                add_btn.setText("Add");
                M = false;
                autoEt.setText("");
            }
            else {
                onAddListener.onAdd(autoEt.getText().toString(), Fruit.image[imageno], imageno);
                autoEt.setText("");
            }
        }else{
            if(imageno == Fruit.image.length -1) imageno = -1;
            img.setImageResource(Fruit.image[++imageno]);
        }

    }
}

아래는 CustomWidget, interface을 이용해 만든 예제입니다

 

 

 

위 앱의 모든 코드는 GitHub에서 볼 수 있습니다!

https://github.com/Ywook/AndroidPractice7