LoginSignup
540
557

More than 5 years have passed since last update.

AndroidStudioの標準デザインパターンで分かるFragment入門

Last updated at Posted at 2014-07-18

はじめに(この記事はもう内容が古いので注意してくださいね)


AndroidFragment
2AndroidAndroidStudio使2Fragment使




Fragment使

Android StudioFragmentFragment

AndroidFragment

2


Google



調調

Activity


ActivityAndroidUI






(windows)



()

FragmentView


FragmentActivityFragmentView使UIActivity






View




FragmentViewActivityActivity使
Activity

ActivityFragment使Qiita
 Activity  Fragment 使

Activity







FragmentView

Fragment





ViewActivity

FragmentView




FragmentActivityUI
FragmentActivity

Fragment

Fragment


Untitled.png 使!

Example1


Fragment
AndroidStudioFragment3


NavigationDrawer

スクリーンショット 2014-07-10 11.12.33.png
NavigationDrawerActivityNavigationDrawerFragment

MainActivity

MainActivity
layout_xmlNavigationDrawerFragment

fragmentViewxml
<fragment android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navigation_drawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:name="jp.sample.app.fragmentsample.NavigationDrawerFragment"
    tools:layout="@layout/fragment_navigation_drawer" />

MainActivitylayoutXMLFrameLayoutActivity

NavigationDrawerFragmentView


MainActivity.java
onNavigationDrawerItemSelectedonCreateNavigationDrawer
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction()
               .replace(R.id.container, PlaceholderFragment.newInstance(position + 1))
               .commit();

FragmentManagerbeginTransactionPlaceholderFragmentnewInstanceactivity_mancontainerViewGroup
@+id/containerIDFrameLayout
beginTransactionFragmentTransactionFragment

3PlaceholderFragment

3

Fragment


3




PictureFragment

TextFragment

ListFragment


3View


スクリーンショット 2014-07-14 12.51.50.png
javaFragment

スクリーンショット 2014-07-17 17.44.44.png
ImageFragmentInclude interface callback?

Include Fragment factory methodsActivityFragmentFragmentfactorymethod使
使

ActivityGoogle


fragment_image.xml


LayoutXML
Activity
fragment_image.xml
<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"
    tools:context="jp.sample.app.samplefragment.ImageFragment">

    <!-- TODO: Update blank fragment layout -->
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerInside"
        android:layout_centerInParent="true"
         />

</RelativeLayout>

ImageFragment.javaを編集する


Bundle
ImageViewIDBundle

private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";
(中略)
private String mParam1;
private String mParam2;

以下のメンバ変数を追加します。

private static final String ARG_PARAM_RESOURCE_ID = "resource_id";
private int mResourceId;

newInstanceメソッドを改造しましょう
余計なパラメタのputStringをとって、ARG_PARAM_RESOURCE_IDのputIntを記述します。
こちらのファクトリーメソッドで値をBundleに設定し、onCreateで取得します。

public static ImageFragment newInstance(int resourceId) {
    ImageFragment fragment = new ImageFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_PARAM_RESOURCE_ID, resourceId);
    fragment.setArguments(args);
    return fragment;
    }

続いて onCreateでのBundleからのパラメタ取得部分を修正します。

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        mResourceId = getArguments().getInt(ARG_PARAM_RESOURCE_ID);
    }
}

onCreateViewでimageViewにリソースを設定します。
onCreateViewではLayoutInflaterが渡されてきますので自分が提供するViewを返却します。

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootView = inflater.inflate(R.layout.fragment_image, container, false);

    ImageView imageView = (ImageView)rootView.findViewById(R.id.image_view);
    imageView.setImageResource(mResourceId);

    return rootView;
}

MainActivityをImageFragmentを使用するように編集する


MainActivityNavigationDrawerItemSelectedposition0PlaceholderFragmentImageFragment使


onNavigationDrawerItemSelected
public void onNavigationDrawerItemSelected(int position) {
    // update the main content by replacing fragments
    FragmentManager fragmentManager = getSupportFragmentManager();
    if(position == 0){
        fragmentManager.beginTransaction()
                .replace(R.id.container, ImageFragment.newInstance(R.drawable.hanabatake))
                .commit();
    }
    else {
        fragmentManager.beginTransaction()
                .replace(R.id.container, PlaceholderFragment.newInstance(position + 1))
                .commit();
    }

}


Section1
device-2014-07-17-193436.png
SectionActionBarNavigationDrawer

device-2014-07-17-194145.png device-2014-07-17-194200.png !

ImageFragment


PlaceholderFragmentonAttach
ActivityAttachactivityMainActivityonSectionAttachednewInstancesectionNumber
onSectionAttachedmTitleNO
mTitlerestoreActionBarActionBarsetTitle

ImageFragment

ImageFragmentnewInstanceonAttach
//追加
private static final String ARG_SECTION_NUMBER = "section_number";

//変更
public static ImageFragment newInstance(int sectionNumber, int resourceId) {
    ImageFragment fragment = new ImageFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_SECTION_NUMBER, sectionNumber);
    args.putInt(ARG_PARAM_RESOURCE_ID, resourceId);
    fragment.setArguments(args);
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        mResourceId = getArguments().getInt(ARG_PARAM_RESOURCE_ID);
    }
}

//追加
@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);
    ((MainActivity) activity).onSectionAttached(getArguments().getInt(ARG_SECTION_NUMBER));
}

MainActivityでImageFragmentのnewInstanceの引数にposition + 1をたします。

fragmentManager.beginTransaction()
        .replace(R.id.container, ImageFragment.newInstance(position + 1, R.drawable.hanabatake))
        .commit();

Section1Section1

ImageFragmentMainActivityGist


ImageFragmentTextFragment
TextFragment
TextViewMainActivityonNavigationDrawerItemSelectedTextFragmentTextFragmentonAtach

Gist


ListFragment
Fragment(Blank)(List)

DummyContentListFragment
ItemFragment

スクリーンショット 2014-07-17 20.29.52.png
ItemFramentMenuActivityItemFragmentOnFragmentInteractionListenerinterfaceActivityinterfaceonAtachActivity

InterfaceActivityFragmentinterfaceActivity

MainActivityOnFragmentInteractionListener

implements
public class MainActivity extends ActionBarActivity
        implements NavigationDrawerFragment.NavigationDrawerCallbacks
                   ,ItemFragment.OnFragmentInteractionListener{

onFragmentInteractionメソッドを実装

@Override
public void onFragmentInteraction(String id) {

}

ActionActivityAction

OnNavigationDrawerItemSelected
PlaceholderFragment
    public void onNavigationDrawerItemSelected(int position) {
        // update the main content by replacing fragments
        FragmentManager fragmentManager = getSupportFragmentManager();
        if(position == 0){
            fragmentManager.beginTransaction()
                    .replace(R.id.container, ImageFragment.newInstance(position + 1, R.drawable.hanabatake))
                    .commit();
        }
        else if(position == 1){
            fragmentManager.beginTransaction()
                    .replace(R.id.container, TextFragment.newInstance(position + 1))
                    .commit();
        }
        else if(position == 2){
            fragmentManager.beginTransaction()
                    .replace(R.id.container, ItemFragment.newInstance(position + 1))
                    .commit();
        }

    }

ActivityPlaceholderFragment

ItemFragment

Gist
34



3Fragment!

Fragment便


FragmentFragmentUI使便

Example2 






FragmentFragmentTransactionreplace

onNavigationDrawerItemSelected02replace
if(position == 2){
    fragmentManager.beginTransaction()
            .replace(R.id.container, ImageFragment.newInstance(position + 1, R.drawable.hanabatake))
            .commit();
}
else if(position == 1){
    fragmentManager.beginTransaction()
            .replace(R.id.container, TextFragment.newInstance(position + 1))
            .commit();
}
else if(position == 0){
    fragmentManager.beginTransaction()
            .replace(R.id.container, ItemFragment.newInstance(position + 1))
            .commit();
}

position == 21


Fragment

UI
3replaceview_0view_1view_2
Fragmentreplace

Example3 UI



UIActivity


Actionbar+TabUIActivityUIActivity

TabActivity


TabbedActivity
スクリーンショット 2014-07-18 12.06.40.png
TabActivityActionBarTabs(With ViewPager)
スクリーンショット 2014-07-18 12.07.21.png
TabActivity
MainActivityTabActivityActivionBarsettings
Activity

ActivityonOptionsItemSelected
    @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();
        if (id == R.id.action_settings) {
            Intent intentChengeUi = new Intent();
            intentChengeUi.setClassName(this.getPackageName(), this.getPackageName() + ".MainActivity");

            startActivity(intentChengeUi);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

ActionBarsettingsAcitivity

TabActivityTabActivityFragment

TabActivityFragment


TabActivityViewPagerFragmentPagerAdapterSectionPagerAdapterFragmentPagerAdapterActivity
getItempositionNavigationDrawerPlaceholderFragment


MainActivityPlaceholderFragment


Gist


PlaceholderFragment3FragmentFragmentFragment

fatment_main.xmlfragment_text.xml
gist
3FragmentOnAtattchSection

Gist

Tab3FragmentTabActivityfragment_tab


SectionNumberonAtach
ActivityItemFragment

MainActivityonNavigationDrawerItemSelectedPlaceholderFragment使

PlaceholderFragment
onCreateView3replacePlaceholderFragmentViewFragmentfragment_main.xmlTextView

addaddaddfragmentaddremove
yanzm

TabActivity


3NavigationDrawer
NavigationDrawerPlaceholderFragmentfragment1ViewPagerItemviewID
replaceaddPlaceholderFragmentTagFragmentcontinerview

View.generateViewIdIDAndroid4.2
SupportV4使UtilgenerateViewId使


TabActivity.java
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    int position = getArguments().getInt(ARG_SECTION_NUMBER);

    RelativeLayout rootView = (RelativeLayout)inflater.inflate(R.layout.fragment_tab, container, false);
    FrameLayout layout = (FrameLayout)rootView.getChildAt(0);

    layout.setId(ViewUtil.generateViewId());

    FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
    if(position == 1){
        fragmentManager.beginTransaction()
                .replace(layout.getId(),ImageFragment.newInstance(R.drawable.hanabatake))
                .commit();
    }
    else if(position == 2){
        fragmentManager.beginTransaction()
                .replace(layout.getId(), TextFragment.newInstance())
                .commit();
    }
    else if(position == 3){
        fragmentManager.beginTransaction()
                .replace(layout.getId(), ItemFragment.newInstance())
                .commit();
    }
    return rootView;
}



ItemFragment.OnFragmentInteractionListenerMainActivity

UI3Fragment

device-2014-07-18-165616.png
ActivityPlaceholderFragmentUIActivityFragment

ActivityFragment

Untitled (2).png
onAtatchUINavigationDrawer使Fragment


AndroidStudioFragment
1

Fragment使

Fragment



鹿





 Activity  Fragment 使 @KeithYokoma
 umeda kaoru 
Android FragmentTransaction  yanzm

稿
ViewUtil
Gist:ImageFragment
Gist:TextFragment
Gist:NavigationDrawer
Gist:UI()
540
557
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
540
557