Android腾讯微博客户端开发一:在下方的Tab的实现

javaEye处女贴





下面的是res下drawable文件夹下的一个selector文件，作用主要是当每一个tab选项被点击，获得焦点以及被选中的时候背景都会发生变化

<?xml version="1.0" encoding="UTF-8"?>
<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/tab_timeline_normal" /></span>
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_timeline_active" /></span>
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_timeline_normal" /></span>
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_timeline_active" /></span>
    <item android:state_pressed="true" android:drawable="@drawable/tab_timeline_normal" /></span>
</selector>

注意一定要继承TabActivity

public class MainActivity extends TabActivity {
	private TabHost tabHost;
	private RadioGroup mainbtGroup;
	private static final String HOME = "主页";
	private static final String REFER = "提及";
	private static final String SECRET = "私信";
	private static final String SEARCH = "搜索";
	private static final String ATTENTIION = "关注";
	

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tabhost);//设置选项卡使用的布局文件
		
		tabHost = this.getTabHost();

		View view1 = View.inflate(MainActivity.this, R.layout.tab, null);
		((ImageView) view1.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.tab_timeline_selector);//设置每一个tab的图标
		((TextView) view1.findViewById(R.id.tab_textview_title)).setText(HOME);

		TabHost.TabSpec spec1 = tabHost.newTabSpec(HOME)
				.setIndicator(view1)
				.setContent(new Intent(this, HomeTimeLineActivity.class));
		tabHost.addTab(spec1);
		
		View view2 = View.inflate(MainActivity.this, R.layout.tab, null);
		((ImageView) view2.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.tab_atme_selector);
		((TextView) view2.findViewById(R.id.tab_textview_title)).setText(REFER);

		TabHost.TabSpec spec2 = tabHost.newTabSpec(REFER)
				.setIndicator(view2)
				.setContent(new Intent(this, ReferActivity.class));
		tabHost.addTab(spec2);
		
		View view3 = View.inflate(MainActivity.this, R.layout.tab, null);
		((ImageView) view3.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.tab_message_selector);
		((TextView) view3.findViewById(R.id.tab_textview_title)).setText(SECRET);

		TabHost.TabSpec spec3 = tabHost.newTabSpec(SECRET)
				.setIndicator(view3)
				.setContent(new Intent(this, MessageActivity.class));
		tabHost.addTab(spec3);
		
		View view4 = View.inflate(MainActivity.this, R.layout.tab, null);
		((ImageView) view4.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.tab_explore_selector);
		((TextView) view4.findViewById(R.id.tab_textview_title)).setText(SEARCH);

		TabHost.TabSpec spec4 = tabHost.newTabSpec(SEARCH)
				.setIndicator(view4)
				.setContent(new Intent(this, SearchActivity.class));
		tabHost.addTab(spec4);
		
		View view5 = View.inflate(MainActivity.this, R.layout.tab, null);
		((ImageView) view5.findViewById(R.id.tab_imageview_icon)).setImageResource(R.drawable.tab_focus_selector);
		((TextView) view5.findViewById(R.id.tab_textview_title)).setText(ATTENTIION);

		TabHost.TabSpec spec5 = tabHost.newTabSpec(ATTENTIION)
				.setIndicator(view5)
				.setContent(new Intent(this, AttentionActivity.class));
		tabHost.addTab(spec5);
	}

下面的就是tabhost布局文件关键是tabhost，tabcontent和tabs这三个id一定要正确

<?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">
		<FrameLayout android:id="@android:id/tabcontent"
			android:layout_width="fill_parent" android:layout_height="fill_parent" />
		<TabWidget android:id="@android:id/tabs" <span style="background-color: #ff0000;">android:background="@drawable/tab_bkg"</span> android:fadingEdge="none"
			android:fadingEdgeLength="0.0px" android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_alignParentBottom="true" />
	</RelativeLayout>
</TabHost>

android:layout_alignParentBottom="true" 把tab的五个按钮挨着父控件的底部，在android里面RelativeLayout很好用

下面的是每一个tab项的布局文件上面是图片下面是文字

<?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_imageview_icon" android:layout_width="fill_parent" android:layout_height="32.0dip" android:scaleType="fitCenter" />
    <TextView android:id="@+id/tab_textview_title" android:textSize="11.0sp"  android:ellipsize="marquee" android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:marqueeRepeatLimit="1" />
</LinearLayout>

是一张.9.png格式的图片，这个很有用哟在android里，经常用来处理图片拉升的问题。左边和上面的小点表示要拉伸的地方，右边和下面的表示内容区。关于.9.png格式图片在android里面得更多应用看http://developer.android.com/guide/developing/tools/draw9patch.html

评论

15 楼 嘟嘟橙 2013-05-12  

14 楼 zlb21 2013-02-25  

13 楼 zlb21 2013-02-25  

         

12 楼 yun_bo 2012-08-23  

马克，好好看看，希望能学到好东西

11 楼 wenlong200817 2012-06-24  

厉害，学习下！！！

10 楼 egox 2012-02-15  

代码里 “</span>” 应该是改排版留下的吧 呵呵

9 楼 egox 2012-02-15  

哥们， 能详细介绍一下 .9.png 怎么用么？？

8 楼 helloandroid 2011-11-03  

294460620 写道

哥们排版跟不上内容，看下来好费劲你这文章

呵呵，是的，刚才自己看了一下的确很费劲（这贴是在iteye发的第一帖，当时不太熟悉这编辑器），中午刚修改了一下，现在好多了

7 楼 294460620 2011-11-03  

哥们排版跟不上内容，看下来好费劲你这文章

6 楼 zixuefei 2011-09-17  

很好，值得学习下

5 楼 wtmax 2011-09-16  

[e-mail]求源代码

4 楼 chrips 2011-09-07  

来膜拜下。楼主的文章很好。

3 楼 limingcai 2011-08-11  

我想问一下,你那个按钮整齐排放是用什么属性的 在XML文件里,另外还有一个问题 用TAB的时候,在页面上用鼠标滚动 会跳出来一个错误,不知道你是用什么方法解决的.

2 楼 落日思晨 2011-08-02  

万岁!楼主厉害!能给QQ吗?

1 楼 八岭书生 2011-07-20  

[e-mail] 求源代码