安卓開發 頂部工具列 帶返回功能 仿手機QQ頂部工具條

開發環境搭建   http://blog.csdn.net/juyangjia/article/details/9471561
HelloWorld http://blog.csdn.net/juyangjia/article/details/9491781
歡迎動畫製作 http://blog.csdn.net/juyangjia/article/details/9494961
菜單製作 http://blog.csdn.net/juyangjia/article/details/9612287
底部tab製作 http://blog.csdn.net/juyangjia/article/details/9616299

一、前言

        嘗試製作右上方的那個魔術棒按鈕的功能，嘗試失敗了，下次再做，今天這個教程將不再像之前那樣，怎麼建立，選哪個選項我都詳細的，大家看過我前面幾篇教程就應該知道如何建立各種安卓目錄、檔案了。另外，現在給大家解釋幾個問題：

          1. Activity的切換：事實上這個是棧來實現的，每次開啟一個新的頁面，都是壓入到棧中（不知道棧是什麼的請百度吧），這就是為什麼我們使用手機開啟很多個頁面還可以“返回”（前提是activity沒被finish掉）

           2.  細心的朋友可以看到圖片裡有很多.9.png，這個.9是什麼意思？我也不好解釋，想知道詳細的就百度吧，目前我就知道這是安卓裡面很常用的一種圖片，這種圖片他在圖片四周各有1個像素的空白地區，然後會有1條1像素的黑色線條，這種圖片可以被安卓展開而不變成馬賽克，類似web裡面經常會用一小塊8*8像素的純色圖片通過css自動填滿整個背景，相比一個1024*768的純色圖片，可以省下不少空間。

          3. 學習安卓，一旦你真正的做app的時候必須要瞭解activity的生命週期，如果你沒在網上百度，我也不告訴你，你肯定不相信手機橫屏豎屏轉換的時候介面會被重新create一次，你頁面上輸入的資料會丟失，解決這個問題的關鍵就是瞭解頁面生命週期，然後做到何時儲存資料，何時恢複。如果前面每一個教程你都認真的練習了，那麼到這裡你就可以去百度學Activity的生命週期了。

           4. 一個布局layout檔案是可以嵌套在其他layout中的，例如我們今天要做的頂部工具列，你不能每個需要工具列的頁面都複製上一段工具列的布局xml吧？引用才是最明智的辦法。

          5. 不得不說安卓的開發很靈活，布局xml、映像相關的xml（selector）、style樣式檔案，他們都夠來來回回的引用，要不了多一會你就會把自己搞混亂，所以一開始有個規範的命名非常重要，例如在drawable下可以放上a.xml和a.png，在引用的時候你只需要寫：@drawable/a，你能告訴我你這是引用的圖片還是selector？

         6. 從現在開始，drawable檔案夾我開始區分高解析度、低解析度、中等解析度了，安卓會根據手機的解析度自動選擇調用哪個檔案夾下的資源。                                           

二、製作步驟

         前面說了，今天開始教程都不再截哪些建立檔案的圖了。

 ：

1.和之前一樣，第一步都是準備材料-圖片

 

2.建立2個selector檔案，名稱如下：

 

 

內容如下：

 left：

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

right：

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

 

3.建立一個xml布局檔案，這個檔案中只有工具條

 

text模式：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:orientation="horizontal"                android:id="@+id/title_bar"        >    <RelativeLayout            android:layout_width="fill_parent"            android:layout_alignParentLeft="true"            android:layout_alignParentTop="true"            android:layout_height="40dp"            android:background="@drawable/tool_bar_bg_pic">        <Button                android:id="@+id/btn_title_left"                android:layout_width="wrap_content"                android:layout_height="40dp"                android:background="@drawable/top_left_button"                android:text="返回"                android:layout_marginLeft="7px"                android:textSize="12sp"                android:textColor="#ffffffff"                android:gravity="center_vertical|center_horizontal"                android:layout_alignParentLeft="true"/>        <TextView                android:id="@+id/tv_top_title"                android:layout_width="127dp"                android:layout_height="48dp"                android:text="SNT"                android:layout_centerInParent="true"                android:gravity="center_horizontal"                android:lines="1"                android:textSize="19sp"                android:textColor="#ffffffff" android:layout_marginTop="10dp"/>        <Button                android:id="@+id/btn_title_right"                android:layout_width="wrap_content"                android:layout_height="40dp"                android:background="@drawable/top_right_button"                android:text="更多"                android:textSize="12sp"                android:textColor="#ffffffff"                android:gravity="center_vertical|center_horizontal" android:layout_alignParentRight="true"                android:layout_marginRight="7dp"/>    </RelativeLayout></RelativeLayout>

這裡我要解釋下，我用了RelativeLayout容器來布局， 在相對布局的情況下我們才能給中間的2個按鈕和一個文本顯示地區設定位置，一個設定靠左（android:layout_alignParentLeft="true"），一個靠右（android:layout_alignParentRight="true"），一個置中（android:layout_centerInParent="true"）。

 

4.建立detailed.xml布局檔案，這個就是我們將要跳轉的詳細頁面配置

 

源碼：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent" android:background="@drawable/main_bg">    <include layout="@layout/title_bar"/>    <LinearLayout            android:orientation="vertical"            android:layout_width="fill_parent"            android:layout_height="fill_parent" >        <TextView                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:text="New Text"                android:id="@+id/textView" android:layout_gravity="left|center_vertical" android:textColor="#ff000000"/>        <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="隱藏按鈕"                android:id="@+id/button" android:layout_gravity="left|center_vertical"/>        <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="顯示按鈕"                android:id="@+id/button1" android:layout_gravity="left|center_vertical"/>    </LinearLayout></LinearLayout>

注意看上面的include標籤，本文前已經說明清楚為什麼要用include。

 

5.建立detailedActivity類

 

 

6.修改view_1.xml和view1Activity類：

 

xml布局檔案：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="fill_parent" android:gravity="center_vertical|center_horizontal">    <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="介面1"            android:id="@+id/textView"/>    <EditText            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:text="New EditText"            android:id="@+id/editText"/>    <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="跳轉"            android:id="@+id/button" android:layout_gravity="left|center_vertical"/></LinearLayout>

 

源碼：http://download.csdn.net/detail/juyangjia/5839775

 

三、最後

               由於之前已經研究過android的http通訊架構、socket通訊架構、sqlite資料庫（手機上的資料庫），但沒製作教程，下一個教程就是製作登入頁面和登入功能，將講解如下知識：

            1. 分析http和socket的串連

            2.sqlite資料庫對資料的讀寫（記住帳號）

           3.通訊架構使用（apache的httpclient和mina）