[개발] CardStackView를 이용한 UI 변경

avatar

안녕하세요 @realmankwon입니다.

지난번 개발했던 안드로이드 앱의 UI를 다시 한번 변경하고 있습니다.
버튼이 너무 작다는 고객사의 의견으로 좀 더 큰 버튼으로 그리고 엣지있게...

그리곤 다시 구글링을 합니다... ㅎㅎ
이번에는 Card Stack View를 골랐습니다.

https://kmshack.github.io/AndroidUICollection/2018/10/10/CardStackView/

사용법은 언제나 그렇듯 아주 간단하게 나와 있습니다.

하지만 역시나 삽질의 연속이...

일단 Installation 을 위해서는 build.gradle에 compile 이 아닌 implementation을 써주어야 했습니다.

  • build.gradle
dependencies {
    implementation 'com.loopeer.library:cardstack:1.0.2'
}

이후 사용되는 res 파일을 하나씩 다 입력해 주어야 합니다.
해당 소스들은 다음의 참조에 있습니다.

https://github.com/loopeer/CardStackView/tree/master/app/src/main/res

리소스 파일들의 입력이 완료되었으면 아래의 파일들을 TestStackAdapter.java 파일을 추가시켜줍니다.

이후 activity.java 파일에서 개발을 시작합니다.
예제로 제공하는 소스는 다음과 같습니다.
이때 커스터마이즈를 해야하는데 저같은 경우는 Card 마다 원하는 Text가 있는데 기본 예제는 Text를 변경할 수 없게 되어 있었습니다.
Card의 Backcolor 값을 그대로 Text로 나오게 되어 있어서 그렇더군요.

그래서 일단 다음과 같이 변경하여 되는 것을 확인했습니다.

  • activity.java
    변경전
public static Integer[] TEST_DATAS = new Integer[]{
            R.color.color_1,
            R.color.color_2,
            R.color.color_3,
            R.color.color_4,
            R.color.color_5,
            R.color.color_6,
            R.color.color_7,
            R.color.color_8,
            R.color.color_9,
            R.color.color_10,
            R.color.color_11,
            R.color.color_12,
            R.color.color_13,
            R.color.color_14,
            R.color.color_15,
            R.color.color_16,
            R.color.color_17,
            R.color.color_18,
            R.color.color_19,
            R.color.color_20,
            R.color.color_21,
            R.color.color_22,
            R.color.color_23,
            R.color.color_24,
            R.color.color_25,
            R.color.color_26
    };

변경후

public static HashMap[] TEST_DATAS = new HashMap[5];

        HashMap hMap0 = new HashMap();
        hMap0.put("text", "QR Code");
        hMap0.put("color", R.color.color_1);

        HashMap hMap1 = new HashMap();
        hMap1.put("text", "5F No 1");
        hMap1.put("color", R.color.color_2);

        HashMap hMap2 = new HashMap();
        hMap2.put("text", "5F No 2");
        hMap2.put("color", R.color.color_3);

        HashMap hMap3 = new HashMap();
        hMap3.put("text", "6F No 1");
        hMap3.put("color", R.color.color_4);

        HashMap hMap4 = new HashMap();
        hMap4.put("text", "6F No 2");
        hMap4.put("color", R.color.color_5);
...

그리고 TestStackAdapter 파일을 수정하였습니다.
기본적으로 TestStackAdapter는 변경전의 Integer 배열만 처리가능하도록 되어 있었습니다.
그래서 HashMap으로 변경하였습니다.

  • TestStackAdapter.java
    . 변경전
public class TestStackAdapter extends StackAdapter<Integer> {

 public void bindView(Integer data, int position, CardStackView.ViewHolder holder) {

public void onBind(Integer data, int position) {
            mLayout.getBackground().setColorFilter(ContextCompat.getColor(getContext(), data), PorterDuff.Mode.SRC_IN);
            mTextTitle.setText((String)data.get("text"));
        }

. 변경후

public class TestStackAdapter extends StackAdapter<HashMap> {

 public void bindView(HashMap data, int position, CardStackView.ViewHolder holder) {

public void onBind(HashMap data, int position) {
            mLayout.getBackground().setColorFilter(ContextCompat.getColor(getContext(), (Integer)data.get("color")), PorterDuff.Mode.SRC_IN);
            mTextTitle.setText((String)data.get("text"));
        }

이렇게 처리를 하니 일단 UI는 깔끔하게 나오는군요 ^^
이제 버튼 클릭 이벤트를 추가하고 고객을 만족시켜야겠습니다.
어려운 안드로이드지만 Open Source 덕분에 겨우겨우 해 나가고 있네요...ㅎ

sct sct-kr sct-freeboard s union zzan palnet steemleo liv mini kr sago
0
0
0.000
0 comments