Android自定義NavigationController - 安卓自定義導航欄 --【WJ】

注意:

本文主要介紹安卓自定義頂部導航欄（iOS中成為NavigationBar）；寫的不盡如人意的地方，請見諒~

概述如下：

  • 環境 ：Android Studio 1.4 for Mac
  • 語言 ：如果我沒猜錯的話，應該是Java
  • 特點 ：簡單、直接、暴力，絕對讓你有快感！！！

展示

1.效果展示
自定義導航欄.gif
2.工程目錄結構
目錄結構.png
簡要說明

主要用到的文件已為大家用黃色的方框標出來了；

- Java類
MainActivity：還用解釋？
ShowNavigationActivity：展示自定義Navigation的類（iOS中可以理解為在ViewController中調用）
WJNavigationBarActivity：自定義Navigation

- 布局
activity_main：不解釋
activity_shownavigation.xml：ShowNavigationActivity.java綁定的頁面
activity_wjnavigationbar.xml：自定義Navigation布局頁面

- 資源（我覺得這么叫就是對的！！！）
navigationbar_left_item_selector.xml：NavigationItemLetfButton
navigationbar_right_item_selector.xml：NavigationItemRightButton
各種以.png結尾的就是圖片而已

1.開始寫布局

1.1 -- 主頁面

activity_main.xml

<LinearLayout    
              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:paddingLeft="@dimen/activity_horizontal_margin"
              android:paddingRight="@dimen/activity_horizontal_margin"
              android:paddingTop="@dimen/activity_vertical_margin"
              android:paddingBottom="@dimen/activity_vertical_margin"
              tools:context=".MainActivity">

      <Button
              android:id="@+id/navigation_btn"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="展示NavigationBar"
              android:background="#aa0d3f"/>

</LinearLayout>
簡要說明

就是一個按鈕而已

1.2 -- 展示頁面

activity_shownavigation.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
              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">

      <com.example.apple.complete_stretchlistview_for_wangjun.showCustomNavigationBar.WJNavigationBarActivity
              android:id="@+id/navi_main"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"/>

      <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello World"/>

</LinearLayout>
簡要說明

把自定義Navigation添加到你要使用的頁面中

1.3 -- Navigation布局頁面

activity_wjnavigationbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/rl_chat_title"
              android:layout_width="match_parent"
              android:layout_height="50dp"
              android:background="#91c2ae"
              android:layout_alignParentTop="true">

      <!-- navigationItemLeftButton -->
      <ImageView
              android:id="@+id/iv_navi_back"
              android:layout_width="25dp"
              android:layout_height="25dp"
              android:background="@drawable/navigationbar_left_item_selector"
              android:layout_marginLeft="10dp"
              android:layout_marginStart="10dp"
              android:layout_centerVertical="true"
              android:layout_alignParentLeft="true"
              android:layout_alignParentStart="true"/>

      <!-- navigationItemTitle -->
      <TextView
              android:id="@+id/tv_navi_title"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerHorizontal="true"
              android:layout_centerVertical="true"
              android:text="自定義NavigationBar"
              android:textSize="15dp"/>

      <!-- navigationItemRightButton -->
      <ImageView
              android:id="@+id/iv_navi_right"
              android:layout_width="25dp"
              android:layout_height="25dp"
              android:background="@drawable/navigationbar_right_item_selector"
              android:clickable="true"
              android:layout_centerVertical="true"
              android:layout_alignParentRight="true"
              android:layout_alignParentEnd="true"
              android:layout_marginRight="10dp"
              android:layout_marginEnd="10dp"/>

</RelativeLayout>
簡要說明

這個頁面采用的是相對布局，我本人是很中意這種布局的，因為和Masonry很像

1.3 -- 資源

navigationbar_left_item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
      <item android:state_pressed="false" android:drawable="@drawable/navi_btn_back_n"/>
      <item android:state_pressed="true" android:drawable="@drawable/navi_btn_back_s"/>
</selector>

navigationbar_rigt_item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
      <item android:state_pressed="false" android:drawable="@drawable/navi_btn_right_n"/>
      <item android:state_pressed="true" android:drawable="@drawable/navi_btn_right_s"/>
</selector>
簡要說明

這個資源的xml主要作用是讓按鈕的icon有兩種效果，一個是默認效果，一個是選中效果；
在1.2頁面布局中有所引用，如下：

android:background="@drawable/navigationbar_left_item_selector"
android:background="@drawable/navigationbar_right_item_selector"

2.開始寫代碼

2.1 MainActivity.java 

public class MainActivity extends AppCompatActivity
{
      private Button navigation_btn;                  /// 展示自定義NavigationBar

      @Override
      protected void onCreate(Bundle savedInstanceState)
      {
            super.onCreate(savedInstanceState); 
            setContentView(R.layout.activity_main);
            setTitle("做著玩的");

            initView();                               /// 初始化控件
            selectorMethod();                         /// 點擊事件
      }

      /*** * 初始化控件 */
      public void initView()
      {
            navigation_btn = (Button) findViewById(R.id.navigation_btn);
      }

      /*** * 按鈕點擊事件 */
      public void selectorMethod()
      {
            // 展示自定義NavigationBar
            navigation_btn.setOnClickListener(new View.OnClickListener() {
                  @Override
                  public void onClick(View view) {
                  System.out.println("展示自定義NavigationBar");
                  // 跳轉頁面
                  Intent intent = new Intent(MainActivity.this, ShowNavigationActivity.class);
                  startActivity(intent);
                  }
            });
      }
}

2.2 ShowNavigationActivity.java 

public class ShowNavigationActivity extends Activity
{
      private WJNavigationBarActivity wjNavigationBarActivity;      // 調用自定義Navigation的Java類

      @Override
      protected void onCreate(Bundle savedInstanceState)
      {
            super.onCreate(savedInstanceState); 
            setContentView(R.layout.activity_shownavigation);

            initView();                               /// 初始化控件
      }

      /*** * 初始化 */
      public void inieView()
      {
            wjNavigationBarActivity = (WJNavigationBarActivity) super.findViewById(R.id.navi_main);
            wjNavigationBarActivity.setTitle("自定義導航欄");
            // Java中叫回調，iOS中叫Block
            wjNavigationBarActivity.setClickCallback(new WJNavigationBarActivity.ClickCallback() {

                  /*** * 返回按鈕 */
                  @Override
                  public void onBackClick() {
                        System.out.println("返回按鈕");
                        System.out.println("寫你的邏輯唄~");
                  }
                  /*** * 右側按鈕 */
                  @Override
                  public void onRightClick() {
                        System.out.println("右側按鈕");
                        System.out.println("寫你的邏輯唄~");
                  }
            }
      }
}

2.3 WJNavigationBarActivity.java 

public class WJNavigationBarActivity extends RelativeLayout implements View.OnClickListener
{
      private ImageView iv_navi_back;                // 返回按鈕
      private TextView tv_navi_title;                // 中間的標題
      private ImageView iv_navi_right;               // 右邊的按鈕

      public WJNavigationBarActivity(Context context)
      {
            this(context,null);
      }

      public WJNavigationBarActivity(Context context,AttributeSet attrs)
      {
            super(context,attrs);
            
            View view  = LayoutInflater.from(context).inflate(R.layout.activity_wjnavigationbar,this,true);

            iv_navi_back = (ImageView) findViewById(R.id.iv_navi_back);
            iv_navi_back.setOnClickListener(this);
            
            tv_navi_title = (TextView) findViewById(R.id.tv_navi_title);

            iv_navi_right = (ImageView) findViewById(R.id.iv_navi_right);
            iv_navi_right.setOnClickListener(this);
      }

      /***
       * 獲取返回按鈕
       * @return iv_navi_back
       */
      public ImageView getIv_navi_back()
      {
            return iv_navi_back;
      }

      /***
       * 獲取標題
       * @return tv_navi_title
       */
      public TextView getTv_navi_title()
      {
            return tv_navi_title;
      }
    
      /***
       * 設置標題
       * @param title
       */
      public void setTitle(String title)
      {
            tv_navi_title.setText(title);
      }

     /***
      * 獲取右邊的按鈕
      * @return iv_navi_right
      */
      public ImageView getIv_navi_right()
      {
            return iv_navi_right;
      }

      private ClickCallback callback;                 // 聲明回調函數

     /***
      * 設置按鈕點擊回調的接口
      * @param callback
      */
      public void setClickCallback(ClickCallback callback)
      {
            this.callback = callback;
      }

     /***
      * 導航欄點擊回調接口 -- Block中的回調方法
      * 如若需要標題可點擊,可再添加
      */
      public static interface ClickCallback
      {
            void onBackClick();
            void onRightClick();
      }

     /***
      * 點擊事件
      */
      @Override
      public void onClick(View v)
      {
            int id = v.getId();

            if (id == R.id.iv_navi_back)
            {
                  callback.onBackClick();
                  return;
            }
            if (id == R.id.iv_navi_right)
            {
                  callback.onRightClick();
                  return;
            }
      }
}
簡要說明

這個類你可以理解為一個接口類，哪用哪調用唄，畢竟在安卓中我還是個小Baby（真TM無恥）；
我在想，安卓肯定有一個和iOS一樣的全局設置Navigation的方法，只是我不知道，所以我是小baby~~

icon資源地址
鏈接：https://share.weiyun.com/1fe7867cfe261de78a6604c8a5dfe9fa （密碼：d3Cf9J）

總結

希望大家喜歡我寫的東西，轉發收藏什么的，多多益善~
后面有時間的話，我會在這篇文章中加上相對完整和人性化的東西.
如果我找到設置全局Navigation的方法，我就會添加

  1. wjNavigationBarActivity.show( )
  2. wjNavigationBarActivity.dismiss( )

最后，如果你有更好的，請回復我，并粘貼你的資料地址。
有事私信
WangJun 20161228

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25贊 708
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,877評論 22贊 665
  • 今天獲準可以從青島回京，很是興奮，搭上一量出租車從城陽區奔赴青島站，司機是個不錯的人，聊了很多青島，城市，以及他年...
    Emiedon閱讀 186評論 0贊 0
  • 移動互聯網時代，企業的推廣方法是，決定企業發展的生死棋。有80%的企業家通常只關注如何加大推廣預算，卻從來沒有去思...
    萬杰博客閱讀 1,123評論 2贊 3
  • 聽 是孩童銀鈴般的笑聲 是音符在鋼琴上跳動 是來來往往的車行 是高跟鞋的踢噠 是微風吹亂樹葉 是知了的鳴叫 是夜晚...
    空瓶小宅閱讀 180評論 0贊 3