티스토리 뷰
Android Studio 에서 액션바 탭 만들기
Android Studio API 21 (SDK 5.0.1) 기준 (하위 버전 테스트 못함)
아래 그림처럼 Tabed Avtivity 선택
아래 그림처럼 Navigation Style 에서 Action Bar Tabs 선택
Finish 누르고, 프로젝트 만들고 바로 실행 화면
http://blog.naver.com/propose98/10187901689
http://blog.naver.com/PostView.nhn?blogId=lobolook&logNo=220200308385
http://coolkim.tistory.com/343
탭 꾸미기
http://blog.naver.com/PostView.nhn?blogId=artisan_ryu&logNo=220100948283
http://jgilfelt.github.io/android-actionbarstylegenerator/
위 기본 프로젝트가 만들어진 상태에서
1. res/layout 에 3개의 Fragment 용 Layout을 추가한다. (탭이 기본3개 만들어지므로 3개가 필요, 탭 수 만큼 layout 만든다) activity_tab.xml 과 fragment_tab.xml 은 프로젝트에서 자동으로 만듬.
Tab.zip
fragment_page1.xml 소스
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Tab$PlaceholderFragment"> <TextView android:id="@+id/section_label1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RelativeLayout> |
fragment_page2.xml 소스
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Tab$PlaceholderFragment"> <ListView android:id="@+id/listView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> </RelativeLayout> |
fragment_page3.xml 소스
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".Tab$PlaceholderFragment"> <TextView android:id="@+id/section_label3" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> |
Tab.java 소스
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 |
package com.pelkan.tab; import java.util.ArrayList; import java.util.Locale; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Handler; import android.os.Message; import android.support.v7.app.ActionBarActivity; import android.support.v7.app.ActionBar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v4.app.FragmentPagerAdapter; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.view.Gravity; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TabHost; import android.widget.TextView; import android.widget.Toast; public class Tab extends ActionBarActivity implements ActionBar.TabListener { /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab); // Set up the action bar. final ActionBar actionBar = getSupportActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mSectionsPagerAdapter); // When swiping between different sections, select the corresponding // tab. We can also use ActionBar.Tab#select() to do this if we have // a reference to the Tab. mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { actionBar.setSelectedNavigationItem(position); } }); // For each of the sections in the app, add a tab to the action bar. for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) { // Create a tab with text corresponding to the page title defined by // the adapter. Also specify this Activity object, which implements // the TabListener interface, as the callback (listener) for when // this tab is selected. actionBar.addTab( actionBar.newTab() .setText(mSectionsPagerAdapter.getPageTitle(i)) .setTabListener(this) ); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_tab, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { // When the given tab is selected, switch to the corresponding page in // the ViewPager. mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { } @Override public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { // getItem is called to instantiate the fragment for the given page. // Return a PlaceholderFragment (defined as a static inner class below). // return PlaceholderFragment.newInstance(position + 1); // 주석처리 후 아래 코드 추가 Fragment fragment = null; Bundle args = null; switch (position) { case 0: fragment = new SectionsFragment1(); args = new Bundle(); break; case 1: fragment = new SectionsFragment2(); args = new Bundle(); break; case 2: fragment = new SectionsFragment3(); args = new Bundle(); } return fragment; } @Override public int getCount() { // Show 3 total pages. return 3; } @Override public CharSequence getPageTitle(int position) { Locale l = Locale.getDefault(); switch (position) { case 0: return getString(R.string.title_section1).toUpperCase(l); case 1: return getString(R.string.title_section2).toUpperCase(l); case 2: return getString(R.string.title_section3).toUpperCase(l); } return null; } } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_SECTION_NUMBER = "section_number"; /** * Returns a new instance of this fragment for the given section * number. */ public static PlaceholderFragment newInstance(int sectionNumber) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_SECTION_NUMBER, sectionNumber); fragment.setArguments(args); return fragment; } public PlaceholderFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_tab, container, false); return rootView; } } public static class SectionsFragment1 extends Fragment { public SectionsFragment1() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_page1, container, false); TextView tv = (TextView) rootView.findViewById(R.id.section_label1); tv.setText("섹션1"); return rootView; } } public static class SectionsFragment2 extends Fragment { public SectionsFragment2() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_page2, container, false); final ArrayList<String> arrayList = new ArrayList<String>(); arrayList.add("사과"); arrayList.add("배"); final ArrayAdapter<String> adapter; adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, arrayList); ListView lv = (ListView) rootView.findViewById(R.id.listView); lv.setAdapter(adapter); lv.setOnItemClickListener(new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView parent, View view, int position, long id) { String str = arrayList.get(position); String a = str + " 선택"; Toast.makeText(getActivity(), a, Toast.LENGTH_SHORT).show(); } }); return rootView; } } public static class SectionsFragment3 extends Fragment { public SectionsFragment3() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_page3, container, false); TextView tv = (TextView) rootView.findViewById(R.id.section_label3); tv.setText("섹션3"); return rootView; } } } |
프로젝트에서 자동으로 만들어진 안드로이드 소스에 fragment 용 class 3개를 만들어 추가한다. (굵은글씨)
실행화면1 (첫번째 탭 선택)
두번째 탭 선택 후 ListView 에서 배 선택하여 Toast 가 띄어진 화면2
세번째 탭 선택 화면3
결국,
1. 탭 수 만큼 layout 만든다.
2. 각 프레임에 보여줄 fregment를 상속받은 class 구현한다. (144~161)
3. SectionsPagerAdapter.getItem() 에 기본 리턴 코드를 주석처리 하고 switch문 코드 추가. (218~279)
추가사항 (안드로이드 프로그래밍의 모든것 P.314)
안드로이드 4.0 이상부터 탭을 추가하려면 탭 위젯 대신 액션바를 사용해 탭을 이용해야 한다.
액션바는 화면 크기가 다르더라도 자동으로 화면을 크기에 맞춰 적용된다.
내비게이션 탭은 프래그먼트를 사용
탭을 사용해 프래그먼트들 사이에서 이동하려면 탭을 터치했을때 프래그먼트의 트랜잭션을 시작해야 한다.
탭을 사용하려면 Layout 이 탭과 관련된 프래그먼트의 각 조작을 포함한 뷰그룹을 갖고 있어야 하며 뷰 그룹은 리소스 ID를 갖고 있어 탭을 클릭했을때 인식할 수 있는 코드로 사용된다.
구현방법
1. ActionBar.TabListener 인터페이스를 구현
탭을 터치하는 이벤트가 발생했을때 이 인터페이스의 콜백 메소드가 호출되고 이 콜백 메소드에서 프래그먼트를 바꿀 수 있다.
2. 탭을 추가하려면 ActionBar.Tab 을 인스턴스화 하고 setTabListener() 메소드에 ActionBar.TabListener를 설정해주면 된다. 또 탭의 타이틀과 아이콘은 setTitle(), setIcon() 을 이용해 설정할 수 있다.
3. addTab() 을 호출해 액션 바에 탭을 추가한다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 |
package com.pelkan.tab;
import java.util.ArrayList; import java.util.Locale; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Handler; import android.os.Message; import android.support.v7.app.ActionBarActivity; import android.support.v7.app.ActionBar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v4.app.FragmentPagerAdapter; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.view.Gravity; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TabHost; import android.widget.TextView; import android.widget.Toast; public class Tab extends ActionBarActivity implements ActionBar.TabListener { /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab); // Set up the action bar. final ActionBar actionBar = getSupportActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mSectionsPagerAdapter); // When swiping between different sections, select the corresponding // tab. We can also use ActionBar.Tab#select() to do this if we have // a reference to the Tab. mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { actionBar.setSelectedNavigationItem(position); } }); // For each of the sections in the app, add a tab to the action bar. for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) { // Create a tab with text corresponding to the page title defined by // the adapter. Also specify this Activity object, which implements // the TabListener interface, as the callback (listener) for when // this tab is selected. actionBar.addTab( actionBar.newTab() .setText(mSectionsPagerAdapter.getPageTitle(i)) .setTabListener(this) ); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_tab, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { // When the given tab is selected, switch to the corresponding page in // the ViewPager. mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { } @Override public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { // getItem is called to instantiate the fragment for the given page. // Return a PlaceholderFragment (defined as a static inner class below). //return PlaceholderFragment.newInstance(position + 1); // 기본코드 주석처리 후 아래코드 추가 switch (position) { case 0: return SectionsFragment1.newInstance(position + 1); case 1: return SectionsFragment2.newInstance(position + 1); case 2: return SectionsFragment3.newInstance(position + 1); } return null; } @Override public int getCount() { // Show 3 total pages. return 3; } @Override public CharSequence getPageTitle(int position) { Locale l = Locale.getDefault(); switch (position) { case 0: return getString(R.string.title_section1).toUpperCase(l); case 1: return getString(R.string.title_section2).toUpperCase(l); case 2: return getString(R.string.title_section3).toUpperCase(l); } return null; } } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_SECTION_NUMBER = "section_number"; /** * Returns a new instance of this fragment for the given section * number. */ public static PlaceholderFragment newInstance(int sectionNumber) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_SECTION_NUMBER, sectionNumber); fragment.setArguments(args); return fragment; } public PlaceholderFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_tab, container, false); return rootView; } } public static class SectionsFragment1 extends Fragment { public SectionsFragment1() { } // PlaceholderFragment.newInstance() 와 똑같이 추가 static SectionsFragment1 newInstance(int SectionNumber){ SectionsFragment1 fragment = new SectionsFragment1(); Bundle args = new Bundle(); args.putInt("section_number", SectionNumber); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_page1, container, false); TextView tv = (TextView) rootView.findViewById(R.id.section_label1); tv.setText("섹션1"); return rootView; } } public static class SectionsFragment2 extends Fragment { public SectionsFragment2() { } // PlaceholderFragment.newInstance() 와 똑같이 추가 static SectionsFragment2 newInstance(int SectionNumber){ SectionsFragment2 fragment = new SectionsFragment2(); Bundle args = new Bundle(); args.putInt("section_number", SectionNumber); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_page2, container, false); final ArrayList<String> arrayList = new ArrayList<String>(); arrayList.add("사과"); arrayList.add("배"); final ArrayAdapter<String> adapter; adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, arrayList); ListView lv = (ListView) rootView.findViewById(R.id.listView); lv.setAdapter(adapter); lv.setOnItemClickListener(new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView parent, View view, int position, long id) { String str = arrayList.get(position); String a = str + " 선택"; Toast.makeText(getActivity(), a, Toast.LENGTH_SHORT).show(); } }); return rootView; } } public static class SectionsFragment3 extends Fragment { public SectionsFragment3() { } // PlaceholderFragment.newInstance() 와 똑같이 추가 static SectionsFragment3 newInstance(int SectionNumber){ SectionsFragment3 fragment = new SectionsFragment3(); Bundle args = new Bundle(); args.putInt("section_number", SectionNumber); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_page3, container, false); TextView tv = (TextView) rootView.findViewById(R.id.section_label3); tv.setText("섹션3"); return rootView; } } } |
위 소스의 기능과 동일하나 프로젝트 생성 후 기본 코드와 같게 코딩한것.
142번줄 기본 코드를 주석처리하고 142번과 같게 변경. 단, 각 탭에 따라 프래그먼트 종류가 다르게 지정.
각 프래그먼트를 상속한 사용자 클래스에 newInstance() 추가. (215~221)Tab (2).zip
결국, 기본 코드에서 getItem()과 사용자 플래그먼트 클래스만 구현해주면 된다.
탭수가 3개아니면 getCounter 값도 변경해야 한다. (언제 쓰지?)