Android wear 之 导航抽屉（WearableNavigationDrawer ）

先看官网效果图：

这是我做的效果图：

咳咳，差别挺大，不过还好一样的效果。

官网也有教程，不过写的有点难懂，这是网址（https://developer.android.com/training/wearables/ui/ui-nav-actions.html#initialize）。

下面正式开始！

实现方式很简单WearableNavigationDrawer + fragment 就可以了。说到这 想必很多看过官网文档的老铁就恍然大悟了。

wear2.0中官方提供了一个叫WearableNavigationDrawer的容器，效果就如上图的下拉抽屉（菜单）。

首先上布局代码：

activity_wearabledrawer.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.drawer.WearableDrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:deviceIds="wear">

    <!-- 隐藏下的 抽屉详细内容 -->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <!-- 从上向下拉下来的抽屉 -->
    <android.support.wearable.view.drawer.WearableNavigationDrawer
        android:id="@+id/top_navigation_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.wearable.view.drawer.WearableDrawerLayout>

fragment1.xml:

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

    <TextView
        android:id="@+id/fragment1_tv"
        android:text="我是菜单1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

fragment2.xml 跟 fragment1一样的。参考1就行。

下面是主Activity的代码了：

/**
 * 项目名：  MyApplication1042
 * 包名：    com.example.acb.myapplication104
 * 文件名:   WearableDrawerActivity
 * 创建者:   zmn
 * 创建时间:  2017/2/14 16:47
 * 描述：    TODO 导航抽屉
 */
public class WearableDrawerActivity extends WearableActivity  {

    private static final String TAG = "WearableDrawerActivity";


    private WearableDrawerLayout mWearableDrawerLayout;
    private WearableNavigationDrawer mWearableNavigationDrawer;
    private WearableActionDrawer mWearableActionDrawer;

    private LinearLayout lin ;
    private WearableDrawerView mWearableDrawerView;
    private NestedScrollView mNestedScrollView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wearabledrawer);
        mNestedScrollView = (NestedScrollView) findViewById(R.id.content);
        lin = (LinearLayout) findViewById(R.id.linear_layout);

        // Main Wearable Drawer Layout that wraps all content
        mWearableDrawerLayout = (WearableDrawerLayout) findViewById(R.id.drawer_layout);
        mWearableDrawerLayout.setDrawerStateCallback(new WearableDrawerLayout.DrawerStateCallback() {
            @Override
            public void onDrawerOpened(View view) {
                Log.i(TAG, view.toString()+"抽屉打开，每当抽屉出现的时候，为打开");
            }

            @Override
            public void onDrawerClosed(View view) {
                Log.i(TAG,view.toString()+"抽屉关闭，每当抽屉消失，为关闭");
            }

            @Override
            public void onDrawerStateChanged(@WearableDrawerView.DrawerState int i) {
                Log.i(TAG,i+"抽屉状态改变，抽屉被拉下或拉上为改变，左右滑动不改变");
            }
        });

        // Top Navigation Drawer
        mWearableNavigationDrawer = (WearableNavigationDrawer) findViewById(R.id.top_navigation_drawer);
        mWearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this));

    }


    //适配器
    private class YourImplementationNavigationAdapter extends WearableNavigationDrawer.WearableNavigationDrawerAdapter {

        private Context context;
        private LayoutInflater inflater;

        public YourImplementationNavigationAdapter(WearableDrawerActivity wearableDrawerActivity) {
            this.context = wearableDrawerActivity;
            this.inflater=LayoutInflater.from(wearableDrawerActivity);
        }

        //抽屉图片下面的文字
        @Override
        public String getItemText(int i) {
            return i+"";
        }

        //显而易见 抽屉上的图图
        @Override
        public Drawable getItemDrawable(int i) {

            Resources res = getResources();
            Drawable drawable = res.getDrawable(R.drawable.clear);//id为R.drawable.图片名称
            return drawable;

        }

        //切换抽屉时触发
        @Override
        public void onItemSelected(int i) {
            Log.i(TAG,i+"");

            //在item变化的时候直接替换掉fragment
            FragmentManager fm = getFragmentManager();
            switch (i){
                case 0 :
                    Fragment f = new ContentFragment();
//                    Bundle b = new Bundle();
//                    b.putString("text","1");
//                    f.setArguments(b);

                    fm.beginTransaction().replace(R.id.linear_layout,f).commit();
                    break;
                case 1 :
                    Fragment f2 = new Content2Fragment();
//                    Bundle b = new Bundle();
//                    b.putString("text","1");
//                    f.setArguments(b);

                    fm.beginTransaction().replace(R.id.linear_layout,f2).commit();
                    break;
            }
        }

        //fragment数目
        @Override
        public int getCount() {
            return   2;
        }
    }
}

上面代码做了一些布局注册、adapter配置和设置的操作。需要关注的地方都用注释标明。

还有唯一需要注意的地方就是数据的模拟，我在这里模拟数据直接写到了adapter里，大家要注意这里需要自己写下。其实这个adapter跟普通的adapter差不多，见名知意。

最后是ContentFragment 和 Content2Fragment：

/**
 * 项目名：  MyApplication1042
 * 包名：    com.example.acb.myapplication104
 * 文件名:   contentFragment
 * 创建者:   zmn
 * 创建时间:  2017/2/27 17:24
 * 描述：    TODO
 */
public class ContentFragment extends Fragment {


    private TextView tv ;

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

       View view = inflater.inflate(R.layout.fragment1,container,false);

        return view;

    }
}

用过fragment的人应该很熟悉了。就不在多言。