安卓开发 顶部工具栏 带返回功能 仿手机QQ顶部工具条
2013-07-30 16:01
513 查看
开发环境搭建 /article/9663249.html
HelloWorld /article/9663250.html
欢迎动画制作 /article/9663251.html
菜单制作 /article/9663252.html
底部tab制作 /article/9663253.html
一、前言
尝试制作微信右上角的那个魔术棒按钮的功能,尝试失败了,下次再做,今天这个教程将不再像之前那样,怎么新建,选哪个选项我都详细的截图,大家看过我前面几篇教程就应该知道如何新建各种安卓目录、文件了。另外,现在给大家解释几个问题:
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文件夹我开始区分高分辨率、低分辨率、中等分辨率了,安卓会根据手机的分辨率自动选择调用哪个文件夹下的资源。
![](http://img.my.csdn.net/uploads/201307/30/1375170400_5186.png)
二、制作步骤
前面说了,今天开始教程都不再截哪些新建文件的图了。
效果图:
![](http://img.my.csdn.net/uploads/201307/30/1375170441_2356.png)
![](http://img.my.csdn.net/uploads/201307/30/1375170441_1723.png)
![](http://img.my.csdn.net/uploads/201307/30/1375170448_7861.png)
![](http://img.my.csdn.net/uploads/201307/30/1375170449_8435.png)
1.和之前一样,第一步都是准备材料-图片
![](http://img.my.csdn.net/uploads/201307/30/1375170400_8627.png)
2.新建2个selector文件,名称如下:
![](http://img.my.csdn.net/uploads/201307/30/1375170401_5720.png)
内容如下:
left:
right:
3.新建一个xml布局文件,这个文件中只有工具条
![](http://img.my.csdn.net/uploads/201307/30/1375170401_6621.png)
text模式:
这里我要解释下,我用了RelativeLayout容器来布局, 在相对布局的情况下我们才能给中间的2个按钮和一个文本显示区域设置位置,一个设置靠左(android:layout_alignParentLeft="true"),一个靠右(android:layout_alignParentRight="true"),一个居中(android:layout_centerInParent="true")。
4.新建detailed.xml布局文件,这个就是我们将要跳转的详细页面布局
![](http://img.my.csdn.net/uploads/201307/30/1375170401_5472.png)
源码:
注意看上面的include标签,本文前已经说明清楚为什么要用include。
5.新建detailedActivity类
![](http://img.my.csdn.net/uploads/201307/30/1375170440_7914.png)
6.修改view_1.xml和view1Activity类:
![](http://img.my.csdn.net/uploads/201307/30/1375170440_2876.png)
xml布局文件:
源码:http://download.csdn.net/detail/juyangjia/5839775
三、最后
由于之前已经研究过android的http通信框架、socket通信框架、sqlite数据库(手机上的数据库),但没制作教程,下一个教程就是制作登录页面和登录功能,将讲解如下知识:
1. 分析http和socket的连接
2.sqlite数据库对数据的读写(记住账号)
3.通信框架使用(apache的httpclient和mina)
HelloWorld /article/9663250.html
欢迎动画制作 /article/9663251.html
菜单制作 /article/9663252.html
底部tab制作 /article/9663253.html
一、前言
尝试制作微信右上角的那个魔术棒按钮的功能,尝试失败了,下次再做,今天这个教程将不再像之前那样,怎么新建,选哪个选项我都详细的截图,大家看过我前面几篇教程就应该知道如何新建各种安卓目录、文件了。另外,现在给大家解释几个问题:
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文件夹我开始区分高分辨率、低分辨率、中等分辨率了,安卓会根据手机的分辨率自动选择调用哪个文件夹下的资源。
![](http://img.my.csdn.net/uploads/201307/30/1375170400_5186.png)
二、制作步骤
前面说了,今天开始教程都不再截哪些新建文件的图了。
效果图:
![](http://img.my.csdn.net/uploads/201307/30/1375170441_2356.png)
![](http://img.my.csdn.net/uploads/201307/30/1375170441_1723.png)
![](http://img.my.csdn.net/uploads/201307/30/1375170448_7861.png)
![](http://img.my.csdn.net/uploads/201307/30/1375170449_8435.png)
1.和之前一样,第一步都是准备材料-图片
![](http://img.my.csdn.net/uploads/201307/30/1375170400_8627.png)
2.新建2个selector文件,名称如下:
![](http://img.my.csdn.net/uploads/201307/30/1375170401_5720.png)
内容如下:
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布局文件,这个文件中只有工具条
![](http://img.my.csdn.net/uploads/201307/30/1375170401_6621.png)
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布局文件,这个就是我们将要跳转的详细页面布局
![](http://img.my.csdn.net/uploads/201307/30/1375170401_5472.png)
源码:
<?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类
![](http://img.my.csdn.net/uploads/201307/30/1375170440_7914.png)
6.修改view_1.xml和view1Activity类:
![](http://img.my.csdn.net/uploads/201307/30/1375170440_2876.png)
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)
相关文章推荐
- iOS开发:手机QQ拖拽消除未读消息特效("一键下班"功能)相关资源汇总
- 如何在Android手机中开发QQ账户登陆功能的应用
- 安卓开发:使用手机拍照功能
- 如何在Android手机中开发QQ账户登陆功能的应用
- 如何在Android手机中开发QQ账户登陆功能的应用
- 在安卓开发中需要运用手机振动的功能
- 安卓开发中监听手机返回键,让点击2次退出
- 安卓开发 :实现打开一次相机连续拍多张照片返回后拿到多张照片,一个小功能的构思
- 安卓开发类似QQ、微信优化APP启动速度,记录返回桌面前的任务栈状态
- 在安卓开发过程中如何将user版的手机快速导出数据库
- Android 安卓怎么将你开发的项目部署到真实手机中并抓取真机屏幕
- 腾讯开发平台 手机QQ登录 错误码:110406 解决办法;新浪微博sso错误
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- jQuery实现返回顶部功能
- 关于在安卓开发中百度地图功能不能实现定位。
- (转)手机QQ的安卓版,附源码
- 安卓手机连接蓝牙打印机实现打印功能
- HTML5实现手机QQ表情功能
- APP 返回顶部按钮功能
- js+JQuery实现返回顶部功能