ActionBar+DrawerLayout實現網易新聞客戶端首頁
| 一、概述 | </tr> </tbody> </table>
| 二、功能實現 |
工程創建完成并添加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://blog.csdn.net/jerehedu/article/details/45195553