2015. 1. 15. 18:55



지금 코엑스에서 진행중인 키덜트 엑스포에서 'MARVEL 올스타배틀'이라는 게임 어플 부스. 다양한 경품을 주는데 헐크 주먹 탐난다.


--------------------------------------------------------------------------------------------


경품때문에 글을 썼지만, 정말 재밌는 엑스포였다. 볼거리가 많지 않았다는 점이 작은 흠이라면 흠.

(결국 경품도 못탔다..)

그리고 metal 바디로 되어있는 3d퍼즐? 비행기를 하나샀다. 나중에 조립과정도 글로 올려야지.


Posted by 미뤽
2015. 1. 15. 02:21



안드로이드를 개발하면서 가장 많이 사용하는 기능 중 하나가 ListView라고 생각한다. ListView를 사용할 때 잘 모르는 상태에서 무의식 적으로 따라 사용하던 패턴이 있었는데 바로 ViewHolder 패턴이다. (사실 패턴인지도 몰랐었다.) 안드로이드를 처음 접했을때는 Adapter라는 개념도 생소했기 때문에 구현하는 방식의 일부라는 생각에 무의식 적으로 사용해 왔던 것 같다. 이번에 기회가 되서 ViewHolder pattern에 대해 조금 알아보기로 했다. 그러기 위해서는 ListView에 대해서 먼저 알아보자.


ListView는 이름 그대로 내가 보여주고자 하는 데이터들의 리스트를 보여주는 View이다. 하지만 내가 보여주고자 하는 100개, 1000개의 데이터들을 hierarchy에 올려놓고 순서대로 보여주려다가는 느려서 스크롤도 하기 힘들것이다. 이를 해결해 주기 위해서 ListView는 getView()라는 녀석을 사용한다. 정확히는 getView() 메소드에서 사용하는 convertView를 사용한다. convertView는 ListView를 효과적으로 사용하기 위해서 1) adapter에 여러 타입의 data들이 있을때 자동으로 convertView는 해당 타입이 될 것이고 2) 재사용을 할 수 있다. 세가지의 예를 한번 살펴보자.


첫번째는 "느린 방법"이다.

1
2
3
4
5
6
7
8
9
public View getView(int position, View convertView, ViewGroup parent) {
    View item = mInflater.inflate(R.layout.list_item, null);
 
    ((TextView) item.findViewById(R.id.text)).setText(DATA[position]);
    ((ImageView) item.findViewById(R.id.icon)).setImageBitmap(
                (position & 1 ) == 1 ? mIcon1 : mIcon2);
 
    return item;
}
cs


이 방법은 getView()가 리스트의 하나의 아이템을 나타낸다는 것을 알았을때 구현하는 가장 기본적인 방법이다. 이 방법은 getView()가 호출될 때 마다 새로운 View를 생성한다. 또한, 2행에서 XML을 inflating하는 작업은 안드로이드에서 무거운 작업이다. 특히나 위의 코드 예제와 같이 ImageView를 사용할 경우 만약 100개, 1000개의 리스트 아이템을 보여줄 경우 그만큼의 infalting작업과 View 생성 작업을 해야 한다는 단점이 있다.(하나의 view는 Ram에서 1kilobytes,2kilobytes를 차지한다.) 아이템이 많아질 수록 앱의 동작은 느려지거나 끊기게 된다. 이를 고치기 위해서는 convertView를 사용하면 된다.


두번째 "올바른 방법"

1
2
3
4
5
6
7
8
9
10
11
12
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.list_item, parent, false);
    }
 
    ((TextView) convertView.findViewById(R.id.text)).setText(DATA[position]);
    ((ImageView) convertView.findViewById(R.id.icon)).setImageBitmap(
                (position & 1 ) == 1 ? mIcon1 : mIcon2);
 
    return convertView;
}
 
cs


아까 위에서 언급했듯이 convertView는 재사용이 가능하도록 설계되어있기 때문에 infalating작업을 했던 아이템들에 대해서는 null체크를 통해 해당 작업을 생략하는 방법을 사용한다. 이 방법을 사용하면 아이템의 총 갯수에 관계없이 화면에 맞는 갯수의 아이템(view)을 ListView가 할당한다.(1,2개 더 할 수도 있다.) 즉, 100개의 리스트 아이템때문에 느려질 걱정은 하지 않아도 된다. 마지막으로 살펴볼 방법이 오늘 내가 이야기 하고자 하는 ViewHolder를 이용하는 방법이다.


마지막 "빠른 방법"


ViewHolder pattern은 작은 data저장소를 만들어 각각 리스트 아이템들을 static으로 연결하는 것이다. 예제를 보면 두번째 방법을 통해 inflating하는 작업은 줄였지만 TextView와 ImageView를 가져오기 위해 매번 findViewById 작업을 반복하고 있다. ViewHolder pattern을 사용하면 한번 연결한 데이터는 저장소에 저장하여 다시 findViewById를 통해 view를 찾아올 필요가 없다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;
 
    if (convertView == null) {
        convertView = mInflater.inflate(R.layout.list_item, parent, false);
        holder = new ViewHolder();
        holder.text = (TextView) convertView.findViewById(R.id.text);
        holder.icon = (ImageView) convertView.findViewById(R.id.icon);
 
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }
 
    holder.text.setText(DATA[position]);
    holder.icon.setImageBitmap(
                (position & 1 ) == 1 ? mIcon1 : mIcon2);
 
    return convertView;
}
cs


ViewHold는 필요한 곳에서 생성해 주면 된다.


1
2
3
4
5
static class ViewHolder {
    TextView text;
    ImageView icon;
}
 
cs



참고자료 - Google I/O 2010 - The world of ListView


Posted by 미뤽
2015. 1. 13. 22:33



여러 View 들을 inject할때 도움을 주는 Butter knife 라이브러리


 안드로이드를 공부 할 수록 존경하게 되는 와튼 형님이 만든 라이브러리지만 사실 Butter knife를 사용해야 하는 필요성을 못 느끼고 있었다. 무조건 오픈소스 이용해서 쉽게, 쉽게 코딩하지말고 원리는 알고 이용하라는 선배들의 글을 본 후 더욱 이런 라이브러리는 게으른 사람들만 이용한다고 생각했다. 하지만 어느 순간 내가 Activity 에서 View를 적용할때 마다 불필요한 '노가다 코딩'을 반복한다는 느낌이 들었다. 예를 들어,


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
private void setUI() {
    mButtonBack = (Button) findViewById(R.id.btn_back);
    mButtonHome = (Button) findViewById(R.id.btn_home);
    mButtonEnter = (Button) findViewById(R.id.btn_enter);
    mButtonRightArrow = (Button) findViewById(R.id.btn_right_arrow);
    mButtonLeftArrow = (Button) findViewById(R.id.btn_left_arrow);
    mButtonUpArrow = (Button) findViewById(R.id.btn_up_arrow);
    mButtonDownArrow = (Button) findViewById(R.id.btn_down_arrow);
}
 
private void setEventListener() {
    mButtonBack.setOnClickListener(clickListener);
    mButtonHome.setOnClickListener(clickListener);
    mButtonEnter.setOnClickListener(clickListener);
    mButtonRightArrow.setOnClickListener(clickListener);
    mButtonLeftArrow.setOnClickListener(clickListener);
    mButtonUpArrow.setOnClickListener(clickListener);
    mButtonDownArrow.setOnClickListener(clickListener);
}
 
cs

위의 코드와 같이 View(특히 Button)를 사용하려면 멤버변수로 선언하고 setUI()메소드를 통해 Id에 맞는 View들을 연결해주고 다시 setEventListerner()라는 메소드를 이용해서 리스너들과 연결해서 사용해왔다. 멤버변수 선언을 포함하면 내가 하나의 뷰를 사용하기 위해서는 세줄의 코드를 사용하고 있었다. 코드 줄 수가 많아서 무조건 적으로 싫다기 보다는 단순한 코드의 긴 반복이 점점 거슬리기 시작했다. 사족은 이쯤에서 줄이고, 위와 같은 코드를 Butter knife를 사용하면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
@InjectView(R.id.btn_back) Button mButtonBack; 
@InjectView(R.id.btn_home) Button mButtonHome; 
@InjectView(R.id.btn_enter) Button mButtonEnter; 
@InjectView(R.id.btn_right_arrow) Button mButtonRightArrow; 
@InjectView(R.id.btn_left_arrow) Button mButtonLeftArrow; 
@InjectView(R.id.btn_up_arrow) Button mButtonUpArrow; 
@InjectView(R.id.btn_down_arrow) Button mButtonDownArrow 
 
 
private void setEventListener() {
    mButtonBack.setOnClickListener(clickListener);
    mButtonHome.setOnClickListener(clickListener);
    mButtonEnter.setOnClickListener(clickListener);
    mButtonRightArrow.setOnClickListener(clickListener);
    mButtonLeftArrow.setOnClickListener(clickListener);
    mButtonUpArrow.setOnClickListener(clickListener);
    mButtonDownArrow.setOnClickListener(clickListener);
}
 
cs


위의 코드와 같이 멤버변수를 선언과 동시에 해당 View를 연결할 수 있다. 나아가서 만약 Butter knife에서 제공하는 @OnClick 어노테이션을 사용하면 리스너 injection도 가능한데 이를 이용하면 멤버변수 선언을 포함한 위의 모든 코드 자체를 사용할 필요가 없고


1
2
3
4
5
6
7
8
9
10
11
 
@OnClick({R.id.btn_back,R.id.btn_home,R.id.btn_enter,
        R.id.btn_right_arrow,R.id.btn_left_arrow,
        R.id.btn_up_arrow, R.id.btn_down_arrow})
public void onButtonClick(View view) {
    switch (view.getId()) {            
            case R.id.btn_back:
            ...
    }
}
 
cs

 

위의 코드와 같이 바로 해당 클릭 리스너에 대한 구현만 해주면 된다.이런 방법은 코딩작업의 편의성도 좋지만 가독성 면에서도 나은 방법이라고 생각한다.






그럼 Butter Knife 라이브러리에 대한 사용 방법에 대해서 알아보자. 우선 설치법은, 이클립스 사용자일 경우

 

http://jakewharton.github.io/butterknife/ 


위의 사이트에서 JAR 파일을 다운받은후 적용을 하고 안드로이드 스튜디오 사용자들은 app내에 build.gradle의 dependencies 에


compile 'com.jakewharton:butterknife:6.0.0'

위의 컴파일 주소만 추가해 주면 된다. 라이브러리 설치가 끝났으면 사용법에 대해서 알아보자. 우선 Activity를 상속 받았을 경우 

1
2
3
4
5
6
7
@Override 
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.simple_activity);
    ButterKnife.inject(this);
    // TODO Use "injected" views...
}
cs


위와 같이 onCreate()에서 ButterKnife.inject(this)라는 명령을 통해 inject할 수 있다. 만약 activity가 아닌 fragment 라면


1
2
3
4
5
6
7
8
9
10
 
@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
            Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fancy_fragment, container, false);
    ButterKnife.inject(this, view);
    // TODO Use "injected" views...    
    return view;
}
 
cs


위와 같이 onCreateView()에서 ButterKnife.inject(this, view)라는 명령어를 통해 inject한다. 또한 adapter에서 ViewHolder pattern 을 사용할때에도


1
2
3
4
5
6
7
8
static class ViewHolder {
    @InjectView(R.id.title) TextView name;
    @InjectView(R.id.job_title) TextView jobTitle;
 
    public ViewHolder(View view) {
      ButterKnife.inject(this, view);
    }
}
cs


처럼 사용할 수 있다.apply()메소드에 대해서는 다음에 기회가 되면 추가적으로 살펴보기로 하고 리스너 injection을 살펴보면 아까 위에서 예제에서 보여준것 처럼 @OnClick()어노테이션으로 injection을 할 때 {}안에 여러개의 id를 동시에 작용하게 할 수도 있지만


1
2
3
4
5
@OnClick(R.id.enter)
public void onButtonClick() {
  // TODO 
}
 
cs


처럼 하나의 id에서만 적용할 수 있다. 여기서 참고할 사항은 메소드의 이름은 내가 정해 줄 수 있지만 만약 메소드에 Parameter값을 넣을 경우 반드시 해당 id가 속한 view 의 parameter가 필요하다. 예를 들어 위의 코드에서 R.id.enter는 버튼의 id인데 메소드 onButtonClick(ImageView img)와 같이 정의하면 런타임시 에러가 발생한다.

Posted by 미뤽