Two Pane Layout



One Pane on small screen: Explicitly define Static Fragment in main layout; Detailed (second) screen uses Dynamic (container).


Two Pane on large screen: Explicitly define Static Fragment in Left pane; Right pane Dynamic (container).


Implementation:

  • Same fragment is added to the (placeholder) container defined for second screen in both the one and two pane layout.
  • Fragment should go thru its Activity and the Activity must know how to dispatch the event to other Fragments based on one/two pane layout.
  • So, the activity that hosts the Fragment implements onItemSelected() callback, which is called by Fragment when setOnItemClickListener/onItemClick.
  • The callback in Activity either launches DetailActivity or creates DetailFragment for One or Two pane mode, respectively.
  • Information about the selected item (locationDateUri) is supplied to the DetailFragment as a parcelable bundle argument.
 
public class ForecastFragment extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
 
            @Override
            public void onItemClick(AdapterView adapterView, View view, int position, long l) {
                :
                ((Callback)getActivity()).onItemSelected(locationDateUri);
            }
        }
    }
    /**
     * A callback interface that all activities containing this fragment must
     * implement. This mechanism allows activities to be notified of item selections.
     */
    public interface Callback {
        /**
         * DetailFragmentCallback for when an item has been selected.
         */
        public void onItemSelected(Uri dateUri);
    }
}
 
public class MainActivity   extends ActionBarActivity
                            implements ForecastFragment.Callback {
 
    protected void onCreate(Bundle savedInstanceState) {
        if (findViewById(R.id.weather_detail_container) != null) {
            // The detail container view will be present only in the large-screen layouts
            // (res/layout-sw600dp). If this view is present, then the activity should be
            // in two-pane mode.
            mTwoPane = true;
        }
    }
    public void onItemSelected(Uri locationDateUri) {
        if (mTwoPane) {
            // For Two-Pane: Prepare arguments & replace DetailFragment dynamically
            Bundle args = new Bundle();
            args.putParcelable(DetailFragment.LOCATION_DATE_URI, locationDateUri);
            DetailFragment fragment = new DetailFragment();
            fragment.setArguments(args);    // setArguments() must be done before committing transaction
 
            getSupportFragmentManager().beginTransaction()
                    .replace(R.id.weather_detail_container, fragment, DETAILFRAGMENT_TAG)
                    .commit();
        } else {
            // For One-Pane: Launch DetailActivity, which in turn will create DetailFragment dynamically
            Intent intent = new Intent(this, DetailActivity.class)
                    .setData(locationDateUri);
            startActivity(intent);
        }
    }
}
 
// For One-Pane: Prepare arguments & add DetailFragment dynamically
public class DetailActivity extends ActionBarActivity {
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);
        if (savedInstanceState == null) {
            Bundle arguments = new Bundle();
            arguments.putParcelable(DetailFragment.LOCATION_DATE_URI, getIntent().getData());
            DetailFragment fragment = new DetailFragment();
            fragment.setArguments(arguments);    // setArguments() must be done before committing transaction
 
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.weather_detail_container, fragment)
                    .commit();
        }
    }
}
 
 

No comments:

Post a Comment