- 浏览: 128652 次
- 性别:
- 来自: 北京
最新评论
-
qiuhuahui1:
真的有用,帮我节省了大把的时间。
android的ant编译打包 -
fxiaozj:
楼主,有没有demo?
Android ViewGroup实现页面滑动效果并实现不同的动画效果 -
sgjsdf5944:
你好,请问下楼主如果我想在安装完成页面上控制打开不可用该怎么实 ...
Android 监控程序安装和删除的实现 -
renfujiang:
养成好习惯,看过别人的文章 就得评论 增加点人气 好文章 我是 ...
android的ant编译打包 -
leishengwei:
你好,第一种方法在4.0时,输入法是弹不出去了,但是光标不能正 ...
Android如何关闭EditText中的软键盘
这篇博客是参考helloandroid兄的腾讯微博应用,我整理了一下。完整项目的介绍请在http://helloandroid.iteye.com/看
首先是效果图:
我把helloandroid兄的源代码整理了一下,并梳理了涉及到的知识点,总结如下:
1、TabActivity的使用
Java代码
public class MainActivity extends TabActivity {
private TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tabHost = getTabHost();
populateTab();
}
/**
* 组装tab控件
*/
private void populateTab() {
Resources res = getResources();
populateTabItem(R.drawable.tab_home_selector,
res.getString(R.string.tab_home), new Intent(this,
HomeActivity.class));
populateTabItem(R.drawable.tab_atme_selector,
res.getString(R.string.tab_refer), new Intent(this,
ReferActivity.class));
populateTabItem(R.drawable.tab_message_selector,
res.getString(R.string.tab_secret), new Intent(this,
MessageActivity.class));
populateTabItem(R.drawable.tab_explore_selector,
res.getString(R.string.tab_search), new Intent(this,
SearchActivity.class));
populateTabItem(R.drawable.tab_focus_selector,
res.getString(R.string.tab_attention), new Intent(this,
AttentionActivity.class));
}
/**
* 生成tab_item
*
* @param imageResourceSelector
* 图片选择器
* @param text
* 文本
* @param intent
* intent
*/
private void populateTabItem(int imageResourceSelector, String text,
Intent intent) {
View view = View.inflate(this, R.layout.tab_item, null);// 拼装view
((ImageView) view.findViewById(R.id.tab_item_imageview))
.setImageResource(imageResourceSelector);
((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);
TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)
.setContent(intent);// 将view注入spec
tabHost.addTab(spec);
}
}
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<include android:id="@+id/head_line" layout="@layout/head_line"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
<FrameLayout android:id="@android:id/tabcontent"
android:layout_below="@id/head_line" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1.0" />
<TabWidget android:id="@android:id/tabs" android:background="@drawable/tab_bkg"
android:layout_gravity="bottom" android:layout_height="60.0dip"
android:layout_width="fill_parent" android:fadingEdge="none"
android:fadingEdgeLength="0.0px" android:paddingLeft="0.0dip"
android:paddingTop="2.0dip" android:paddingRight="0.0dip"
android:paddingBottom="0.0dip" android:layout_alignParentBottom="true"
android:layout_alignParentTop="false" />
</RelativeLayout>
</TabHost>
可以看到,TabActivity是继承自Activity,包含了一个TabHost组件。TabHost组件则是继承自FrameLayout的ViewGroup。
TabHost组件本身的id必须是@android:id/tabhost,它必须包含一个FrameLayout,并且该FrameLayout的id必须是@android:id/tabcontent,此外还要包含一个TabWidget,id是@android:id/tabs。
FrameLayout可以放置每个单独的Activity,而TabWidget则是每个Tab页签。默认第一个页签对应的Activity,会首先显示在FrameLayout里。然后每次点击其他的Tab页签,对应的Activity就会切换显示到FrameLayout里。这个有点类似html中的frameset的概念
2、在main.xml中有一行
Xml代码
<include android:id="@+id/head_line" layout="@layout/head_line"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
作用是引入另一个View文件,head_line.xml
Xml代码
<RelativeLayout android:background="@drawable/header"
android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button android:id="@+id/top_btn_left" android:textColor="@color/button_text_selector"
android:background="@drawable/top_refresh_selector"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="12.0dip" android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<Button android:id="@+id/top_btn_right" android:textColor="@color/button_text_selector"
android:background="@drawable/top_edit_selector" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginRight="12.0dip"
android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<TextView android:id="@+id/top_title" android:textSize="22.0sp"
android:textColor="@color/head_line_text" android:ellipsize="middle"
android:gravity="center_horizontal" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="@string/user_name"
android:singleLine="true" android:layout_toLeftOf="@id/top_btn_right"
android:layout_toRightOf="@id/top_btn_left"
android:layout_centerInParent="true"
android:layout_alignWithParentIfMissing="true" />
</RelativeLayout>
用这种方式可以实现View组件的复用,是很方便的,可以学习一下这种方式。把要复用的View写在单独的xml文件里,然后在其他需要的地方,只要直接include就可以了
3、每个Tab页签对应的View是tab_item.xml
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@+id/tab_item_imageview"
android:layout_width="fill_parent" android:layout_height="32.0dip"
android:scaleType="fitCenter" />
<TextView android:id="@+id/tab_item_textview"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="center" android:singleLine="true"
android:marqueeRepeatLimit="1" android:textSize="11.0sp"
android:ellipsize="marquee" />
</LinearLayout>
然后在java代码中进行组装
Java代码
View view = View.inflate(this, R.layout.tab_item, null);// 拼装view
((ImageView) view.findViewById(R.id.tab_item_imageview))
.setImageResource(imageResourceSelector);
((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);
TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)
.setContent(intent);// 将view注入spec
tabHost.addTab(spec);
这部分的详细说明,可以看google提供的API
4、然后这个页面中用到了selector的概念,即当要动态改变某些组件的属性,如颜色,字体大小等,可以用selector来进行动态选择,这里有点类似CSS中的伪类的概念
Xml代码
android:textColor="@color/button_text_selector"
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/button_text_pressed" />
<item android:state_selected="true" android:color="@color/button_text_pressed" />
<item android:color="@color/button_text_normal" />
</selector>
上面代码的意思是,根据按钮控件是否按下,是否选择,在运行时动态决定颜色。通过同样的方式,还可以动态决定一个按钮的图片
Xml代码
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />
<item android:state_pressed="true" android:drawable="@drawable/top_edit_press" />
</selector>
5、这个页面还用到了一个比较特殊的技巧,就是通过xml,而不是静态图片来绘制背景
Xml代码
<RelativeLayout android:background="@drawable/header"
android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
上面代码中的android:background="@drawable/header",指向drawable文件夹中的header.xml
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff6c7078" android:endColor="#ffa6abb5"
android:angle="270.0" android:type="linear" />
</shape>
可以看到,这个控件的背景色,是用xml绘制出来的。不过这个技巧我在别的地方见的比较少,感觉比较冷门
关于TabHost组件的知识点,就简单介绍这些。详细的内容,请到helloandroid.iteye.com里看
首先是效果图:
我把helloandroid兄的源代码整理了一下,并梳理了涉及到的知识点,总结如下:
1、TabActivity的使用
Java代码
public class MainActivity extends TabActivity {
private TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tabHost = getTabHost();
populateTab();
}
/**
* 组装tab控件
*/
private void populateTab() {
Resources res = getResources();
populateTabItem(R.drawable.tab_home_selector,
res.getString(R.string.tab_home), new Intent(this,
HomeActivity.class));
populateTabItem(R.drawable.tab_atme_selector,
res.getString(R.string.tab_refer), new Intent(this,
ReferActivity.class));
populateTabItem(R.drawable.tab_message_selector,
res.getString(R.string.tab_secret), new Intent(this,
MessageActivity.class));
populateTabItem(R.drawable.tab_explore_selector,
res.getString(R.string.tab_search), new Intent(this,
SearchActivity.class));
populateTabItem(R.drawable.tab_focus_selector,
res.getString(R.string.tab_attention), new Intent(this,
AttentionActivity.class));
}
/**
* 生成tab_item
*
* @param imageResourceSelector
* 图片选择器
* @param text
* 文本
* @param intent
* intent
*/
private void populateTabItem(int imageResourceSelector, String text,
Intent intent) {
View view = View.inflate(this, R.layout.tab_item, null);// 拼装view
((ImageView) view.findViewById(R.id.tab_item_imageview))
.setImageResource(imageResourceSelector);
((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);
TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)
.setContent(intent);// 将view注入spec
tabHost.addTab(spec);
}
}
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<include android:id="@+id/head_line" layout="@layout/head_line"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
<FrameLayout android:id="@android:id/tabcontent"
android:layout_below="@id/head_line" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_weight="1.0" />
<TabWidget android:id="@android:id/tabs" android:background="@drawable/tab_bkg"
android:layout_gravity="bottom" android:layout_height="60.0dip"
android:layout_width="fill_parent" android:fadingEdge="none"
android:fadingEdgeLength="0.0px" android:paddingLeft="0.0dip"
android:paddingTop="2.0dip" android:paddingRight="0.0dip"
android:paddingBottom="0.0dip" android:layout_alignParentBottom="true"
android:layout_alignParentTop="false" />
</RelativeLayout>
</TabHost>
可以看到,TabActivity是继承自Activity,包含了一个TabHost组件。TabHost组件则是继承自FrameLayout的ViewGroup。
TabHost组件本身的id必须是@android:id/tabhost,它必须包含一个FrameLayout,并且该FrameLayout的id必须是@android:id/tabcontent,此外还要包含一个TabWidget,id是@android:id/tabs。
FrameLayout可以放置每个单独的Activity,而TabWidget则是每个Tab页签。默认第一个页签对应的Activity,会首先显示在FrameLayout里。然后每次点击其他的Tab页签,对应的Activity就会切换显示到FrameLayout里。这个有点类似html中的frameset的概念
2、在main.xml中有一行
Xml代码
<include android:id="@+id/head_line" layout="@layout/head_line"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
作用是引入另一个View文件,head_line.xml
Xml代码
<RelativeLayout android:background="@drawable/header"
android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button android:id="@+id/top_btn_left" android:textColor="@color/button_text_selector"
android:background="@drawable/top_refresh_selector"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="12.0dip" android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<Button android:id="@+id/top_btn_right" android:textColor="@color/button_text_selector"
android:background="@drawable/top_edit_selector" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginRight="12.0dip"
android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<TextView android:id="@+id/top_title" android:textSize="22.0sp"
android:textColor="@color/head_line_text" android:ellipsize="middle"
android:gravity="center_horizontal" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="@string/user_name"
android:singleLine="true" android:layout_toLeftOf="@id/top_btn_right"
android:layout_toRightOf="@id/top_btn_left"
android:layout_centerInParent="true"
android:layout_alignWithParentIfMissing="true" />
</RelativeLayout>
用这种方式可以实现View组件的复用,是很方便的,可以学习一下这种方式。把要复用的View写在单独的xml文件里,然后在其他需要的地方,只要直接include就可以了
3、每个Tab页签对应的View是tab_item.xml
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@+id/tab_item_imageview"
android:layout_width="fill_parent" android:layout_height="32.0dip"
android:scaleType="fitCenter" />
<TextView android:id="@+id/tab_item_textview"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="center" android:singleLine="true"
android:marqueeRepeatLimit="1" android:textSize="11.0sp"
android:ellipsize="marquee" />
</LinearLayout>
然后在java代码中进行组装
Java代码
View view = View.inflate(this, R.layout.tab_item, null);// 拼装view
((ImageView) view.findViewById(R.id.tab_item_imageview))
.setImageResource(imageResourceSelector);
((TextView) view.findViewById(R.id.tab_item_textview)).setText(text);
TabSpec spec = tabHost.newTabSpec(text).setIndicator(view)
.setContent(intent);// 将view注入spec
tabHost.addTab(spec);
这部分的详细说明,可以看google提供的API
4、然后这个页面中用到了selector的概念,即当要动态改变某些组件的属性,如颜色,字体大小等,可以用selector来进行动态选择,这里有点类似CSS中的伪类的概念
Xml代码
android:textColor="@color/button_text_selector"
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/button_text_pressed" />
<item android:state_selected="true" android:color="@color/button_text_pressed" />
<item android:color="@color/button_text_normal" />
</selector>
上面代码的意思是,根据按钮控件是否按下,是否选择,在运行时动态决定颜色。通过同样的方式,还可以动态决定一个按钮的图片
Xml代码
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/top_edit_normal" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/top_edit_press" />
<item android:state_pressed="true" android:drawable="@drawable/top_edit_press" />
</selector>
5、这个页面还用到了一个比较特殊的技巧,就是通过xml,而不是静态图片来绘制背景
Xml代码
<RelativeLayout android:background="@drawable/header"
android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
上面代码中的android:background="@drawable/header",指向drawable文件夹中的header.xml
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff6c7078" android:endColor="#ffa6abb5"
android:angle="270.0" android:type="linear" />
</shape>
可以看到,这个控件的背景色,是用xml绘制出来的。不过这个技巧我在别的地方见的比较少,感觉比较冷门
关于TabHost组件的知识点,就简单介绍这些。详细的内容,请到helloandroid.iteye.com里看
发表评论
-
ListView与Button、imageButton 的共存问题解决
2013-02-20 11:39 1296ListView与Button、imageButton 的共存 ... -
android实现popupwindow的动画效果
2013-02-01 18:56 1983问题:在打开或者关闭popupwindow的时候怎么样显示动画 ... -
Android开发ViewPager中ListView失效问题解决方法
2013-01-28 22:12 2740最近开发一个Android小应用。就是利用ViewPager实 ... -
Android ViewGroup实现页面滑动效果并实现不同的动画效果
2012-08-28 22:24 3113这应该是自己第一次开始写博客,今天起想要记录下自己工作上学到的 ... -
关于WebView的loadData方法以及乱码问题
2012-08-09 14:37 949WebView是Android应用开发 ... -
Android对图片的压缩读取和保存
2012-08-08 10:27 1366在开发图片浏览器等软件是,很多时候要显示图片的缩略图,而一般情 ... -
ubuntu下载android源代码
2012-07-22 00:50 1885用虚拟机来创建一个Ubun ... -
android面试(2)
2012-07-20 16:17 1056附带答案,共100分 一、选择题(30题,每题1.5分,共4 ... -
自定义PreferenceActivity——修改Preference样式、加顶部布局
2012-05-27 20:19 2677首先在res/xml文件夹下建立preferences.xml ... -
android拦截短信并屏蔽系统的Notification
2012-05-21 09:25 1776Android短信拦截,总的来说有两种方式: (一)、在代码 ... -
Android设置应用程序默认语言
2012-05-19 21:03 1510Android应用程序的国际化还是做得不错的,通过设置资源文件 ... -
(android 实战总结)android对html支持接口总结
2012-04-18 09:50 2364Android支持html 的两个接口 1 Spanned ... -
Android的TextView使用Html来处理图片显示、字体样式、超链接等
2012-04-16 11:09 1538转eoe:http://www.eoeandroid.com/ ... -
android的ant编译打包
2012-04-11 14:52 3887Android本身是支持ant打包项目的,并且SDK中自带一个 ... -
使用InputStreamEntity 边读取边上传文件
2012-04-09 17:32 7393HttpClient httpclient = new Def ... -
android xliff字符串操作
2012-04-09 14:59 1400参考:http://blog.csdn.net/freshma ... -
Android:只读EditText内容可滚动(禁止输入法)的实现
2012-04-06 12:00 1378实验设备为HTC hero (SDK 2.1-update1) ... -
Eclipse报内存溢出
2012-04-04 10:50 1088(1)在配置tomcat的JDK里面设置。Window--&g ... -
Android解压缩zip的实现
2012-03-20 11:21 2811android 解压缩zip包,需要在menifest.xml ... -
Android alertdialog的按钮点击后不消失
2012-03-15 20:35 1850使用反射: 在你的setPositiveButton中添加 ...
相关推荐
ActivityGroup + GridView 实现Tab分页标签
用prototype.js实现的Html网页中tab分页功能
简单Tab分页式菜单,以供学习,供参考。
ActivityGroupTest ActivityGroup 实现Tab分页
使用fragment完成的tab分页,配置文件实现的RadioGroup背景点击效果和图标的变换
GridView+ActivityGroup 实现Tab分页
基于GridView和ActivityGroup实现的Tab分页
微信小程序tab分页demo,目前使用固定数据展示,具体请结合api请求服务器数据
ActivityGroup 使用实现tab分页标签,保存Activity状态、使用子Activity的Menu
使用GridView+ActivityGroup实现的tab分页效果
wpf+CefSharp模仿浏览器Tab分页,下载文件,收藏,刷新,删除,新窗口
用ActivityGroup+GridView实现Tab分页标签,并且可以滑动切换页面
CefSharp模仿浏览器Tab分页,刷新,删除,新窗口。不能运行请把dll文件夹的 (icudt.dll,libcef.dll)复制到x68/debug里即可!
带侧拉菜单tab分页导航并且有信息数目提示的主页框架,基于viewdraghelper,解决横竖向滑动冲突
主要介绍了Android简单实现屏幕下方Tab菜单的方法,简单分析了Android实现tab菜单所涉及的界面布局及功能相关操作技巧,需要的朋友可以参考下
很多客户端软件和浏览器软件都喜欢用Tab分页标签来搭建界面框架。读者也许会马上想到使用TabHost 与 TabActivity的组合,其实最常用的不是它们,而是由GridView与ActivityGroup的组合。每当用户在GridView选中一项,...
android TAb分页菜单 滑动切换页签 有两个项目 分别用 TabHost 和 ViewPager 实现 导航在顶部,可以自己改到底部, 实用小工具
安卓Android源码——(Tab分页式菜单).zip