꿀단지

Viewpager 쉽게 만들어 보자

구성은 MainActivity 하나에 Fragment 3개, 그리고 PagerAdapter을 생성합니다. 

프로젝트를 BlankActivity로 하나 생성합니다. 

1. gradle의 dependencies에 코드를 추가합니다. 

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:support-v4:23.4.0'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:25.2.0'
}

2. TabFragment1, TabFragment2, TabFragment3 으로 Fragment를 3개 생성합니다. 

각각의 Fragment는 화면 전환이 되면 알아볼 수 있게 TextView 등을 추가합니다. 

3. MainActivity에 다음과 같이 작성합니다. 

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

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

        // Adding Toolbar to the activity
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Initializing the TabLayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("First"));
        tabLayout.addTab(tabLayout.newTab().setText("Second"));
        tabLayout.addTab(tabLayout.newTab().setText("Third"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        // Initializing ViewPager
        viewPager = (ViewPager) findViewById(R.id.pager);

        // Creating TabPagerAdapter adapter
        TabPagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager(),
                tabLayout.getTabCount());
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        // Set TabSelectedListener
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
}

4. TabPagerAdapter.class 파일을 하나 생성 한 뒤에 다음과 같이 작성합니다. 

public class TabPagerAdapter extends FragmentStatePagerAdapter {

    // Count number of tabs
    private int tabCount;

    public TabPagerAdapter(FragmentManager fm, int tabCount) {
        super(fm);
        this.tabCount = tabCount;
    }

    @Override
    public Fragment getItem(int position) {

        // Returning the current tabs
        switch (position) {
            case 0:
                TabFragment1 tabFragment1 = new TabFragment1();
                return tabFragment1;
            case 1:
                TabFragment2 tabFragment2 = new TabFragment2();
                return tabFragment2;
            case 2:
                TabFragment3 tabFragment3 = new TabFragment3();
                return tabFragment3;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return tabCount;
    }
}

5. 빌드해서 확인하면 탭을 클릭해서도 화면 이동이 되고, 쓸어 넘겨서도 화면 이동이 가능하다. 

탭(Tab) 쉽게 만들어 보자

구성을 설명하자면 뼈대가 되는 Activity 위에 Fragment로 화면을 변경해 주는 것이다.

프로젝트를 생성한다. Blank Activity로 생성!

1. gradle의 dependencies에 코드를 추가한다.

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:support-v4:23.4.0'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:25.2.0'
}

2. TabFragment1, TabFragment2, TabFragment3와 BlankFragment 의 이름으로 Fragment 4개를 생성한다. 

TabFragment1, TabFragment2, TabFragment3는 화면 전환이 되면 알아 볼 수 있도록 TextView 등을 추가한다.

BlankFragment에는 빈 화면이 되도록 구성한다. 

3. MainActivity에 다음과 같이 작성한다. 

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private android.support.v4.app.Fragment fragment;
    private android.support.v4.app.FragmentManager fragmentManager;

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

        // Tab
        fragmentManager = getSupportFragmentManager();

        // Adding Toolbar to the activity
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Initializing the TabLayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("First"));
        tabLayout.addTab(tabLayout.newTab().setText("Second"));
        tabLayout.addTab(tabLayout.newTab().setText("Third"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);


        fragment = new TabFragment1();
        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();

        // Set TabSelectedListener
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                switch (tab.getPosition()) {
                    case 0:
                        fragment = new TabFragment1();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                        break;
                    case 1:
                        fragment = new TabFragment2();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                        break;
                    case 2:
                        fragment = new TabFragment3();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                        break;
                    default:
                        fragment = new TabFragment1();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                }

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }
}

4. layout의 activity_main.xml을 다음과 같이 작성한다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sauce.mytablayout.MainActivity">

    <!--Custom Toolbar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <fragment
        android:id="@+id/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="com.sauce.mytablayout.BlankFragment" />

</LinearLayout>

AsyncTask 쉬운 따라하기

public class MainActivity extends AppCompatActivity {
    ProgressBar progressBar;
    TextView textView;
    Button button;
    Async async;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = (ProgressBar)findViewById(R.id.progressBar);
        textView = (TextView)findViewById(R.id.textView_result);
        button = (Button)findViewById(R.id.btn_stop);


        async = new Async();
        async.execute(0, 100);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                async.cancel(false);
            }
        });
    }


    // 첫 번째 인자는 doInBackground, 두 번째는 onProgressUpdate,
    // 세 번째는 onPostExecute와 onCancelled에 사용됨
    private class Async extends AsyncTask<Integer, Integer, Integer>{
        @Override
        protected Integer doInBackground(Integer... params) {
            int i = params[0];
            int j = params[1];

            while(i < 100 && !isCancelled()) { // isCancelled는 중간에 cancel 했는지 확인하기 위해 사용
                Log.d("Test", String.valueOf(i));
                publishProgress(i, j);
                i++;
                j--;
                try {
                    Thread.sleep(500);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            return i;
        }

        // 가장 먼저 실행 됨
        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            Log.d("Test", "============== Pre Execute =============");
        }

        // doInBackground에서 작업이 모두 마치면 실행 됨
        @Override
        protected void onPostExecute(Integer integer) {
            super.onPostExecute(integer);

            textView.setText(String.valueOf(integer));
        }

        // doInBackground에서 호출하면 실행 됨
        @Override
        protected void onProgressUpdate(Integer... values) {
            super.onProgressUpdate(values);
            Log.d("Test", "============== onProgressUpdate ==============");
            Log.d("Test", "Progress: " + String.valueOf(values[0]) + " " + String.valueOf(values[1]));
            progressBar.setProgress(values[0]);
            textView.setText(String.valueOf(values[0]));
        }

        // cancel 호출하면 실행 됨
        @Override
        protected void onCancelled(Integer integer) {
            super.onCancelled(integer);
            Log.d("Test", "============== onCancelled value: " + integer + "============");
        }

        // cancel 호출하면 실행 됨
        @Override
        protected void onCancelled() {
            super.onCancelled();
            Log.d("Test", "============== onCancelled ==================");
        }
    }
}

주석만 대충 읽어봐도 흐름은 눈에 보일 것이다. onProgressUpdate와 onPostExecute에서 UI 작업을 하면 된다. 

차이점은 onProgressUpdate에서는 스레드가 동작하는 동안 계속 UI를 변경 시킬 수 있고, onPostExecute는 

스레드가 종료된 이후 UI를 변경한다는 점이다. 

doInBackground 메서드 안의 while문에서 isCancelled 메서드를 통해 스레드가 cancel 됐는지를 계속 확인한다.

AsyncTask를 즉각 멈추기 위해서 사용하는 것이다. 

이런 확인 과정이 없으면 AsyncTask를 중간에 종료해도 while문은 조건이 틀릴때 까지 계속 동작한다. 

Retrofit

1. 인터넷을 사용하기 때문에 manifests에 퍼미션을 등록 합니다. 

<uses-permission android:name="android.permission.INTERNET"/>

2. gradle에 retrofit를 추가한다. 이후 gson도 사용할 예정이라 미리 추가 했습니다. 

compile 'com.google.code.gson:gson:2.7'
compile 'com.squareup.retrofit2:retrofit:2.1.0'
compile 'com.squareup.retrofit2:converter-gson:2.1.0'

3. Interface를 하나 생성한다. 예제로는 ApiService.class 파일에 만들도록 하겠습니다. 

아래 Url은 json 형태의 데이터를 서버로부터 미리 받을 수 있도록 만들어 놓은 사이트 입니다.  

public interface ApiService {
    public static final String API_URL = "http://jsonplaceholder.typicode.com/";

    @GET("comments")
    Call<ResponseBody>getComment(@Query("postId") int postId);

}

@GET는 GET 방식을 의미하며 뒤의 "comments"는 URL 이후 주소를 의미 합니다. 

@Query("postId")는 url에서 ?postId= 를 의미하고, int postId는 파라미터 값을 의미 합니다. 

즉, http://jsonplaceholder.typicode.com/comments?postId=1 과 같은 url이 만들어 집니다.

4. MainActivity에서 retrofit을 호출해 보도록 하겠습니다.

public class MainActivity extends AppCompatActivity {
    Retrofit retrofit;
    ApiService apiService;
    Call<ResponseBody> comment;

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

        retrofit = new Retrofit.Builder().baseUrl(ApiService.API_URL).build();
        apiService = retrofit.create(ApiService.class);

        comment = apiService.getComment(1);
        comment.enqueue(new Callback<ResponseBody>() {
            @Override
            public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                try {
                    Log.d("Test", response.body().string());
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void onFailure(Call<ResponseBody> call, Throwable t) {
                    
            }
        });
    }
}

실행하면 로그로 json 형태의 데이터를 가져오는 것을 확인할 수 있습다. 

이후 gson을 통해 데이터를 간편하게 파싱하는 것을 진행하도록 하겠습니다. 

Preference

정의하기: 

SharedPreferences pref;

저장할 공간 만들기: 

pref = getSharedPreferences("setting", 0);

여기서 0은 읽기, 쓰기 가능이며 MODE_WORLD_READABLE은 읽기 공유

MODE_WORLD_WRITEABLE는 쓰기 공유입니다. 

또한 fragment에서 preference 저장할 공간을 만드려면 아래와 같이 해야 합니다.

pref = this.getActivity().getSharedPreferences("setting", 0); 

저장된 값을 가져 오는 방법은 다음과 같습니다. (문자열일 때)

String preStatement = pref.getString("setting", "basic");

어디서 값을 가져올지(setting)와 저장된 값이 없다면 기본 값(basic)을 가져오도록 합니다. 

값을 넣는 방법은 아래와 같습니다. 

SharedPreference.Editor editor = pref.edit();

editor.putString("setting", "saved");

editor.commit();

반드시 commit를 해야합니다. 

앱이 커지면 preference로 사용하는 개수가 많아지고 관리가 잘 되지 않습니다. 

그래서 class 파일을 하나 더 만들어서 별도로 관리하는 것이 좋습니다. 

class 파일을 하나 더 만든 다음

public static final String PREF_SETTING = "PREF_SETTING";

으로 가져온 다음 key 값에 클래스.PREF_SETTING로 사용하면 됩니다. 

안드로이드 리스트 뷰 아이템 내용 가져오는 방법

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Object vo = (Object)adapterView.getAdapter().getItem(i); //리스트뷰의 포지션 내용을 가져옴.
}
});

리스트뷰의 마지막 확인하기

  리스트뷰의 마지막을 확인하는 방법은 아래와 같습니다. 마지막임이 확인되면 그 뒤에 서버로부터 다음 리스트를 받아와서 뿌려줄 수 있겠죠? 

listview.setOnScrollListener(new AbsListView.OnScrollListener() {
        boolean lastItemVisibleFlag = false;
	@Override
	public void on Scroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
		// 현재 화면에 보이는 첫번째 리스트 아이템의 번호(firstVisibleItem) +
        // 현재 화면에 보이는 리스트 아이템의 갯수(visibleItemCount)가 
        // 리스트 전체의 갯수(totalItemCount) -1 보다 크거나 같을때
		lastItemVisibleFlag = (totalItemCount > 0) && (firstVisibleItem + visibleItemCount >= totalItemCount;
	}
	@Override
	public void on ScrollStateChanged(AbsListView view, int scrollState) {
		 //OnScrollListener.SCROLL_STATE_IDLE은 스크롤이 이동하다가 멈추었을때 발생되는 스크롤 상태입니다.
		 //즉 스크롤이 바닥에 닿아 멈춘 상태에 처리를 하겠다는 뜻
		 if(scrollState == on ScrollListener.SCROLL_STATE_IDLE && lastItemVisibleFlag) {
			//TODO 화면이 바닥에 닿을때 처리
		}
	}
});

CheckBox 이미지 변경하기

체크박스의 이미지를 변경하기 위해 selector을 이용한다. 

1. selector을 xml 파일을 새로 만들어 drawable 폴더에 넣는다. 

check_box.xml

<!--?xml version="1.0" encoding="utf-8"?-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/이미지파일 (체크상태)">

<item android:state_checked="false" android:drawable="@drawable/이미지파일 (체크상태)">
<item android:drawable="@drawable/이미지파일 (비체크상태)">
</selector>

2. checkbox가 있는 layout에서 selector을 지정한다. button에다 적용하면 된다. 

<CheckBox
     android:layout_height="wrap_content"
     
     android:layout_width="wrap_content"
     android:button="@drawable/check_box”/>

커스텀 리스트 뷰 만들기 - Chapter 01

  리스트 뷰를 사용하기 위해 기본 프로젝트를 생성한다. 이후 MainActivity 레이아웃 즉, activity_main.xml에 아래와 같이 리스트 뷰를 추가한다. 이 장에서 앞으로 진행할 항목은 다음과 같다. 

Chapter 01

1. 리스트 뷰를 activity_main.xml에 추가한다.

2. 리스트 뷰에 들어갈 각 아이템에 대한 레이아웃을 만든다. 

3. 각 아이템에 대한 데이터를 정의한다. 

Chapter 02 - 클릭하면 이동합니다. 

1. Adapter을 구현한다.

2. MainActivity에 Adapter을 붙인다. 

3. 리스트뷰에 클릭 이벤트를 만들어 본다. 

1. 리스트 뷰를 activity_main.xml에 추가한다. 

[ activity_main.xml ]

<!--?xml version="1.0" encoding="utf-8"?-->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="com.nexthops.myapplication.MainActivity">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
</RelativeLayout>

2. 리스트뷰에 들어갈 각 아이템에 대한 레이아웃을 만든다.

  리스트뷰에 들어갈 각 아이템에 대한 레이아웃을 만듭니다. layout 폴더에서 list_item_layout.xml을 추가합니다.

[ list_item_layout.xml ]

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/appIcon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="5dp"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"/>
    <TextView
        android:id="@+id/appName"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="3dp"
        android:layout_toRightOf="@+id/appIcon"/>
    <TextView
        android:id="@+id/packageName"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/appIcon"
        android:layout_below="@id/appName"/>
</RelativeLayout>

3. 각 아이템에 대한 데이터를 정의합니다. 이 말인 즉, 각 아이템에 대해서 get, set할 수 있도록 정의합니다. 

ListViewItem.java 파일을 하나 생성합니다. 

[ListViewItem.java]

import android.graphics.drawable.Drawable;
public class ListViewItem {
    private Drawable appIconDrawable;
    private String appName;
    private String packageName;

    public Drawable getAppIconDrawable() {
        return appIconDrawable;
    }

    public void setAppIconDrawable(Drawable appIconDrawable) {
        this.appIconDrawable = appIconDrawable;
    }

    public String getAppName() {
        return appName;
    }

    public void setAppName(String appName) {
        this.appName = appName;
    }

    public String getPackageName() {
        return packageName;
    }

    public void setPackageName(String packageName) {
        this.packageName = packageName;
    }

  여기까지 화면을 구성하는 부분은 다 만들어 졌습니다. 다음 챕터에서 adapter과 연결 시켜 실제 리스트 뷰에 생성한 아이템이 나오고, 클릭할 수 있도록 만들어 보겠습니다. 

  페이스북SDK, 카카오톡SDK 등에서 간편 로그인을 등을 사용하기 위해서 반드시 앱에 대한 해시키(Hash key)를 등록해야 합니다. 해시키는 안드로이드 개발 환경에서 가지고 있는 인증서 바이너리에 대한 해시값으로 쉽게 앱 고유의 키 값이라고 생각하면 됩니다. 앱 고유의 값을 사용하기 위해 페이스북이나, 카톡에서 앱의 해시값을 필요로 하는 겁니다. 

  해시키는 개발용 key와 릴리즈용 key로 구분되며 개발용은 개발할 때만 사용하는 키로 본인의 안드로이드 개발 환경에 기본적으로 저장되어 있는 인증서 바이너리에 대한 해시값입니다.

릴리즈용 key는 실제 앱을 배포할 때 사용한 인증서 바이너리에 대한 해시 값입니다. 

카톡이나 페이스북에 사용자 포럼에 가면 배포용은 되는데 릴리즈용은 안된다는 분들이 있습니다. 해시키를 배포용으로 변경하지 않아서 그렇겠죠?

  개발환경이 다른 경우가 많아서 개발 시 해시키를 가져오는 건 코드 상에서 가져오는게 가장 정확한 것 같습니다. 

아래는 그 코드 입니다. 

@Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_facebook_hash_key);
     try {
            PackageInfo info = getPackageManager().getPackageInfo("your.package.name", PackageManager.GET_SIGNATURES);
            for (Signature signature : info.signatures) {
                MessageDigest md = MessageDigest.getInstance("SHA");
                md.update(signature.toByteArray());
                Log.d("KeyHash:", Base64.encodeToString(md.digest(), Base64.DEFAULT));
            }
        } catch (NameNotFoundException e) {
         e.printStackTrace();
        } catch (NoSuchAlgorithmException e) {
         e.printStackTrace();
        }
    }
}