安卓开发 顶部工具栏 带返回功能 仿手机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）