안드로이드 DialogFragment를 이용한 팝업 페이징 구현하기

안드로이드 DialogFragment를 이용한 팝업 페이징 구현하기

 

아이폰과 달리 안드로이드는 아는게 없기 때문에 개념을 잡는것이 쉽지 않다. 종일 맨땅에 헤딩하면서 이제서야 겨우 원하는 결과물을 쥐게 되었다. 

또 이용할 일이 있을까 싶지만, 그래도 오늘의 포스팅으로 올려 두고자 한다. 

 

1.개요. 

팝업창이 뜨는데 페이징이 되어야 한다. 

메인 Activity에서 팝업을 뛰운다. 

닫기 버튼과 팝업내에서 특정 액션을 해야한다. 

 

DialogFragment를 상속 받고 View.OnClickListener를 구현하는 클래스를 하나 만들었다. 

PopupFragmentDialog.java 

public class PopupFragmentDialog extends DialogFragment implements View.OnClickListener {

    private ImageView page1;
    private ImageView page2;


    //content to show in the fragments
    public static final String TAG = "popup_fragment_dialog";
    public PopupFragmentDialog(){
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_dialog_popup, container);
        //getDialog().setTitle("Pager Dialog");
        /**
         * 백버튼, 취소버튼, 배경터치 막음
         */
        if (getDialog() != null) {
            getDialog().setCanceledOnTouchOutside(false);
            //setCancelable(false);
        }

        ViewPager pager = (ViewPager) view.findViewById(R.id.pager);
        MyFragmentAdapter adapter = new MyFragmentAdapter(getChildFragmentManager());
        pager.setAdapter(adapter);

        /**
         * 페이징 번호
         */
        page1 = view.findViewById(R.id.img_page1);
        page2 = view.findViewById(R.id.img_page2);


        view.findViewById(R.id.btn_pop_close).setOnClickListener(this);

        // Attach the page change listener inside the activity
        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                page1.setImageDrawable(getResources().getDrawable(R.drawable.pop_page_off));
                page2.setImageDrawable(getResources().getDrawable(R.drawable.pop_page_off));
                switch (position) {
                    case 0:
                        page1.setImageDrawable(getResources().getDrawable(R.drawable.pop_page_on));
                        break;
                    case 1:
                        page2.setImageDrawable(getResources().getDrawable(R.drawable.pop_page_on));
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


        return view;
    }

    @Override
    public void onDismiss(DialogInterface dialog) {
        return;
        //super.onDismiss(dialog);
    }

    @Override
    public void onCancel(DialogInterface dialog) {
        //팝업창이 닫힐 때
        return;

    }

    @Override
    public void onStart() {
        super.onStart();
    }

    @Override
    public void onStop() {
        super.onStop();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_pop_close:
                getDialog().dismiss();
                break;
        }
    }


    /**
     * innter class
     */
    public class MyFragmentAdapter extends FragmentPagerAdapter {

        public MyFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            if (position == 0) {
                // find first fragment...
                PopupFirstFragment s = new PopupFirstFragment();
                return s;
            }

            if (position == 1) {
                // find second fragment...
                PopupSecondFragment s=new PopupSecondFragment();
                return s;
            }

            return null;
        }

        @Override
        public int getCount() {
            // Show 2 total pages.
            return 2;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "First Tab";
                case 1:
                    return "Second Tab";

            }
            return null;
        }
    }
}

fragment_dialog_popup.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#ffffff"
    android:orientation="vertical"
    android:layout_width="338dp"
    android:layout_height="585dp">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="338dp"
        android:layout_height="488dp"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="97dp"
        android:orientation="vertical">

        <!-- 닫기 버튼 -->
        <LinearLayout
            android:orientation="vertical"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="43dp"
                android:orientation="horizontal"
                android:gravity="center">
                <!-- 페이징 -->
                <ImageView
                    android:id="@+id/img_page1"
                    android:layout_width="11dp"
                    android:layout_height="11dp"
                    android:src="@drawable/pop_page_on"
                    android:layout_gravity="center_horizontal|center_vertical|center"/>
                <ImageView
                    android:id="@+id/img_page2"
                    android:layout_width="11dp"
                    android:layout_height="11dp"
                    android:src="@drawable/pop_page_off"
                    android:layout_marginLeft="10dp"
                    android:layout_gravity="center_horizontal|center_vertical|center"/>
            </LinearLayout>

            <View
                android:background="#66bdbdbd"
                android:layout_width="297dp"
                android:layout_height="1dp" android:layout_gravity="center"
                />
            <!-- 닫기 -->
            <ImageView
                android:layout_width="72dp"
                android:layout_height="54dp"
                android:src="@drawable/pop_btn_close"
                android:layout_gravity="right"
                android:id="@+id/btn_pop_close"
                />

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

페이징에 들어갈 각각의 fragment popup.xml과 java파일을 선언한다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="top">
    
    <ImageView
        android:layout_width="338dp"
        android:layout_height="435dp"
        android:src="@drawable/pop_img01"
        android:layout_gravity="top" />
    <ImageView
        android:layout_width="297dp"
        android:layout_height="52dp"
        android:src="@drawable/pop_btn01"
        android:layout_marginTop="2dp"
        android:id="@+id/btn_action_url"/>
    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#eee"/>


</LinearLayout>

public class PopupFirstFragment extends Fragment implements View.OnClickListener {

    // Store instance variables
    private ImageView btnActionUrl;

    // newInstance constructor for creating fragment with arguments
    public static PopupFirstFragment newInstance(int page, String title) {
        PopupFirstFragment fragment = new PopupFirstFragment();
        Bundle args = new Bundle();
        args.putInt("someInt", page);
        args.putString("someTitle", title);
        fragment.setArguments(args);
        return fragment;
    }

    // Store instance variables based on arguments passed
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


    }

    // Inflate the view for the fragment based on layout XML
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_popup_first, container, false);



        view.findViewById(R.id.btn_action_url).setOnClickListener(this);
        return view;
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_action_url:
            {
                String url ="https://m.search.naver.com/search.naver?sm=mtp_hty.top&where=m&query=%EB%A7%88%EC%9D%B4%EB%B1%85%ED%81%AC";
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(intent);

                //popup_fragment_dialog
                //FragmentManager fm = getActivity().getSupportFragmentManager();
                DialogFragment df = (DialogFragment)getActivity().getSupportFragmentManager().findFragmentByTag("popup_fragment_dialog");
                df.dismiss();



                break;
            }
        }
    }
}

popup_fragment_dialog

태그로 찾을 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="top"
    android:background="#fff">


    <ImageView
        android:layout_width="338dp"
        android:layout_height="435dp"
        android:src="@drawable/pop_img03"
        android:layout_gravity="top|center_vertical|center_horizontal" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <ImageView
            android:layout_width="146dp"
            android:layout_height="52dp"
            android:src="@drawable/pop_btn03"
            android:layout_marginTop="2dp"
            android:layout_gravity="top|center_vertical|center_horizontal" />
        <ImageView
            android:layout_width="146dp"
            android:layout_height="52dp"
            android:src="@drawable/pop_btn04"
            android:layout_marginTop="2dp"
            android:layout_marginLeft="5dp"
            android:layout_gravity="top|center_vertical|center_horizontal" />
    </LinearLayout>

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#eee"/>

</LinearLayout>

public class PopupSecondFragment extends Fragment {
    // Store instance variables
    private String title;
    private int page;

    // newInstance constructor for creating fragment with arguments
    public static PopupSecondFragment newInstance(int page, String title) {
        PopupSecondFragment fragment = new PopupSecondFragment();
        Bundle args = new Bundle();
        args.putInt("someInt", page);
        args.putString("someTitle", title);
        fragment.setArguments(args);
        return fragment;
    }

    // Store instance variables based on arguments passed
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    // Inflate the view for the fragment based on layout XML
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_popup_second, container, false);
        return view;
    }
}

 

팝업을 뛰우는 코드는 다음과 같다. (MainActivity.java) 

PopupFragmentDialog f = new PopupFragmentDialog();
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.add(f,"popup_fragment_dialog");
ft.commit();