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

 

javaeye处女贴

 

红色的是res下drawable文件夹下的一个selector文件，内容是

Selector文件代码  

1. <?xml version="1.0" encoding="UTF-8"?>   
2. <selector   
3.   xmlns:android="http://schemas.android.com/apk/res/android">   
4.     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable=<SPAN style="BACKGROUND-COLOR: #00ff00">"@drawable/tab_timeline_normal" /></SPAN>   
5.     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable=<SPAN style="BACKGROUND-COLOR: #00ff00">"@drawable/tab_timeline_active" /></SPAN>   
6.     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable=<SPAN style="BACKGROUND-COLOR: #00ff00">"@drawable/tab_timeline_normal" /></SPAN>   
7.     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable=<SPAN style="BACKGROUND-COLOR: #00ff00">"@drawable/tab_timeline_active" /></SPAN>   
8.     <item android:state_pressed="true" android:drawable=<SPAN style="BACKGROUND-COLOR: #00ff00">"@drawable/tab_timeline_normal" /></SPAN>   
9. </selector>  

<?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" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_timeline_active" />
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_timeline_normal" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_timeline_active" />
    <item android:state_pressed="true" android:drawable="@drawable/tab_timeline_normal" />
</selector>

 也是你按下时，和不按时等有一个效果上的改变，具体的可以参看关于selector的知识。绿色的就是两张不同效果的图片

Mainactivity代码  

1. public class MainActivity extends TabActivity {   
2.     private TabHost tabHost;   
3.     private RadioGroup mainbtGroup;   
4.     private static final String HOME = "主页";   
5.     private static final String REFER = "提及";   
6.     private static final String SECRET = "私信";   
7.     private static final String SEARCH = "搜索";   
8.     private static final String ATTENTIION = "关注";   
9.        
10.   
11.     @Override   
12.     public void onCreate(Bundle savedInstanceState) {   
13.         super.onCreate(savedInstanceState);   
14.         setContentView(R.layout.tabhost);   
15.            
16.         tabHost = this.getTabHost();   
17.   
18.         View view1 = View.inflate(MainActivity.this, R.layout.tab, null);   
19.         ((ImageView) view1.findViewById(R.id.tab_imageview_icon)).setImageResource(<SPAN style="BACKGROUND-COLOR: #ff0000">R.drawable.tab_timeline_selector)</SPAN>;   
20.         ((TextView) view1.findViewById(R.id.tab_textview_title)).setText(HOME);   
21.   
22.         TabHost.TabSpec spec1 = tabHost.newTabSpec(HOME)   
23.                 .setIndicator(view1)   
24.                 .setContent(new Intent(this, HomeTimeLineActivity.class));   
25.         tabHost.addTab(spec1);   
26.            
27.         View view2 = View.inflate(MainActivity.this, R.layout.tab, null);   
28.         ((ImageView) view2.findViewById(R.id.tab_imageview_icon)).setImageResource(<SPAN style="BACKGROUND-COLOR: #ff0000">R.drawable.tab_atme_selector)</SPAN>;   
29.         ((TextView) view2.findViewById(R.id.tab_textview_title)).setText(REFER);   
30.   
31.         TabHost.TabSpec spec2 = tabHost.newTabSpec(REFER)   
32.                 .setIndicator(view2)   
33.                 .setContent(new Intent(this, ReferActivity.class));   
34.         tabHost.addTab(spec2);   
35.            
36.         View view3 = View.inflate(MainActivity.this, R.layout.tab, null);   
37.         ((ImageView) view3.findViewById(R.id.tab_imageview_icon)).setImageResource(<SPAN style="BACKGROUND-COLOR: #ff0000">R.drawable.tab_message_selector)</SPAN>;   
38.         ((TextView) view3.findViewById(R.id.tab_textview_title)).setText(SECRET);   
39.   
40.         TabHost.TabSpec spec3 = tabHost.newTabSpec(SECRET)   
41.                 .setIndicator(view3)   
42.                 .setContent(new Intent(this, MessageActivity.class));   
43.         tabHost.addTab(spec3);   
44.            
45.         View view4 = View.inflate(MainActivity.this, R.layout.tab, null);   
46.         ((ImageView) view4.findViewById(R.id.tab_imageview_icon)).setImageResource(<SPAN style="BACKGROUND-COLOR: #ff0000">R.drawable.tab_explore_selector</SPAN>);   
47.         ((TextView) view4.findViewById(R.id.tab_textview_title)).setText(SEARCH);   
48.   
49.         TabHost.TabSpec spec4 = tabHost.newTabSpec(SEARCH)   
50.                 .setIndicator(view4)   
51.                 .setContent(new Intent(this, SearchActivity.class));   
52.         tabHost.addTab(spec4);   
53.            
54.         View view5 = View.inflate(MainActivity.this, R.layout.tab, null);   
55.         ((ImageView) view5.findViewById(R.id.tab_imageview_icon)).setImageResource(<SPAN style="BACKGROUND-COLOR: #ff0000">R.drawable.tab_focus_selector</SPAN>);   
56.         ((TextView) view5.findViewById(R.id.tab_textview_title)).setText(ATTENTIION);   
57.   
58.         TabHost.TabSpec spec5 = tabHost.newTabSpec(ATTENTIION)   
59.                 .setIndicator(view5)   
60.                 .setContent(new Intent(this, AttentionActivity.class));   
61.         tabHost.addTab(spec5);   
62.     }  

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);
		((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，tabcontent和tabs这三个id一定要正确红色的是tab的背景

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

Tabhost布局文件代码  

1. <?xml version="1.0" encoding="UTF-8"?>   
2. <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">   
3.     <RelativeLayout android:orientation="vertical"  
4.         android:layout_width="fill_parent" android:layout_height="fill_parent">   
5.         <FrameLayout android:id="@android:id/tabcontent"  
6.             android:layout_width="fill_parent" android:layout_height="fill_parent" />   
7.         <TabWidget android:id="@android:id/tabs" <SPAN style="BACKGROUND-COLOR: #ff0000">android:background="@drawable/tab_bkg"</SPAN> android:fadingEdge="none"  
8.             android:fadingEdgeLength="0.0px" android:layout_width="fill_parent"  
9.             android:layout_height="wrap_content"  
10.             android:layout_alignParentBottom="true" />   
11.     </RelativeLayout>   
12. </TabHost>  

<?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" android:background="@drawable/tab_bkg" android:fadingEdge="none"
			android:fadingEdgeLength="0.0px" android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_alignParentBottom="true" />
	</RelativeLayout>
</TabHost>

 

Tabhost布局文件代码  

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

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

Tab布局文件，就是你看到的那5个按钮的布局文件代码  

1. <?xml version="1.0" encoding="UTF-8"?>   
2. <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"  
3.   xmlns:android="http://schemas.android.com/apk/res/android">   
4.     <ImageView android:id="@+id/tab_imageview_icon" android:layout_width="fill_parent" android:layout_height="32.0dip" android:scaleType="fitCenter" />   
5.     <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" />   
6. </LinearLayout>  

<?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>