对Translucent再次进行补充更新，完成NavigationView的探究

Siwen666 · Feb 25, 2016 · a4d9bf4 · a4d9bf4
1 parent e091edd
commit a4d9bf4
Show file tree

Hide file tree

Showing 14 changed files with 216 additions and 41 deletions.
diff --git a/build.gradle b/build.gradle
@@ -24,5 +24,5 @@ dependencies {
     testCompile 'junit:junit:4.12'
     compile 'com.android.support:appcompat-v7:23.1.1'
     compile 'com.android.support:support-v4:23.1.1'
-    compile 'com.android.support:design:23.1.0'
+    compile 'com.android.support:design:23.1.1'
 }
diff --git a/note/00_AndroidSystemUI：TranslucentBar特性的使用.md b/note/00_AndroidSystemUI：TranslucentBar特性的使用.md
@@ -284,4 +284,35 @@ public abstract class TranslucentBarBaseActivity extends AppCompatActivity {
 
 ```
 
-所有需要实现效果的界面继承以上的父类，并实现 **getLayoutResId** 抽象方法即可，就可以不用在布局文件中不断做重复操作了，具体代码详见工程中的 **TranslucentBarBaseActivity** 和 **BestTranslucentBarActivity**。
+所有需要实现效果的界面继承以上的父类，并实现 **getLayoutResId** 抽象方法即可，就可以不用在布局文件中不断做重复操作了，具体代码详见工程中的 **TranslucentBarBaseActivity** 和 **BestTranslucentBarActivity**。
+
+## 补充更新（2016-02-25）
+
+近几天在琢磨 Material Design 的一些新控件效果，意外的发现上面提到的第二种方式，在将原 **values-v21/style.xml**
+
+```xml
+
+<style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+	....
+	.... 
+	<item name="android:statusBarColor">@color/color_31c27c</item>
+
+</style>
+
+```
+
+换成
+
+```xml
+
+<style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+	....
+	.... 
+	<item name="android:statusBarColor">@android:color/transparent</item>
+
+</style>
+
+
+```
+
+之后，依旧可以实现同样的效果。那么，到了这里你就可以发现，上面提到的两种方式从本质上其实是殊途同归（最终总结得到的就是一种方式）！
diff --git a/note/02_AndroidSystemUI：NavigationView和DrawerLayout的使用.md b/note/02_AndroidSystemUI：NavigationView和DrawerLayout的使用.md
diff --git a/note/02_AndroidSystemUI：开始使用NavigationDrawer.md b/note/02_AndroidSystemUI：开始使用NavigationDrawer.md
@@ -0,0 +1,40 @@
+# 谈谈我眼中的 NavigationDrawer 
+
+
+
+## DrawerLayout 
+
+SlidingMenu 开源项目：https://github.com/jfeinstein10/SlidingMenu
+
+SlidingDrawer 在 API 17 上被deprecated了
+
+介绍一些比较常用的API，有很多API用了没效果，咋回事？？？？？
+
+默认的图标会变成灰色的。。
+
+推荐第三方的库 https://github.com/mikepenz/MaterialDrawer
+
+参考文章：
+
+http://myihsan.farbox.com/post/use-navigation-view-to-make-navigation-drawer
+
+https://guides.codepath.com/android/Fragment-Navigation-Drawer
+
+http://developer.android.com/training/implementing-navigation/nav-drawer.html
+
+http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content
+
+http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
+
+http://developer.android.com/reference/android/support/design/widget/NavigationView.html
+
+左上角的动画效果：http://www.jianshu.com/p/3fe2acac0ddb
+
+
+使用 ScrimInsetsFrameLayout 来仿造实现网易的效果
+
+## 需要注意的问题
+
+DrawerLayout 在设置 android:layout_width="wrap_content" 的时候会闪退报错
+
+需要引入最新的 库，引入 compile 'com.android.support:design:23.1.1' 正常 ，，，但是 compile 'com.android.support:design:23.1.0' 会报错
diff --git a/src/main/AndroidManifest.xml b/src/main/AndroidManifest.xml
@@ -39,7 +39,8 @@
             android:label="@string/simple_drawer" />
         <activity
             android:name=".ui.activity.navigation.SimpleNavigationDrawerActivity"
-            android:label="@string/simple_navigation_drawer" />
+            android:label="@string/simple_navigation_drawer"
+            android:theme="@style/Theme.Translucent.Navigation" />
     </application>
 
 </manifest>
diff --git a/src/main/java/com/clock/systemui/ui/activity/navigation/SimpleNavigationDrawerActivity.java b/src/main/java/com/clock/systemui/ui/activity/navigation/SimpleNavigationDrawerActivity.java
@@ -1,21 +1,58 @@
 package com.clock.systemui.ui.activity.navigation;
 
-import android.support.v7.app.AppCompatActivity;
+import android.content.Context;
+import android.os.Build;
 import android.os.Bundle;
+import android.support.design.widget.NavigationView;
+import android.support.v4.widget.DrawerLayout;
+import android.support.v7.app.ActionBar;
+import android.support.v7.app.AppCompatActivity;
+import android.view.LayoutInflater;
+import android.view.MenuItem;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.Window;
+import android.view.WindowManager;
+import android.widget.LinearLayout;
+import android.widget.Toast;
 
 import com.clock.systemui.R;
+import com.clock.systemui.ui.activity.base.BaseActivity;
 
 /**
  * Navigation Drawer Simple Demo Code
  *
  * @author clock
  * @since 2016-02-24
  */
-public class SimpleNavigationDrawerActivity extends AppCompatActivity {
+public class SimpleNavigationDrawerActivity extends BaseActivity {
+
+    private DrawerLayout mDrawer;
+    private NavigationView mNavigationView;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_simple_navigation_drawer);
+
+        mDrawer = (DrawerLayout) findViewById(R.id.drawer);
+
+        mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
+        mNavigationView.setItemIconTintList(null);//设置菜单图标的颜色
+        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
+            @Override
+            public boolean onNavigationItemSelected(MenuItem item) {
+                int menuItemId = item.getItemId();
+                if (menuItemId == R.id.subitem_01) {
+                    Toast.makeText(SimpleNavigationDrawerActivity.this, "sub item 01", Toast.LENGTH_SHORT).show();
+
+                } else if (menuItemId == R.id.subitem_04) {
+                    Toast.makeText(SimpleNavigationDrawerActivity.this, "sub item 04", Toast.LENGTH_SHORT).show();
+
+                }
+                mDrawer.closeDrawers();
+                return true;
+            }
+        });
     }
 }
diff --git a/src/main/res/layout/activity_simple_navigation_drawer.xml b/src/main/res/layout/activity_simple_navigation_drawer.xml
@@ -1,25 +1,32 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/drawer"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:background="@color/color_cd3e3a">
 
-    <android.support.v4.widget.DrawerLayout
+    <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:background="@color/color_cd3e3a"
+        android:orientation="vertical">
 
         <TextView
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:gravity="center"
-            android:text="NavigationDrawer" />
+            android:text="NavigationDrawerContent"
+            android:textColor="@android:color/white" />
+    </LinearLayout>
 
-        <android.support.design.widget.NavigationView
-            android:id="@+id/nv_main_navigation"
-            android:layout_width="wrap_content"
-            android:layout_height="match_parent"
-            android:layout_gravity="start"
-            app:headerLayout="@layout/navigation_drawer_header"
-            app:menu="@menu/navigation_drawer_menu" />
-    </android.support.v4.widget.DrawerLayout>
-</RelativeLayout>
+    <android.support.design.widget.NavigationView
+        android:id="@+id/navigation_view"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:layout_gravity="start"
+        android:fitsSystemWindows="true"
+        app:headerLayout="@layout/navigation_drawer_header"
+        app:menu="@menu/navigation_drawer_menu" />
+
+</android.support.v4.widget.DrawerLayout>
diff --git a/src/main/res/layout/navigation_drawer_content.xml b/src/main/res/layout/navigation_drawer_content.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/color_cd3e3a"
+    android:orientation="vertical">
+
+    <TextView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:gravity="center"
+        android:text="NavigationDrawerContent"
+        android:textColor="@android:color/white" />
+</LinearLayout>
diff --git a/src/main/res/layout/navigation_drawer_header.xml b/src/main/res/layout/navigation_drawer_header.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_height="250dp"
     android:background="@color/color_512da8">
 
     <TextView
@@ -10,7 +10,7 @@
         android:layout_alignParentBottom="true"
         android:layout_alignParentLeft="true"
         android:layout_margin="10dp"
-        android:text="Clock"
+        android:text="HeaderLayout"
         android:textColor="@android:color/white"
         android:textSize="18sp" />
 </RelativeLayout>
diff --git a/src/main/res/menu/navigation_drawer_menu.xml b/src/main/res/menu/navigation_drawer_menu.xml
@@ -1,4 +1,52 @@
 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 
+    <group android:checkableBehavior="single">
+        <item
+            android:id="@+id/item_green"
+            android:icon="@mipmap/green"
+            android:title="Green" />
+        <item
+            android:id="@+id/item_blue"
+            android:icon="@mipmap/blue"
+            android:title="Blue" />
+        <item
+            android:id="@+id/item_pink"
+            android:icon="@mipmap/pink"
+            android:title="Pink" />
+    </group>
+
+    <item android:title="SubItems">
+        <menu>
+            <item
+                android:id="@+id/subitem_01"
+                android:icon="@mipmap/ic_launcher"
+                android:title="SubItem01" />
+            <item
+                android:id="@+id/subitem_02"
+                android:icon="@mipmap/ic_launcher"
+                android:title="SubItem02" />
+            <item
+                android:id="@+id/subitem_03"
+                android:icon="@mipmap/ic_launcher"
+                android:title="SubItem03" />
+        </menu>
+    </item>
+
+    <item android:title="SubItems">
+        <menu>
+            <item
+                android:id="@+id/subitem_04"
+                android:icon="@mipmap/ic_launcher"
+                android:title="SubItem04" />
+            <item
+                android:id="@+id/subitem_05"
+                android:icon="@mipmap/ic_launcher"
+                android:title="SubItem05" />
+            <item
+                android:id="@+id/subitem_06"
+                android:icon="@mipmap/ic_launcher"
+                android:title="SubItem06" />
+        </menu>
+    </item>
 </menu>
diff --git a/src/main/res/values-v19/styles.xml b/src/main/res/values-v19/styles.xml
@@ -18,6 +18,11 @@
         <item name="android:windowTranslucentNavigation">true</item>
     </style>
 
+    <style name="Theme.Translucent.Navigation" parent="Theme.AppCompat.Light.DarkActionBar">
+        <item name="android:windowTranslucentStatus">true</item>
+        <item name="android:windowTranslucentNavigation">true</item>
+    </style>
+
     <style name="Theme.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:windowTranslucentStatus">true</item>

diff --git a/src/main/res/values-v21/styles.xml b/src/main/res/values-v21/styles.xml
@@ -18,7 +18,13 @@
     <style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         <item name="android:windowTranslucentStatus">false</item>
         <item name="android:windowTranslucentNavigation">true</item>
-        <item name="android:statusBarColor">@color/color_31c27c</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+    </style>
+
+    <style name="Theme.Translucent.Navigation" parent="Theme.AppCompat.Light.DarkActionBar">
+        <item name="android:windowTranslucentStatus">false</item>
+        <item name="android:windowTranslucentNavigation">true</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
     </style>
 
     <style name="Theme.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">

diff --git a/src/main/res/values/colors.xml b/src/main/res/values/colors.xml
@@ -13,4 +13,5 @@
     <color name="color_4bae4f">#4bae4f</color>
     <color name="color_2095f2">#2095f2</color>
     <color name="color_512da8">#512da8</color>
+    <color name="color_cd3e3a">#cd3e3a</color>
 </resources>
diff --git a/src/main/res/values/styles.xml b/src/main/res/values/styles.xml
@@ -16,6 +16,10 @@
 
     </style>
 
+    <style name="Theme.Translucent.Navigation" parent="AppTheme">
+
+    </style>
+
     <style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:textSize">20sp</item>
         <item name="android:textColorPrimary">@color/color_red</item>