手把手教你打造一個Material Design風格的App(四)

標籤：android   material design   

——接上文。

3.3實現隱藏式瀏覽選單功能表項目的選擇

儘管隱藏式瀏覽選單已經實現了，但是你會發現選擇抽屜清單項目並沒有反應，這是因為我們還沒有實現RecycleView items的點擊監聽。

因為我們在隱藏式瀏覽選單裡有3個菜單（Home，Friends & Messages），所以需要為每一個功能表項目建立一個獨立的Fragment。

（24）在res-->layout裡面，建立一個名為fragment_home.xml的檔案並添加如下代碼。

fragment_home.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"    android:orientation="vertical"    tools:context="androidhive.info.materialdesign.activity.HomeFragment">      <TextView        android:id="@+id/label"        android:layout_alignParentTop="true"        android:layout_marginTop="100dp"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:textSize="45dp"        android:text="HOME"        android:textStyle="bold"/>     <TextView        android:layout_below="@id/label"        android:layout_centerInParent="true"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:textSize="12dp"        android:layout_marginTop="10dp"        android:gravity="center_horizontal"        android:text="Edit fragment_home.xml to change the appearance" /> </RelativeLayout>

（25）在activity包下，建立一個名為HomeFragment.java的類，並添加如下代碼。

HomeFragment.javaimport android.app.Activity;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;  public class HomeFragment extends Fragment {     public HomeFragment() {        // Required empty public constructor    }     @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);     }     @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View rootView = inflater.inflate(R.layout.fragment_home, container, false);          // Inflate the layout for this fragment        return rootView;    }     @Override    public void onAttach(Activity activity) {        super.onAttach(activity);    }     @Override    public void onDetach() {        super.onDetach();    }}

（26）同樣，建立FriendsFragment.java和MessagesFragment.java兩個fragment類，並建立fragment_friends.xml和fragment_messages.xml布局檔案，代碼請參考前兩步。

（27）開啟MainActivity.java並作如下修改。

>displayView()方法會顯示當導覽功能表選中時對應的fragment視圖，這個方法應該在某個導覽功能表選中時，在onDrawerItemSelected()中調用，來展示對應的視圖。

MainActivity.javaimport android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarActivity;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.Toast; public class MainActivity extends ActionBarActivity implements FragmentDrawer.FragmentDrawerListener {     private static String TAG = MainActivity.class.getSimpleName();     private Toolbar mToolbar;    private FragmentDrawer drawerFragment;     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);         mToolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(mToolbar);        getSupportActionBar().setDisplayShowHomeEnabled(true);         drawerFragment = (FragmentDrawer)                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);        drawerFragment.setDrawerListener(this);         // display the first navigation drawer view on app launch        displayView(0);    }      @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_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;        }         if(id == R.id.action_search){            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();            return true;        }         return super.onOptionsItemSelected(item);    }     @Override    public void onDrawerItemSelected(View view, int position) {            displayView(position);    }     private void displayView(int position) {        Fragment fragment = null;        String title = getString(R.string.app_name);        switch (position) {            case 0:                fragment = new HomeFragment();                title = getString(R.string.title_home);                break;            case 1:                fragment = new FriendsFragment();                title = getString(R.string.title_friends);                break;            case 2:                fragment = new MessagesFragment();                title = getString(R.string.title_messages);                break;            default:                break;        }         if (fragment != null) {            FragmentManager fragmentManager = getSupportFragmentManager();            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();            fragmentTransaction.replace(R.id.container_body, fragment);            fragmentTransaction.commit();             // set the toolbar title            getSupportActionBar().setTitle(title);        }    }}

好了，再次運行App，你可以看到選擇導覽功能表起作用了，點擊會在toolbar下方顯示對應的視圖。

全文完。

原文地址：http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

手把手教你打造一個Material Design風格的App(四)