在Android上实现Iphone风格 bottom tab + title bar
很多用户都喜欢iphone的tab bar，而android默认的tab风格不是很好看，如下图所示。
但android界面所有组件都可以自定义现对android的tab和title自定义风格：
左边iphone界面 android界面tablayout
一、自定义tab实现iphone style tab
1、实现bottom tab：将tab放置在底部 利用相对布局，将TabWidget放在FrameLayout底部，主界面布局文件main_activity.xml如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<merge
xmlns:android ="http://schemas.android.com/apk/res/android"
android:orientation ="vertical"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent" >
<TabHost
android:id ="@android:id/tabhost"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent" >
<RelativeLayout
android:orientation ="vertical"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:padding ="1dp" >
<FrameLayout android:id ="@android:id/tabcontent"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:layout_weight ="1" />
<TabWidget android:id ="@android:id/tabs"
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:layout_alignBottom ="@android:id/tabcontent" />
</RelativeLayout>
</TabHost>
</merge>
实现效果如下：
2、定义Drawable shap和Selector
定义tab选择和未被选择时的背景样式，tab_background_selector.xml
2
3
4
5
6
7
8
<selector xmlns:android ="http://schemas.android.com/apk/res/android" >
<item android:state_pressed ="true"
android:drawable ="@color/darkorange" /> <!-- pressed -->
<item android:state_selected ="true"
android:drawable ="@drawable/selected_tab_shape" /> <!-- selected/highlighted -->
<item android:drawable ="@drawable/custom_tab_shape" /> <!-- default -->
</selector>
未选择的普通形状，目前为一个渐变色的矩形：custom_tab_shape.xml
2
3
4
5
6
7
8
9
<shape xmlns:android ="http://schemas.android.com/apk/res/android"
android:shape ="rectangle" >
<gradient
android:startColor ="#CCCCCC"
android:centerColor ="#848484"
android:endColor ="#848484"
android:angle ="270" />
</shape>
选中时的形状，目前为一个带圆角和渐变效果的矩形：selected_tab_shape.xml
2
3
4
5
6
7
8
9
10
11
12
13
14
<shape xmlns:android ="http://schemas.android.com/apk/res/android"
android:shape ="rectangle" >
<gradient
android:startColor ="#62A0FF"
android:centerColor ="#014c96"
android:endColor ="#014c96"
android:angle ="270" />
<corners
android:bottomRightRadius ="5dp"
android:bottomLeftRadius ="5dp"
android:topLeftRadius ="5dp"
android:topRightRadius ="5dp" />
</shape>
3、创建自定义的View，作为TabSpec的Indicator 自定义View （TabView）代码如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
* 内部类 自定义Tab
* @author leon
*
*/
class TabView extends LinearLayout {
TextView tv ;
public TabView ( Context context, String label ) {
super ( context ) ;
tv = new TextView ( context ) ;
tv. setText ( label ) ;
tv. setGravity ( Gravity. CENTER ) ;
tv. setBackgroundColor ( Color . TRANSPARENT ) ;
tv. setTextColor ( Color . WHITE ) ;
tv. setPadding ( 0 , 10 , 0 , 10 ) ; /***dimension***/
tv. setLayoutParams ( new LayoutParams ( LayoutParams. WRAP_CONTENT ,
LayoutParams. WRAP_CONTENT , ( float ) 0.0 ) ) ;
setGravity ( Gravity. CENTER ) ;
setOrientation ( LinearLayout. VERTICAL ) ;
addView ( tv ) ;
setBackgroundDrawable ( this . getResources ( ) . getDrawable ( R. drawable . tab_background_selector ) ) ;
}
}
之后实例化一个TabView然后通过TabSpec.setIndicator(View view)方法设置TabSpec的View，这样一来就会取代如上图所示系统默认的tab样式，效果如下图：
此外，在自定义View中也可以加入图片，修改布局，做成任何你想的样式！ 这样就完成了tab的自定义。
二、自定义Title,实现iphone style top bar效果
1、define custom/your style derived from window title style, and that is referenced in theme
2、derive default theme and override attributes for window title bar
3、define custom title layout that will be shown in title bar
4、set custom theme attribute in activity declaration that will use this custom title bar in AndroidManifest.xml
5、 in derived activity class, for example LoginActivity extends Activity, your first code is to request Custom title feature in onCreate()
6、load content view and main layout
7、after that set custom title bar view/layout
that’s all
具体步骤为：
1、自定义window title style 在values中创建styles.xml文件
2
3
4
5
6
7
8
9
<resources xmlns:android ="http://schemas.android.com/apk/res/android" >
<style name ="customWindowTitleBackground"
parent ="android:WindowTitleBackground"
>
<item name ="android:background" > @drawable/custom_title_shape </item>
</style>
</resources>
设计 custom_title_shape，即drawable shape：
2
3
4
5
6
7
8
9
<shape xmlns:android ="http://schemas.android.com/apk/res/android"
android:shape ="rectangle" >
<gradient
android:startColor ="#015CB8"
android:centerColor ="#014D9A"
android:endColor ="#013D78"
android:angle ="270" />
</shape>
2、自定义Theme，继承android:Theme.Light
2
3
4
5
6
7
8
<resources xmlns:android ="http://schemas.android.com/apk/res/android" >
<style name ="customTheme" parent ="android:Theme.Light" >
<item name ="android:windowTitleSize" > 25dip </item>
<item name ="android:windowTitleBackgroundStyle" > @style/customWindowTitleBackground </item>
<item name ="android:windowContentOverlay" > @null </item> <!-- 去掉标题栏阴影效果 -->
</style>
</resources>3、自定义title中的组件和布局 ：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version ="1.0" encoding ="utf-8" ?>
<LinearLayout
xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:orientation ="horizontal" >
<TextView
android:id ="@+id/headerTitleTxtVw"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:textColor ="@android:color/white"
>
</TextView>
</LinearLayout>
4、修改AndroidManifest.xml中activity的Theme：
2
3
4
5
6
7
android:theme ="@style/customTheme" >
<intent-filter>
<action android:name ="android.intent.action.MAIN" />
<category android:name ="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
5、6、7、Activity中调用：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
super . onCreate ( savedInstanceState ) ;
requestWindowFeature ( Window . FEATURE_CUSTOM_TITLE ) ; //请求自定义的title(不知道这样说准确不)
//设置activity的内容，即setContentView()...
setCustomTitle ( getString ( R. string . app_name ) ) ; //显示自定义标题栏
}
/**
* 设置自定义title
* @param msg
*/
protected void setCustomTitle ( String msg ) {
getWindow ( ) . setFeatureInt ( Window . FEATURE_CUSTOM_TITLE , R. layout . custom_titlebar ) ;
TextView tv = ( TextView ) getWindow ( ) . findViewById ( R. id . headerTitleTxtVw ) ;
tv. setText ( msg ) ;
}
最终实现效果图：
MainActivity.java 完整代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import android.app.TabActivity ;
import android.content.Context ;
import android.content.Intent ;
import android.graphics.Color ;
import android.os.Bundle ;
import android.view.Gravity ;
import android.view.Window ;
import android.widget.LinearLayout ;
import android.widget.TabHost ;
import android.widget.TextView ;
public class MainActivity extends TabActivity {
@Override
protected void onCreate ( Bundle savedInstanceState ) {
super . onCreate ( savedInstanceState ) ;
requestWindowFeature ( Window . FEATURE_CUSTOM_TITLE ) ; //
setContentView ( R. layout . main_activity ) ;
TabHost tabHost = getTabHost ( ) ;
TabHost. TabSpec tabSpec ;
Intent intent ;
TabView tabView = null ; //自定义tab
intent = new Intent ( ) . setClass ( this , SiteActivity. class ) ;
tabView = new TabView ( this , getString ( R. string . bottom_tab_site_text ) ) ;
tabSpec = tabHost. newTabSpec ( "site" ) . setIndicator ( tabView ) . setContent ( intent ) ;
tabHost. addTab ( tabSpec ) ;
intent = new Intent ( ) . setClass ( this , UserActivity. class ) ;
tabView = new TabView ( this , getString ( R. string . bottom_tab_user_text ) ) ;
tabSpec = tabHost. newTabSpec ( "user" ) . setIndicator ( tabView ) . setContent ( intent ) ;
tabHost. addTab ( tabSpec ) ;
tabHost. setCurrentTab ( 1 ) ;
setCustomTitle ( getString ( R. string . app_name ) ) ;
}
/**
* 内部类 自定义Tab
* @author leon
*
*/
class TabView extends LinearLayout {
TextView tv ;
public TabView ( Context context, String label ) {
super ( context ) ;
tv = new TextView ( context ) ;
tv. setText ( label ) ;
tv. setGravity ( Gravity. CENTER ) ;
tv. setBackgroundColor ( Color . TRANSPARENT ) ;
tv. setTextColor ( Color . WHITE ) ;
tv. setPadding ( 0 , 10 , 0 , 10 ) ; /***dimension***/
tv. setLayoutParams ( new LayoutParams ( LayoutParams. WRAP_CONTENT ,
LayoutParams. WRAP_CONTENT , ( float ) 0.0 ) ) ;
setGravity ( Gravity. CENTER ) ;
setOrientation ( LinearLayout. VERTICAL ) ;
addView ( tv ) ;
setBackgroundDrawable ( this . getResources ( ) . getDrawable ( R. drawable . tab_background_selector ) ) ;
}
}
/**
* 设置自定义title
* @param msg
*/
protected void setCustomTitle ( String msg ) {
getWindow ( ) . setFeatureInt ( Window . FEATURE_CUSTOM_TITLE , R. layout . custom_titlebar ) ;
TextView tv = ( TextView ) getWindow ( ) . findViewById ( R. id . headerTitleTxtVw ) ;
tv. setText ( msg ) ;
}
}
1349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
