什么是低 API 材料设计中导航抽屉的最佳示例

Question

我尝试查找更多信息，了解如何使用 Material Desing 的指南创建最佳导航抽屉面板。

谷歌推荐页面Creating a Navigation Drawer。此示例基于 Support Library v4。

还有关于 v7 AppCompat v21 — Material Design for Pre-Lollipop Devices! 的链接。这仅适用于 Android API 21+。我不能在较低的操作系统版本中使用这个 Material Desing，因为如果我在 project.properties 中设置 target=android-20（或更少），我会在 Eclipse 中得到错误（几百个）：

C:\<workspace>\android-support-v7-appcompat\res\values-v21\styles_base.xml:75: error: Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.ActionButton'
....
:( several hundred error in 'values-v21' directory
....

我使用低 Android API 的功能，这些功能在 Android API 21+ 中已被弃用或未定义。但我需要在低 API (14+) 中支持 Material Design。

请给出在低 Android API 14+ 上创建 Navigation Drawer 的示例。

Answer 1

将此作为依赖项：

 compile "com.android.support:appcompat-v7:21.0.2" (or use newer)

布局：

     <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/toolbar"
    android:id="@+id/mytoolbardrawer"
    />
<FrameLayout
    android:id="@+id/frame_container"
    android:layout_width="match_parent"
    android:layout_below="@id/mytoolbardrawer"
    android:layout_height="match_parent"
    />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rel_drawer"
    android:layout_width="304dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="171dp"
        android:id="@+id/img_drawer"
        android:scaleType="centerCrop"
        android:src="@drawable/photo_4"/>
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_below="@id/img_drawer"
        android:layout_width="304dp"
        android:listSelector="@drawable/list_selector"
        android:checkable="true"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:dividerHeight="1dp"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        android:background="@android:color/white" />

</RelativeLayout>

</android.support.v4.widget.DrawerLayout>

抽屉活动：

        import android.content.res.Configuration;
        import android.graphics.Color;
        import android.os.Bundle;
        import android.support.v4.app.Fragment;
        import android.support.v4.app.FragmentManager;
        import android.support.v4.widget.DrawerLayout;
        import android.support.v7.app.ActionBarActivity;
        import android.support.v7.app.ActionBarDrawerToggle;
        import android.support.v7.widget.Toolbar;
        import android.text.Html;
        import android.text.SpannableString;
        import android.util.Log;
        import android.view.Menu;
        import android.view.MenuItem;
        import android.view.View;
        import android.widget.AdapterView;
        import android.widget.ArrayAdapter;
        import android.widget.ListView;
        import android.widget.RelativeLayout;


        public class DrawerActivity extends ActionBarActivity {

            Toolbar t;
            private DrawerLayout mDrawerLayout;
            private ListView mDrawerList;
            private RelativeLayout mRelativeLayout;
            private ActionBarDrawerToggle mDrawerToggle;

            private CharSequence mDrawerTitle,mTitle;

            private String[] navMenuItems;
            private SpannableString[] navmenuItems;
            private ArrayAdapter<SpannableString> adapter;

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_drawer);
                t=(Toolbar)findViewById(R.id.mytoolbardrawer);
                setSupportActionBar(t);

                initStuffs();

                if (savedInstanceState == null) {
                   new SliderMenuClickListener().displayView(0);
                }
            }

            private void initStuffs() {
                mTitle=mDrawerTitle=getTitle();
                navMenuItems=getResources().getStringArray(R.array.Titles);
                mDrawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
                mDrawerList=(ListView)findViewById(R.id.list_slidermenu);
                mRelativeLayout=(RelativeLayout)findViewById(R.id.rel_drawer);

                navmenuItems=new SpannableString[navMenuItems.length];
                for(int i=0;i<navMenuItems.length;i++) {
                    navmenuItems[i] = new SpannableString(Html.fromHtml("<font color='#000000'>" + navMenuItems[i] + "</font>"));
                }
                adapter=new ArrayAdapter<SpannableString>(DrawerActivity.this,android.R.layout.simple_list_item_1,navmenuItems);
                mDrawerList.setAdapter(adapter);

                getSupportActionBar().setDisplayHomeAsUpEnabled(true);
                getSupportActionBar().setHomeButtonEnabled(true);

                mDrawerToggle=new ActionBarDrawerToggle(DrawerActivity.this,mDrawerLayout,t,R.string.app_name,R.string.app_name){
                    public void onDrawerClosed(View view){
                        getSupportActionBar().setTitle(mTitle);
                        invalidateOptionsMenu();
                    }
                    public void onDrawerOpened(View view){
                        getSupportActionBar().setTitle(mDrawerTitle);
                        invalidateOptionsMenu();
                    }
                };
                mDrawerLayout.setDrawerListener(mDrawerToggle);
                mDrawerList.setOnItemClickListener(new SliderMenuClickListener());
            }


            @Override
            public boolean onCreateOptionsMenu(Menu menu) {
                // Inflate the menu; this adds items to the action bar if it is present.
                getMenuInflater().inflate(R.menu.drawer, menu);
                return true;
            }

            @Override
            public boolean onPrepareOptionsMenu(Menu menu) {
                boolean drawerOpen=mDrawerLayout.isDrawerOpen(mRelativeLayout);
                menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
                return super.onPrepareOptionsMenu(menu);
            }

            @Override
            public void onConfigurationChanged(Configuration newConfig) {
                super.onConfigurationChanged(newConfig);
                mDrawerToggle.onConfigurationChanged(newConfig);
            }

            @Override
            protected void onPostCreate(Bundle savedInstanceState) {
                super.onPostCreate(savedInstanceState);
                mDrawerToggle.syncState();
            }

            @Override
            public void setTitle(CharSequence title) {
                super.setTitle(title);
                mTitle=title;
                getSupportActionBar().setTitle(mTitle);
            }

            @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.
                if (mDrawerToggle.onOptionsItemSelected(item)) {
                    return true;
                }
                int id = item.getItemId();
                if (id == R.id.action_settings) {
                    return true;
                }
                return super.onOptionsItemSelected(item);
            }

            private class SliderMenuClickListener implements ListView.OnItemClickListener {

                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id){
                    displayView(position);
                }

                private void displayView(int position) {
                    Fragment fragment=null;
                    switch (position){
                        case 0:
                                fragment=new HomeFragment();
                                break;
                        case 1:
                            fragment=new HomeFragment();
                            break;
                        case 2:
                            fragment=new HomeFragment();
                            break;
                        case 3:
                            fragment=new HomeFragment();
                            break;
                        default:break;
                    }
                    if(fragment!=null){
                        FragmentManager fm=getSupportFragmentManager();
                        fm.beginTransaction().replace(R.id.frame_container,fragment).commit();
                        mDrawerList.setItemChecked(position,true);
                        mDrawerList.setSelection(position);
                        setTitle(navMenuItems[position]);
                        mDrawerLayout.closeDrawer(mRelativeLayout);
                    }else{
                        Log.e("DrawerActivity","Error creating fragment");
                    }
                }

            }
        }