1. 程式人生 > >安卓開發 頂部工具欄 帶返回功能 仿手機QQ頂部工具條

安卓開發 頂部工具欄 帶返回功能 仿手機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)