這裡提供一個例項，可以模仿Google Play裡的導航返回按鍵的效果，只需要使用Android Support V7相容包，對Android5.0以下的裝置同樣相容
理論效果
sample.gif
所需元件
Android Studio (版本0.92，推薦使用實驗版本，效果非常好)
gradle 配置
|
1 2 3 4 |
compile 'com.android.support:appcompat-v7:21.0.0' //optional compile 'com.android.support:cardview-v7:21.0.0' compile 'com.android.support:recyclerview-v7:21.0.0' |
需要掌握的新版UI物件
- Toolbar(Actionbar已經成為了歷史)
- TintSpinner(下拉選單)
- NavigationDrawer(導航欄)
- ActionBarDrawerToggle(這裡就是動畫的關鍵，舊版的ActionBarDrawerToggle同樣不再支援了)
使用步驟
1. 升級Android Studio到開發版本(可選)
2. Gradle加入上面的依賴專案
3. 新建一個Activity，Android會智慧的讓你繼承 ActionbarActivity ,主題也會繼承 Theme.AppCompat,如果你發現系統沒有為你自動建好，按如下檢查設定
主程式必須繼承 ActionbarActivity
|
1 |
public class MainActivity extends ActionBarActivity{....} |
主題選項(values/styles.xml),注意我們再也不要Actionbar了
|
1 2 3 4 5 6 7 8 9 10 |
<!-- Customize your theme here. --> <item name="windowActionBar">false <item name="android:windowNoTitle">true <!-- Actionbar color --> <item name="colorPrimary">@color/accent_material_dark <!--Status bar color--> <item name="colorPrimaryDark">@color/accent_material_light <!--Window color--> <item name="android:windowBackground">@color/dim_foreground_material_dark |
嘗試執行你的程式，如果沒問題的話，你的程式應該已經以Android L的效果執行了
4. 安裝Toolbar與NavagationDrawer
在你的MainActivity的佈局中，改成如下的程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<RelativeLayout 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" tools:context=".MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/toolbar"> <!-- As the main content view, the view below consumes the entire space available using match_parent in both dimensions. --> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- android:layout_gravity="start" tells DrawerLayout to treat this as a sliding drawer on the left side for left-to-right languages and on the right side for right-to-left languages. If you're not building against API 17 or higher, use android:layout_gravity="left" instead. --> <!-- The drawer is given a fixed width in dp and extends the full height of the container. --> <fragment android:id="@+id/navigation" android:name="com.github.miao1007.myapplication.NavigationFragment" android:layout_width="320dp" android:layout_height="match_parent" android:layout_gravity="start" tools:layout="@layout/fragment_navigation" /> </android.support.v4.widget.DrawerLayout> </RelativeLayout> |
你會發現有一個 NavigationFragment 還沒有建立，這個嘛…現在建立吧，注意直接新建一個BlankFragment，不要自己新建Class慢慢寫了….系統幫你建立好了後，你會發現已經自動給你了一個回撥介面，你可以把回撥介面改的更好看一些，下面是核心介面設計
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
private void selectItem(int position) { mCurrentSelectedPosition = position; if (mDrawerListView != null) { mDrawerListView.setItemChecked(position, true); } if (mCallback != null) { mCallback.onNavigationDrawerItemSelected(position); } } @Override public void onAttach(Activity activity) { super.onAttach(activity); try { mCallback = (NavigationDrawerCallbacks) activity; } catch (ClassCastException e) { throw new ClassCastException(activity.toString() + " must implement OnFragmentInteractionListener"); } } @Override public void onDetach() { super.onDetach(); mCallback = null; } public interface NavigationDrawerCallbacks { public void onNavigationDrawerItemSelected(int position); } |
NavigationFragment 裡面的Listview和監聽自己寫吧….當你點選後，呼叫介面就可以了，我們回到Activity中，xml裡面的 fragment 先修改好吧，然後再修改Activity的Java程式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
public class MainActivity extends ActionBarActivity implements NavigationFragment.NavigationDrawerCallbacks { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //initial toolbar Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); if (toolbar != null) { setSupportActionBar(toolbar); toolbar.inflateMenu(R.menu.menu_main); // Set Navigation Toggle getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setDisplayShowTitleEnabled(false); } mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer); // 安裝 drawer toggle 並放入 toolbar mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close); mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle); //updatefragment } ....... @Override public void onNavigationDrawerItemSelected(int position) { //TODO : change changeFragment(position); if (mDrawerLayout != null) { mDrawerLayout.closeDrawers(); } } |
原始碼下載
現在，你就擁有了一個Lolipop動畫效果的返回按鈕啦！如果你更喜歡相關的材料設計的內容，請關注材料設計專題吧