View Pager 실습, 외부 라이브러리 사용하여 꾸미기

#View Pager 실습

프로젝트 구성도

1. xml을 구성한다.

• Fragment_gallery_fragment1.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<FrameLayout 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"    tools:context="com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment1">    <!-- TODO: Update blank fragment layout -->    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="hello_blank_fragment1" /> </FrameLayout> Colored by Color Scripter

cs

• Fragment_gallery_fragment2.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<FrameLayout 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"    tools:context="com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment1">    <!-- TODO: Update blank fragment layout -->    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="hello_blank_fragment2" /> </FrameLayout> Colored by Color Scripter

cs

• Fragment_gallery_fragment3.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<FrameLayout 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"    tools:context="com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment1">    <!-- TODO: Update blank fragment layout -->    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="hello_blank_fragment3" /> </FrameLayout> Colored by Color Scripter

cs

2. Fragment를 구성한다.

• GalleryFragment1.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

package com.ktds.smahn.mydrawablelayout.gallery; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.ktds.smahn.mydrawablelayout.R; public class GalleryFragment1 extends Fragment {    // TODO: Rename parameter arguments, choose names that match    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER    private static final String ARG_PARAM1 = "param1";    private static final String ARG_PARAM2 = "param2";    // TODO: Rename and change types of parameters    private String mParam1;    private String mParam2;    public GalleryFragment1() {        // Required empty public constructor    }    /**     * Use this factory method to create a new instance of     * this fragment using the provided parameters.     *     * @param param1 Parameter 1.     * @param param2 Parameter 2.     * @return A new instance of fragment GalleryFragment1.     */    // TODO: Rename and change types and number of parameters    public static GalleryFragment1 newInstance(String param1, String param2) {        GalleryFragment1 fragment = new GalleryFragment1();        Bundle args = new Bundle();        args.putString(ARG_PARAM1, param1);        args.putString(ARG_PARAM2, param2);        fragment.setArguments(args);        return fragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (getArguments() != null) {            mParam1 = getArguments().getString(ARG_PARAM1);            mParam2 = getArguments().getString(ARG_PARAM2);        }    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.fragment_gallery_fragment1, container, false);    } } Colored by Color Scripter

cs

• GalleryFragment2.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

package com.ktds.smahn.mydrawablelayout.gallery; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.ktds.smahn.mydrawablelayout.R; public class GalleryFragment2 extends Fragment {    // TODO: Rename parameter arguments, choose names that match    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER    private static final String ARG_PARAM1 = "param1";    private static final String ARG_PARAM2 = "param2";    // TODO: Rename and change types of parameters    private String mParam1;    private String mParam2;    public GalleryFragment2() {        // Required empty public constructor    }    /**     * Use this factory method to create a new instance of     * this fragment using the provided parameters.     *     * @param param1 Parameter 1.     * @param param2 Parameter 2.     * @return A new instance of fragment GalleryFragment2.     */    // TODO: Rename and change types and number of parameters    public static GalleryFragment2 newInstance(String param1, String param2) {        GalleryFragment2 fragment = new GalleryFragment2();        Bundle args = new Bundle();        args.putString(ARG_PARAM1, param1);        args.putString(ARG_PARAM2, param2);        fragment.setArguments(args);        return fragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (getArguments() != null) {            mParam1 = getArguments().getString(ARG_PARAM1);            mParam2 = getArguments().getString(ARG_PARAM2);        }    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.fragment_gallery_fragment2, container, false);    } } Colored by Color Scripter

cs

• GalleryFragment3.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

package com.ktds.smahn.mydrawablelayout.gallery; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.ktds.smahn.mydrawablelayout.R; public class GalleryFragment3 extends Fragment {    // TODO: Rename parameter arguments, choose names that match    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER    private static final String ARG_PARAM1 = "param1";    private static final String ARG_PARAM2 = "param2";    // TODO: Rename and change types of parameters    private String mParam1;    private String mParam2;    public GalleryFragment3() {        // Required empty public constructor    }    /**     * Use this factory method to create a new instance of     * this fragment using the provided parameters.     *     * @param param1 Parameter 1.     * @param param2 Parameter 2.     * @return A new instance of fragment GalleryFragment3.     */    // TODO: Rename and change types and number of parameters    public static GalleryFragment3 newInstance(String param1, String param2) {        GalleryFragment3 fragment = new GalleryFragment3();        Bundle args = new Bundle();        args.putString(ARG_PARAM1, param1);        args.putString(ARG_PARAM2, param2);        fragment.setArguments(args);        return fragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (getArguments() != null) {            mParam1 = getArguments().getString(ARG_PARAM1);            mParam2 = getArguments().getString(ARG_PARAM2);        }    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        // Inflate the layout for this fragment        return inflater.inflate(R.layout.fragment_gallery_fragment3, container, false);    } } Colored by Color Scripter

cs

3. GalleryFragment.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

package com.ktds.smahn.mydrawablelayout; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment1; import com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment2; import com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment3; public class GalleryFragment extends Fragment {    // TODO: Rename parameter arguments, choose names that match    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER    private static final String ARG_PARAM1 = "param1";    private static final String ARG_PARAM2 = "param2";    // TODO: Rename and change types of parameters    private String mParam1;    private String mParam2;    public GalleryFragment() {        // Required empty public constructor    }    /**     * Use this factory method to create a new instance of     * this fragment using the provided parameters.     *     * @param param1 Parameter 1.     * @param param2 Parameter 2.     * @return A new instance of fragment GalleryFragment.     */    // TODO: Rename and change types and number of parameters    public static GalleryFragment newInstance(String param1, String param2) {        GalleryFragment fragment = new GalleryFragment();        Bundle args = new Bundle();        args.putString(ARG_PARAM1, param1);        args.putString(ARG_PARAM2, param2);        fragment.setArguments(args);        return fragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (getArguments() != null) {            mParam1 = getArguments().getString(ARG_PARAM1);            mParam2 = getArguments().getString(ARG_PARAM2);        }    }    private Button btnFirstGallery;    private Button btnSecondGallery;    private Button btnThirdGallery;    private ViewPager pager;    private Fragment galleryFragment1;    private Fragment galleryFragment2;    private Fragment galleryFragment3;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_gallery, container, false);        galleryFragment1 = new GalleryFragment1();        galleryFragment2 = new GalleryFragment2();        galleryFragment3 = new GalleryFragment3();        btnFirstGallery = (Button) view.findViewById(R.id.btnFirstGallery);        btnFirstGallery.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                pager.setCurrentItem(0);            }        });        btnSecondGallery = (Button) view.findViewById(R.id.btnSecondGallery);        btnSecondGallery.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                pager.setCurrentItem(1);            }        });        btnThirdGallery = (Button) view.findViewById(R.id.btnThirdGallery);        btnThirdGallery.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                pager.setCurrentItem(2);            }        });        pager = (ViewPager) view.findViewById(R.id.pager);        pager.setAdapter( new PagerAdapter( getChildFragmentManager() ) );        //밖에서도 해줘야 페이지가 문제없이 출력        pager.setOffscreenPageLimit(3);        pager.setCurrentItem(0);        getActivity().setTitle("Gallery Fragment");        // Inflate the layout for this fragment        return view;    }    private class PagerAdapter extends FragmentPagerAdapter{        public PagerAdapter(FragmentManager fm) {            super(fm);        }        /**         * View Pager의 Fragment들은 각각 Index를 가진다.         * Android OS로부터 요청된 Pager의 Index를 보내주면,         * 해당되는 Fragment를 리턴시킨다.         * @param position         * @return         */        @Override        public Fragment getItem(int position) {            if(position == 0 ) {                return galleryFragment1;            }            else if( position == 1 ) {                return galleryFragment2;            }            else {                return galleryFragment3;            }        }        /**         * View Pager에 몇개의 Fragment가 들어가는지 설정한다.         * @return         */        @Override        public int getCount() {            return 3;        }    } } Colored by Color Scripter

cs

4. MainActivity.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

package com.ktds.smahn.mydrawablelayout; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.NavigationView; import android.support.design.widget.Snackbar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentTransaction; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; public class MainActivity extends AppCompatActivity        implements NavigationView.OnNavigationItemSelectedListener {    private Fragment cameraFragment;    private Fragment galleryFragment;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        cameraFragment = new CameraFragment();        galleryFragment = new GalleryFragment();        /*         * 기본 화면 설정         */        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();        transaction.add(R.id.container, cameraFragment);        //transaction.addToBackStack(null);        transaction.commit();        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);        drawer.setDrawerListener(toggle);        toggle.syncState();        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(this);    }    @Override    public void onBackPressed() {        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        if (drawer.isDrawerOpen(GravityCompat.START)) {            drawer.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, 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);    }    /**     * @see NavigationView.OnNavigationItemSelectedListener     * @param item     * @return     */    @SuppressWarnings("StatementWithEmptyBody")    @Override    public boolean onNavigationItemSelected(MenuItem item) {        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();        // Handle navigation view item clicks here.        int id = item.getItemId();        if (id == R.id.nav_camera) {            transaction.replace(R.id.container, cameraFragment);        } else if (id == R.id.nav_gallery) {            transaction.replace(R.id.container, galleryFragment);        } else if (id == R.id.nav_slideshow) {        } else if (id == R.id.nav_manage) {        } else if (id == R.id.nav_share) {        } else if (id == R.id.nav_send) {        }        transaction.commit();        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        drawer.closeDrawer(GravityCompat.START);        return true;    } } Colored by Color Scripter

cs

5. 실행

#핵심요약

#라이브러리 추가해서 View Pager 예쁘게 만들기

1. Build.gradle을 클릭해서 아래 내용을 추가해준다.

그리고 상단의 sync now를 눌러서 빌드를 진행한다. 이게 외부 라이브러리를 가져오는 과정이다.

1.0.1 이 가장 최신 버전이다.

2. Fragment_gallery.xml에 PagerSlidingTabStrip을 추가해준다.

3. GalleryFragment.java 에서 버튼을 모두 비활성화하고 pager를 추가해준다.

이해를 돕기 위해 전체 코드를 첨부한다.

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

package com.ktds.smahn.mydrawablelayout; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import com.astuetz.PagerSlidingTabStrip; import com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment1; import com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment2; import com.ktds.smahn.mydrawablelayout.gallery.GalleryFragment3; public class GalleryFragment extends Fragment {    // TODO: Rename parameter arguments, choose names that match    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER    private static final String ARG_PARAM1 = "param1";    private static final String ARG_PARAM2 = "param2";    // TODO: Rename and change types of parameters    private String mParam1;    private String mParam2;    public GalleryFragment() {        // Required empty public constructor    }    /**     * Use this factory method to create a new instance of     * this fragment using the provided parameters.     *     * @param param1 Parameter 1.     * @param param2 Parameter 2.     * @return A new instance of fragment GalleryFragment.     */    // TODO: Rename and change types and number of parameters    public static GalleryFragment newInstance(String param1, String param2) {        GalleryFragment fragment = new GalleryFragment();        Bundle args = new Bundle();        args.putString(ARG_PARAM1, param1);        args.putString(ARG_PARAM2, param2);        fragment.setArguments(args);        return fragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (getArguments() != null) {            mParam1 = getArguments().getString(ARG_PARAM1);            mParam2 = getArguments().getString(ARG_PARAM2);        }    }    private Button btnFirstGallery;    private Button btnSecondGallery;    private Button btnThirdGallery;    private ViewPager pager;    private Fragment galleryFragment1;    private Fragment galleryFragment2;    private Fragment galleryFragment3;    private PagerSlidingTabStrip tabs;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_gallery, container, false);        galleryFragment1 = new GalleryFragment1();        galleryFragment2 = new GalleryFragment2();        galleryFragment3 = new GalleryFragment3(); //        btnFirstGallery = (Button) view.findViewById(R.id.btnFirstGallery); //        btnFirstGallery.setOnClickListener(new View.OnClickListener() { //            @Override //            public void onClick(View v) { //                pager.setCurrentItem(0); //            } //        }); //        btnSecondGallery = (Button) view.findViewById(R.id.btnSecondGallery); //        btnSecondGallery.setOnClickListener(new View.OnClickListener() { //            @Override //            public void onClick(View v) { //                pager.setCurrentItem(1); //            } //        }); //        btnThirdGallery = (Button) view.findViewById(R.id.btnThirdGallery); //        btnThirdGallery.setOnClickListener(new View.OnClickListener() { //            @Override //            public void onClick(View v) { //                pager.setCurrentItem(2); //            } //        });        pager = (ViewPager) view.findViewById(R.id.pager);        pager.setAdapter( new PagerAdapter( getChildFragmentManager() ) );        //밖에서도 해줘야 페이지가 문제없이 출력        pager.setOffscreenPageLimit(3);        pager.setCurrentItem(0);        getActivity().setTitle("Gallery Fragment");        tabs = (PagerSlidingTabStrip) view.findViewById(R.id.tabs);        tabs.setViewPager(pager);        // Inflate the layout for this fragment        return view;    }    private String[] pageTitle = {"Page 1", "Page 2", "Page 3"};    private class PagerAdapter extends FragmentPagerAdapter{        public PagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public CharSequence getPageTitle(int position) {            return pageTitle[position];        }        /**         * View Pager의 Fragment들은 각각 Index를 가진다.         * Android OS로부터 요청된 Pager의 Index를 보내주면,         * 해당되는 Fragment를 리턴시킨다.         * @param position         * @return         */        @Override        public Fragment getItem(int position) {            if(position == 0 ) {                return galleryFragment1;            }            else if( position == 1 ) {                return galleryFragment2;            }            else {                return galleryFragment3;            }        }        /**         * View Pager에 몇개의 Fragment가 들어가는지 설정한다.         * @return         */        @Override        public int getCount() {            return 3;        }    } } Colored by Color Scripter

cs

4. 실행한다.

잘된다.