[ study ] 다이어리 어플 만들어보기 1

차근차근/Android

[ study ] 다이어리 어플 만들어보기 1

예쁜꽃이피었으면 2015. 4. 20. 16:44

[ study ] 다이어리 어플 만들어보기

기간 : 2015.4.20 ~ 2015.4.30

* 구글 스토어에 7Days라는 어플이 있는데 그것 따라해보려다가 어려울 것 같아서 일단.. 리스트에 생성, 삭제, 수정만 해보려고 한다..될까..?

* 리스트뷰 만들기 따라한 곳 : http://berabue.blogspot.kr/2014/05/android-listview.html

diary.zip <- 위에 블로그 예제 따라한 프로젝트

[ Android ] ListView 사용 방법 및 커스텀

이번 튜토리얼은 ListView의 기본적인 사용 방법과 커스텀 방법에 대해 알아보겠습니다.

1. xml 수정하기
ListView가 보여질 레이아웃의 xml에 ListView 위젯을 추가 합니다.

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#47C83E"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
 
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
 
</RelativeLayout>

2. ListView 및 Adapter 설정
어댑터를 생성하고 xml에 추가한 Listview에 어댑터를 연결하여 ListView가 동작 되도록 해보겠습니다.

package pe.berabue.tutoriallistview;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
 
public class MainActivity extends Activity {
     
    private ListView                m_ListView;
    private ArrayAdapter<string>    m_Adapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // Android에서 제공하는 string 문자열 하나를 출력 가능한 layout으로 어댑터 생성
        m_Adapter = new ArrayAdapter<string>(getApplicationContext(), android.R.layout.simple_list_item_1);
         
        // Xml에서 추가한 ListView 연결
        m_ListView = (ListView) findViewById(R.id.listview);
         
        // ListView에 어댑터 연결
        m_ListView.setAdapter(m_Adapter);
         
        // ListView 아이템 터치 시 이벤트 추가
        m_ListView.setOnItemClickListener(onClickListItem);
         
        // ListView에 아이템 추가
        m_Adapter.add("하스스톤");
        m_Adapter.add("몬스터 헌터");
        m_Adapter.add("디아블로");
        m_Adapter.add("와우");
        m_Adapter.add("리니지");
        m_Adapter.add("안드로이드");
        m_Adapter.add("아이폰");
    }
     
    // 아이템 터치 이벤트
    private OnItemClickListener onClickListItem = new OnItemClickListener() {
 
        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            // 이벤트 발생 시 해당 아이템 위치의 텍스트를 출력
            Toast.makeText(getApplicationContext(), m_Adapter.getItem(arg2), Toast.LENGTH_SHORT).show();
        }
    };
}

여기 까지는 기본적인 리스트 뷰 사용방법 입니다.

이제 커스텀 하는 방법을 알아보도록 하겠습니다.

3. ListView에 출력 될 레이아웃 만들기
원하는 모양의 아이템을 출력하기 위해서 새로운 xml파일을 생성하여 출력 될 모양을 만들어야 합니다.

여기서는 텍스트와 버튼이 출력 되도록 만들어 보겠습니다.

custom_item.xml 파일

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
  
    <textview 
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceInverse"
        android:textColor="#000000"
     />
     
    <Button
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceButton"
        android:textColor="#000000"
        android:text="Toast"
        android:layout_alignParentRight="true"
     />
 
</RelativeLayout>

4. 커스텀 어댑터 생성
CustomAdapter 클래스를 생성하고 BaseAdapter 클래스를 상속 받습니다.
문자열을 보관 하기 위해 ArrayList<String> 를 사용하며, String 대신에 직접 만든 클래스를 추가하면 더욱 많은 정보를 가진 커스텀 아이템을 제작 할 수 있습니다.

package pe.berabue.tutoriallistview;
 
import java.util.ArrayList;
 
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnLongClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
 
public class CustomAdapter extends BaseAdapter {
     
    // 문자열을 보관 할 ArrayList
    private ArrayList<string>   m_List;
     
    // 생성자
    public CustomAdapter() {
        m_List = new ArrayList<string>();
    }
 
    // 현재 아이템의 수를 리턴
    @Override
    public int getCount() {
        return m_List.size();
    }
 
    // 현재 아이템의 오브젝트를 리턴, Object를 상황에 맞게 변경하거나 리턴받은 오브젝트를 캐스팅해서 사용
    @Override
    public Object getItem(int position) {
        return m_List.get(position);
    }
 
    // 아이템 position의 ID 값 리턴
    @Override
    public long getItemId(int position) {
        return position;
    }
 
    // 출력 될 아이템 관리
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final int pos = position;
        final Context context = parent.getContext();
         
        // 리스트가 길어지면서 현재 화면에 보이지 않는 아이템은 converView가 null인 상태로 들어 옴
        if ( convertView == null ) {
            // view가 null일 경우 커스텀 레이아웃을 얻어 옴
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.custom_item, parent, false);
             
            // TextView에 현재 position의 문자열 추가
            TextView text = (TextView) convertView.findViewById(R.id.text);
            text.setText(m_List.get(position));
             
            // 버튼을 터치 했을 때 이벤트 발생
            Button btn = (Button) convertView.findViewById(R.id.btn_test);
            btn.setOnClickListener(new OnClickListener() {
                 
                @Override
                public void onClick(View v) {
                    // 터치 시 해당 아이템 이름 출력
                    Toast.makeText(context, m_List.get(pos), Toast.LENGTH_SHORT).show();
                }
            });
             
            // 리스트 아이템을 터치 했을 때 이벤트 발생
            convertView.setOnClickListener(new OnClickListener() {
                 
                @Override
                public void onClick(View v) {
                    // 터치 시 해당 아이템 이름 출력
                    Toast.makeText(context, "리스트 클릭 : "+m_List.get(pos), Toast.LENGTH_SHORT).show();
                }
            });
             
            // 리스트 아이템을 길게 터치 했을 떄 이벤트 발생
            convertView.setOnLongClickListener(new OnLongClickListener() {
                 
                @Override
                public boolean onLongClick(View v) {
                    // 터치 시 해당 아이템 이름 출력
                    Toast.makeText(context, "리스트 롱 클릭 : "+m_List.get(pos), Toast.LENGTH_SHORT).show();
                    return true;
                }
            });
        }
         
        return convertView;
    }
     
    // 외부에서 아이템 추가 요청 시 사용
    public void add(String _msg) {
        m_List.add(_msg);
    }
     
    // 외부에서 아이템 삭제 요청 시 사용
    public void remove(int _position) {
        m_List.remove(_position);
    }
}

5. ListView 및 Adapter 설정
위 2번에서 했던 작업 입니다. 2번 소스와 비교해 보시면 어댑터 부분이 변경 된 것을 확인 하실 수 있습니다.

package pe.berabue.tutoriallistview;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
 
public class MainActivity extends Activity {
     
    private ListView                m_ListView;
    private CustomAdapter           m_Adapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // 커스텀 어댑터 생성
        m_Adapter = new CustomAdapter();
         
        // Xml에서 추가한 ListView 연결
        m_ListView = (ListView) findViewById(R.id.listview);
         
        // ListView에 어댑터 연결
        m_ListView.setAdapter(m_Adapter);
         
        // ListView에 아이템 추가
        m_Adapter.add("하스스톤");
        m_Adapter.add("몬스터 헌터");
        m_Adapter.add("디아블로");
        m_Adapter.add("와우");
        m_Adapter.add("리니지");
        m_Adapter.add("안드로이드");
        m_Adapter.add("아이폰");
    }
}

여기 까지 제작 하고 실행을 하면 각종 이벤트가 정상 작동 하는 것을 확인 하실 수 있습니다.

하지만, 어댑터에 아이템을 더 추가하여 스크롤이 되게 만들면 아이템 위치가 변경되 출력 되는게 보이실 겁니다.

6. Holder를 추가하여 데이터 변형 방지
새로운 클래스를 하나 생성하여 getView()에서 홀더를 사용하면 스크롤 시 데이터가 변경 되는 것과 findViewById()를 사용을 줄여 향상 된 속도를 얻을 수 있습니다.

변경 된 부분의 소스는 아래와 같습니다.

// 출력 될 아이템 관리
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    final int pos = position;
    final Context context = parent.getContext();
     
    TextView        text    = null;
    Button          btn     = null;
    CustomHolder    holder  = null;
     
    // 리스트가 길어지면서 현재 화면에 보이지 않는 아이템은 converView가 null인 상태로 들어 옴
    if ( convertView == null ) {
        // view가 null일 경우 커스텀 레이아웃을 얻어 옴
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.custom_item, parent, false);
         
        text    = (TextView) convertView.findViewById(R.id.text);
        btn     = (Button) convertView.findViewById(R.id.btn_test);
 
        // 홀더 생성 및 Tag로 등록
        holder = new CustomHolder();
        holder.m_TextView   = text;
        holder.m_Btn        = btn;
        convertView.setTag(holder);
    }
    else {
        holder  = (CustomHolder) convertView.getTag();
        text    = holder.m_TextView;
        btn     = holder.m_Btn;
    }
     
    // Text 등록
    text.setText(m_List.get(position));
     
    // 버튼 이벤트 등록
    btn.setOnClickListener(new OnClickListener() {
         
        @Override
        public void onClick(View v) {
            // 터치 시 해당 아이템 이름 출력
            Toast.makeText(context, m_List.get(pos), Toast.LENGTH_SHORT).show();
        }
    });
     
    // 리스트 아이템을 터치 했을 때 이벤트 발생
    convertView.setOnClickListener(new OnClickListener() {
         
        @Override
        public void onClick(View v) {
            // 터치 시 해당 아이템 이름 출력
            Toast.makeText(context, "리스트 클릭 : "+m_List.get(pos), Toast.LENGTH_SHORT).show();
        }
    });
     
    // 리스트 아이템을 길게 터치 했을 떄 이벤트 발생
    convertView.setOnLongClickListener(new OnLongClickListener() {
         
        @Override
        public boolean onLongClick(View v) {
            // 터치 시 해당 아이템 이름 출력
            Toast.makeText(context, "리스트 롱 클릭 : "+m_List.get(pos), Toast.LENGTH_SHORT).show();
            return true;
        }
    });
     
    return convertView;
}
 
private class CustomHolder {
    TextView    m_TextView;
    Button      m_Btn;
}

CustomHolder 라는 클래스가 하나 추가 되었으며 이 클래스는 아이템이 갖고 있는 요소를 저장 할 수 있도록 TextView와 Button을 갖고 있습니다.
그리고 getView() 함수에서는 convertView가 null 일 때 holder를 생성하여 holder에 TextView와 Button을 넣고 해당 View의 Tag로 지정을 합니다. 만약 convertView가 null이 아니라면 Tag를 가져와 저장해 놓았던 TextView와 Button을 빼내 나머지 처리를 하게 됩니다.

이상으로 ListView 사용 방법과 커스텀에 대한 튜토리얼을 마치도록 하겠습니다.

* 보충자료 : http://action713.tistory.com/entry/study-%EB%8B%A4%EC%9D%B4%EC%96%B4%EB%A6%AC-%EC%96%B4%ED%94%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%B6%80%EA%B0%80-%EC%84%A4%EB%AA%85-1

안드로이드 프로젝트 생성

AndroidManifest.xml에 추가

<activity android:name =".main"
            android:label="@string/app_name">
            
            <intent-filter>
                <action android:name ="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
                
            </intent-filter>
        </activity>

( 안드로이드(Android) AndroidManifest.xml => http://hyeonstorage.tistory.com/151 )



메인클래스 작성

 
public class main extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

※ R.java가 안생겨서 애먹었는데 프로젝트 클린하고 이클립스 새로 시작하고 하다보니까 됐다.

※ 이클립스에서 안드로이드 프로젝트를 실행할 때만 애뮬레이터도 뜨지않고 계속 프로그래스바만 돌아서 시간을 한참버렸는데
컴퓨터를 재부팅하니까 됐다.

※ 다이어리를 만들기 전에 헬로우월드부터 찍어보려고 했는데 내 프로젝트는 실행이 안되고

다를 것 없어보이는 다른 사람의 프로젝트는 실행이 됐다.

음.. 내 프로젝트의 패키지명이 a였다면 com.example.a라고 바꿔줬고

매니페스트에서도 기본으로 적혀있던 것이 package="com.example.a" 였었다. 암튼 되서 다행.

TextView를 자바소스 코드로 띄우기 / xml로 띄우기

xml화면 만들어 보기 . (http://berabue.blogspot.kr/2014/05/android-listview.html 여기따라함.)

* 수정은 계속 할거니까.

첫번째 화면은

2번째화면은 이렇게

해보려고 한다.

글 목록을 보여주는 것은 리스트 뷰를 사용하는 듯.

<ListView

android:id="@+id/listview"

android:layout_width="match_parent"

android:layout_height="match_parent"

main.java에서도 소스추가 있음.

private ListView m_ListView;

private ArrayAdapter<String> m_Adapter;

.....

// Android에서 제공하는 string 문자열 하나를 출력 가능한 layout으로 어댑터 생성

m_Adapter = new ArrayAdapter<String>(getApplicationContext() , android.R.layout.simple_list_item_1);

//xml에서 추가한 listview연결

m_ListView = (ListView)findViewById(R.id.listview);

//listview에 어댑터 연결

m_ListView.setAdapter(m_Adapter);

//ListView 아이템 터치시 이벤트 추가

m_ListView.setOnItemClickListener(onClickListItem);

//ListView에 아이템 추가

m_Adapter.add("나와라");

m_Adapter.add("나123라");

.....

* add에서 계속 빨간줄이 없어지지 않았다. add를 적으면 addAll을 적으라고 하고 addAll를 적으면 add로 적으라고 하고

ArrayAdapter<string> 에서 ArrayAdapter<String>로 수정했다.

//아이템 터치이벤트

private OnItemClickListener onClickListItem = new OnItemClickListener(){

public void onItemClick(AdapterView<?> arg0 , View arg1 , int arg2, long arg3){

Toast.makeText(getApplicationContext(), m_Adapter.getItem(arg2), Toast.LENGTH_SHORT).show();

}

};

* ; (세미콜론)을 왜 붙여야 하지..?? 예제 소스에도 붙어 있는데 내가 적으면 다른 소스에 빨간줄이 생긴다.

일단 ;붙이고 import android.widget.AdapterView; import android.view.View; 하니까 사라짐

2015.4.21 오전 11시 23분 리스트뷰는 됨.

리스트 뷰안에 텍스트 뷰를 넣어봐야 겠다.

라고 생각했는데 예제에 이미 되어 있음.

예제 소스다시 봐야할 듯.

20150430 - sqlite 로 CRUD만

화면 엉망.. 1차 다시 수정할거다. 그러면 좀 나아지겠지

DB_diary_1.zip

DB_diary_1-1.zip

^ 수정 삭제후 메인으로 바로가기 부분 수정함. 갱신도 됨.

다이어리 어플 만들어 보기 부가 설명 1

http://action713.tistory.com/entry/study-%EB%8B%A4%EC%9D%B4%EC%96%B4%EB%A6%AC-%EC%96%B4%ED%94%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%B6%80%EA%B0%80-%EC%84%A4%EB%AA%85-1

다이어리 어플 만들어 보기 부가 설명 2

http://action713.tistory.com/entry/study-%EB%8B%A4%EC%9D%B4%EC%96%B4%EB%A6%AC-%EC%96%B4%ED%94%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%B6%80%EA%B0%80-%EC%84%A4%EB%AA%85-2

다이어리 어플 만들어 보기 부가 설명 3

http://action713.tistory.com/entry/study-%EB%8B%A4%EC%9D%B4%EC%96%B4%EB%A6%AC-%EC%96%B4%ED%94%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%B6%80%EA%B0%80-%EC%84%A4%EB%AA%85-3

다이어리 어플 만들어 보기 부가 설명 4

http://action713.tistory.com/entry/study-%EB%8B%A4%EC%9D%B4%EC%96%B4%EB%A6%AC-%EC%96%B4%ED%94%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%B6%80%EA%B0%80-%EC%84%A4%EB%AA%85-3-1

다이어리 어플 만들어 보기 부가 설명 5

http://action713.tistory.com/entry/study-%EB%8B%A4%EC%9D%B4%EC%96%B4%EB%A6%AC-%EC%96%B4%ED%94%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%B6%80%EA%B0%80-%EC%84%A4%EB%AA%85-5

다이어리 어플 만들어 보기 부가 설명 6

http://action713.tistory.com/entry/study-%EB%8B%A4%EC%9D%B4%EC%96%B4%EB%A6%AC-%EC%96%B4%ED%94%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-%EB%B6%80%EA%B0%80-%EC%84%A4%EB%AA%85-6

찾아봤던 프로젝트들

AndExam.zip

AndroidStartActivityForResultExample.zip

CustomListViewSample.zip

Database-CRUD-Operations-master.zip

ListExample.zip

serialversionutil-civan.zip

SQLiteCrudExample.zip

저작자표시 비영리

'차근차근 > Android' 카테고리의 다른 글

Android: List view from Database with Cursor Adapter (0)	2015.04.22
[ study ] 다이어리 어플 만들어보기 1 - 부가 설명 1 (0)	2015.04.20
모바일 웹 가로 고정 (0)	2015.02.13
FragmentTab \| Fragment example (0)	2015.02.11
android actionbar + fragmant (0)	2015.02.11

현재글[ study ] 다이어리 어플 만들어보기 1

개인 공부를 위한 블로그입니다.

nginx, 한 번에 끝내는 코딩테스트 369 Java편 초격차 패키지 Online., 직장인자기계발, vuejs, 패스트캠퍼스, 자바, 패캠챌린지, 직장인인강, Gunicorn, AWS, MYSQL, 백준, ubuntu, 인증문자, 10952, 패스트캠퍼스후기, Django, 10953, 10951, docker,

Today :
Yesterday :

내 인생에도 예쁜 꽃이 피었으면 좋겠다