안드로이드 사이드바 생성

안드로이드 사이드바 만들기입니다. 

사이드바를 생성하는 방법은 여러가지가 있습니다. 정답이 없죠. 자신이 원하는, 생각하는 구조 형태마다 다르게 생성할수 있을것 입니다. 

코드와 함께 차근차근 따라해 보시길 바랍니다. 따라서 완성하시면 아래와 같이 보이실 것입니다. 

1. 사이드바 xml생성입니다. 샘플에 들어있는 이미지들은 따로 첨부안할게요...쓰고 싶은 이미지들 다운받아 쓰셔요.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <ImageButton
            android:id="@+id/btn_cancel"
            android:layout_width="21dp"
            android:layout_height="21dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:background="@drawable/common_ic_guide_delete" />

        
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0.7dp"
            android:layout_alignParentBottom="true"
            android:background="#202735"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:background="@drawable/twice01"/>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0.7dp"
            android:layout_alignParentBottom="true"
            android:background="#202735"/>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_centerVertical="true"
                android:text="계모임 정의"
                android:textColor="#202735"/>

            <ImageButton
                android:id="@+id/btn_side_level_1"
                android:layout_width="21dp"
                android:layout_height="21dp"
                android:layout_marginRight="15dp"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:background="@drawable/common_img_cell_arrow" />

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="0.7dp"
                android:layout_alignParentBottom="true"
                android:background="#202735"/>

        </RelativeLayout>
        
    </LinearLayout>
    
</LinearLayout>

2. 사이드바 CustomView를 만들어 줍니다. 

public class SideBarView extends RelativeLayout implements View.OnClickListener{

    /** 메뉴버튼 클릭 이벤트 리스너 */
    public EventListener listener;

    public void setEventListener(EventListener l) {
        listener = l;
    }

    /** 메뉴버튼 클릭 이벤트 리스너 인터페이스 */
    public interface EventListener {

        // 닫기 버튼 클릭 이벤트
        void btnCancel();
        void btnLevel1();
    }

    public SideBarView(Context context) {
        this(context, null);
        init();
    }

    public SideBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private void init(){

        LayoutInflater.from(getContext()).inflate(R.layout.layout_side, this, true);

        findViewById(R.id.btn_cancel).setOnClickListener(this);
        findViewById(R.id.btn_side_level_1).setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {


        switch (view.getId()){

            case R.id.btn_cancel :

                listener.btnCancel();
                break;

            case R.id.btn_side_level_1 :

                listener.btnLevel1();
                break;

            default:

                break;
        }
    }
}

3. 메인 Activity입니다. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <RelativeLayout
        android:id="@+id/id_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/rl_001"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#2478FF">

            <ImageButton
                android:id="@+id/btn_menu"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginLeft="15dp"
                android:layout_centerVertical="true"
                android:background="@drawable/common_btn_navibar_drawmenu"/>

        </RelativeLayout>

        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/rl_001" />

    </RelativeLayout>

    <FrameLayout
        android:id="@+id/fl_silde"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0.75"
            android:background="#202735"/>

        <FrameLayout
            android:id="@+id/view_sildebar"
            android:layout_width="280dp"
            android:layout_height="match_parent" />

    </FrameLayout>


</RelativeLayout>

4. 클릭시 애니메이션 처리입니다.

1) sidebar_hidden.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%" android:toXDelta="-100%" android:duration="500"/>
</set>

2) sidebar_show.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%" android:toXDelta="0%" android:duration="500"/>
</set>

5. 마지막 Activity입니다.

public class MainActivity extends Activity implements View.OnClickListener{

    private String TAG = "MainActivity";

    private Context mContext = MainActivity.this;

    private ViewGroup mainLayout;   //사이드 나왔을때 클릭방지할 영역
    private ViewGroup viewLayout;   //전체 감싸는 영역
    private ViewGroup sideLayout;   //사이드바만 감싸는 영역

    private Boolean isMenuShow = false;
    private Boolean isExitFlag = false;

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if (keyCode == KeyEvent.KEYCODE_BACK) {
            onBackPressed();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    public void onBackPressed() {

        if(isMenuShow){
            closeMenu();
        }else{

            if(isExitFlag){
                finish();
            } else {

                isExitFlag = true;
                Toast.makeText(this, "뒤로가기를 한번더 누르시면 앱이 종료됩니다.",  Toast.LENGTH_SHORT).show();
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        isExitFlag = false;
                    }
                }, 2000);
            }
        }
    }

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

        addSideView();  //사이드바 add
    }

    private void init(){

        findViewById(R.id.btn_menu).setOnClickListener(this);

        mainLayout = findViewById(R.id.id_main);
        viewLayout = findViewById(R.id.fl_silde);
        sideLayout = findViewById(R.id.view_sildebar);

    }

    private void addSideView(){

        SideBarView sidebar = new SideBarView(mContext);
        sideLayout.addView(sidebar);

        viewLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });

        sidebar.setEventListener(new SideBarView.EventListener() {

            @Override
            public void btnCancel() {
                Log.e(TAG, "btnCancel");
                closeMenu();
            }

            @Override
            public void btnLevel1() {
                Log.e(TAG, "btnLevel1");

                closeMenu();
            }
        });
    }


    @Override
    public void onClick(View view) {

        switch (view.getId()){

            case R.id.btn_menu :

                showMenu();
                break;
        }
    }

    public void closeMenu(){

        isMenuShow = false;
        Animation slide = AnimationUtils.loadAnimation(mContext, R.anim.sidebar_hidden);
        sideLayout.startAnimation(slide);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                viewLayout.setVisibility(View.GONE);
                viewLayout.setEnabled(false);
                mainLayout.setEnabled(true);
            }
        }, 450);
    }

    public void showMenu(){

        isMenuShow = true;
        Animation slide = AnimationUtils.loadAnimation(this, R.anim.sidebar_show);
        sideLayout.startAnimation(slide);
        viewLayout.setVisibility(View.VISIBLE);
        viewLayout.setEnabled(true);
        mainLayout.setEnabled(false);
        Log.e(TAG, "메뉴버튼 클릭");
    }
}