[펌_Android_Material_Design] Toast의 업글버전? Snackbar(스낵바)를 써보자

---

 출처: http://itpangpang.xyz/183

---

ㆍ 오늘 심심해서 샘플프로젝트를 하던중에 snackbar라는 놈이 있어서 사용해봤습니다. 

    거의 뭐 Toast급으로 쓰기 쉬워서한번 사용해 보시라고 이렇게 글을 쓰게 되었습니다.

    안드로이드 5.0 롤리팝때 Material Design이 도입되었는데 그 중에 포함되어 있는 내용입니다.

    

일단 사용방법 전에 왜 Toast의 업글버전이라고 하는지 직접 먼저 결과물을 보겠습니다.

앱을 실행하자마자 뜨게 설정해놨는데 느낌이 잘 안사네요

버튼 누르면 뜨게 할걸..

뭐 대충 저런 모양입니다. 아래에서 위로 올라오는 그리고 시간 지나면 아래로 내려가는데 영상편집하다가 짤린듯..

내려가는건..

뭐 모양만으로 봐도 Toast랑 다르긴 합니다.

근데 이것만 봐서는 크게 다른점은 모르겠습니다.

다음 gif에서 Snackbar와 Toast의 차이점을 보겟습니다.

잘 보이십니까? 

안내메시지에서 버튼을 한번 더 누를수 있습니다.

일단 그냥 토스트만 간단하게 띄워놨는데

잘만 이용하면 괜찮은 기능도 가능할 것 같습니다.

그럼 바로 사용방법을 알아보도록 하겠습니다.

일단 프로젝트를 하나 만드시고

첫번째, Support:design Library를 추가시키자!

사용 전에 준비사항은 말 그대로 저거만 추가시키면 끝입니다

Recyclerview 추가시키듯 똑같이 시키면 됩니다.

Ctrl+Alt+Shift+S를 눌러서 좌측하단에 [app] 클릭하시고 가운데 상단 탭에 Dependencies 눌러주시고

바로 보일수도 있는데 안보이시면 design이라고 검색하시면 아래와 같이 바로 뜨는데 추가시켜주세요~

그 다음, 바로 사용하세요~

사용전에 그래도 사용방법을 알아보면

저대로 넣어주면 됩니다.

"현재 View, 원하는 텍스트, 지속기간"

뭐 버튼 눌렀을때 토스트처럼 띄우는 코드를 바로 보면

findViewById(R.id.btn).setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        Snackbar.make(v, "ITPANGPANG", Snackbar.LENGTH_SHORT).show();
    }
});

완전 비슷합니다.

뭐 Context대신 View들어가는거 말곤 판박이죠

아! 여기서 액티비티에서 바로 띄우시려는 분이 얼마나 될지 모르겠지만 액티비티 뷰는 이렇게 구하시면 됩니다.

Snackbar.make(getWindow().getDecorView().getRootView(), "ITPANGPANG", Snackbar.LENGTH_LONG).show();

유지시간은 위에 나와있듯이 int duration 넣으시면 됩니다. 뭐 10초라면

findViewById(R.id.btn).setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        Snackbar.make(v, "ITPANGPANG", 10000).show();
    }
});

이렇게 되겠죠?

자~ 그렇다면 이번에는 버튼을 누를수 있도록 코드를 조금더 추가해보겠습니다. 코드가 길지도 않습니다.

findViewById(R.id.btn).setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        Snackbar.make(v, "ITPANGPANG", 10000).setAction("YES", new View.OnClickListener() 
        {
            @Override
            public void onClick(View v) 
            {
                //할거
            }
        }).show();
    }
});

setAction을 써주시고 추가시킬 Text 적으시고, 그 옆에 바로 클릭리스너 달아주시면 됩니다

이번에는 스낵바(Snackbar)에서 저 누를수 있는 버튼 색깔을 변경시켜보겠습니다.

이것은 요렇게

findViewById(R.id.btn).setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        Snackbar.make(v, "ITPANGPANG", 10000).setActionTextColor(Color.parseColor("#FF0000"))
                .setAction("YES", new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                //할거
            }
        }).show();
    }
});

저 ITPANGPANG 글씨색 바꾸는법도 있으나 저건 좀 작업해야되서 다음번에 기회가 되면 2탄으로 쓰겠습니다.

[참고 - 위 내용은 이렇게 구현하면 된다] Snackbar snack = Snackbar.make(view, R.string.message, Snackbar.LENGTH_LONG); View view = snack.getView(); TextView tv = (TextView) view.findViewById(android.support.design.R.id.snackbar_text); tv.setTextColor(Color.WHITE); snack.show();

음... 다음은.. 스낵바 background를 바꿔볼까요?

자~ 이건 요렇게~

findViewById(R.id.btn).setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        Snackbar snackbar;
        snackbar = Snackbar.make(v, "ITPANGPANG",Snackbar.LENGTH_LONG)
                .setActionTextColor(Color.BLUE).setAction("Hi", new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {

            }
        });
        View snackView = snackbar.getView();
        snackView.setBackgroundColor(Color.parseColor("#FF0000"));
        snackbar.show();
    }
});

저 스낵바의 View를 구해서 View 백그라운드를 바꿔주시면 됩니다.

이제 마지막으로 위치를 바꾸고싶으시면 xml에서 이렇게 써주시고 원하는곳에 배치하시면 됩니다.

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/myCoordinatorLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
</android.support.design.widget.CoordinatorLayout>

저 공간에서 나오니까 잘 맞춰서 짜시면 됩니다

음... 이게 얼마나 쓰일지는 모르겠지만 아직 뭐 Recyclerview 만큼 대세까지는 아닌거 같아서
더 써보고 괜찮다 싶으면 좀 더 연구해서 추가글 써보도록 하겠습니다.