ActionBar+DrawerLayout實現網易新聞客戶端首頁

一、概述

　　隨着android版本的不斷的更新，google推出了越來越多的高級組件，采用這些官方組件我們可以方便的實現一些以前需要通過復雜編碼或者使用第三方組件才能實現的效果，比如slidingmenu、sherlockactionbar等。在這里，我們通過使用android的官方組件ActionBar和DrawerLayout來實現網易新聞客戶端首頁的效果。

　　由於ActionBar和DrawerLayout都是后來推出的，如果需要兼容低版本必須在項目中添加v7支持庫。具體如何添加支持庫在此不做贅述，大家可以參考api文檔。

二、功能實現

　　工程創建完成並添加v7支持庫后，首先使用DrawLayout完成首頁布局，布局文件編碼如下：

<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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="這是主界面" />
    </LinearLayout>
    
    <include
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        layout="@layout/menu_right_layout"
        android:clickable="true" />
</android.support.v4.widget.DrawerLayout>

　　DrawerLayout本身就是一個布局控件，我們可以向使用線性布局或者其他布局一樣來使用它，不過此控件本身具有滑動功能，DrawerLayout可以將界面划分三部分，主顯示界面，左側滑動界面和右側滑動界面，那么DrawerLayout是如何划分這三部分內容的呢？DrawerLayout主要是通過使用android:layout_gravity屬性來判斷其子元素是哪部分內容，如果屬性值是start則為左側滑動界面，值為end則為右側滑動界面，沒有layout_gravity屬性的子元素為主界面內容。

　　注意如果DrawerLayout中的子元素較多，並且有多個子元素具有相同的layout_gravity屬性值，那么DrawerLayout將第一個具有相同屬性值的子元素作為對應的布局界面顯示，其他子元素將被覆蓋。為了布局文件的可讀我們最好在DrawLayout只布三個直接子元素，划分好整體布局。

　　DrawerLayout的側邊滑動部分，默認情況下是透明的，需要給兩側布局添加背景，運行功能可得效果如下：

　　完成側拉抽屜效果后，我們繼續添加ActionBar。如果要是使用ActionBar，則只需要繼承ActionBarActivity，注意為了兼容低版本需要使用v7包中的ActionBarActivity。

import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity {

         @Override

         protected void onCreate(Bundle savedInstanceState) {

                   super.onCreate(savedInstanceState);

                   setContentView(R.layout.main_layout);

         }

}

　　完成效果如下：

　　很顯然，此效果離真實的首頁還相差很多，那么下面我們去一步一步實現，首先通過如下代碼可實現設置logo、背景等內容。

//取得ActionBar
actionBar = getSupportActionBar();
//設置不顯示標題
actionBar.setDisplayShowTitleEnabled(false);
//設置顯示logo
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setDisplayUseLogoEnabled(true);
actionBar.setLogo(R.drawable.netease_top);
//設置actionbar背景
Drawable background =getResources().getDrawable(R.drawable.top_bar_background);
actionBar.setBackgroundDrawable(background);
actionBar.setDisplayHomeAsUpEnabled(true);

　　編寫menu文件，並通過重寫onCreateOptionsMenu方法為actionbar添加菜單，實現效果如下

通過運行效果圖，我們可以發現菜單並不是我們想要的效果，這是由於actionbar的設計原因所造成的，在具有物理按鍵以及較低版本的android平台所呈現的效果。那么我們如何讓其無論在何種版本中，都能呈現統一的效果呢？在這里給大家提供一個簡單有效的方法，修改menu文件，將多余的菜單作為更多的菜單的子菜單，修改過后的menu文件如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >

    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/night_biz_pc_menu_icon"
        android:orderInCategory="1"
        android:title="@string/app_name"
        app:showAsAction="always"/>
    <item
        android:id="@+id/action_btn01"
        android:icon="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"
        android:orderInCategory="2"
        android:title="更多"
        app:showAsAction="always">
        <menu>
            <item
        android:id="@+id/action_btn02"
        android:icon="@drawable/biz_plugin_manage_weather"
        android:orderInCategory="100"
        android:title="11/13"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_btn03"
        android:icon="@drawable/biz_plugin_manage_offline"
        android:orderInCategory="100"
        android:title="離線"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_btn04"
        android:icon="@drawable/biz_plugin_manage_theme"
        android:orderInCategory="100"
        android:title="夜間"
        app:showAsAction="never"/>
      <item
        android:id="@+id/action_btn05"
        android:icon="@drawable/biz_plugin_manage_search"
        android:orderInCategory="100"
        android:title="收索"
        app:showAsAction="never"/>
      <item
        android:id="@+id/action_btn06"
        android:icon="@drawable/biz_plugin_manage_qrcode"
        android:orderInCategory="100"
        android:title="掃一掃"
        app:showAsAction="never"/>
      <item
        android:id="@+id/action_btn07"
        android:icon="@drawable/biz_plugin_manage_offline"
        android:orderInCategory="100"
        android:title="設置"
        app:showAsAction="never"/>
        </menu>
    </item>
</menu>

運行效果如下：

　　最后使用ActionBarDrawerToggle完成actionbar和drawerlayout的聯動效果，獲取DrawerLayout對象為其設置DrawerLitener監聽器，監聽其狀態，在監聽器中的各方法中調用ActionBarDrawerToggle的對應方法完成聯動效果。最后在style文件編寫樣式設置actionbar的高度，最終實現效果如下：

 

　　想要親自體驗一下的小伙伴，可以點擊下載工程，直接運行查看哦！如有問題，也可以跟帖留言評論！

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。