botoom tab + title bar
16lz
2021-01-23
在Android上实现Iphone风格 bottom tab + title bar
— leon @ 4:04 pm很多用户都喜欢iphone的tabbar，而android默认的tab风格不是很好看，如下图所示。
但android界面所有组件都可以自定义现对android的tab和title自定义风格：
左边iphone界面 android界面tablayout
一、自定义tab实现iphonestyletab
1、实现bottomtab：将tab放置在底部 利用相对布局，将TabWidget放在FrameLayout底部，主界面布局文件main_activity.xml如下：
| 1 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 | <?xml version ="1.0" encoding ="utf-8" ?> <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、定义Drawableshap和Selector
定义tab选择和未被选择时的背景样式，tab_background_selector.xml
| 1 2 3 4 5 6 7 8 | <?xml version ="1.0" encoding ="utf-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
| 1 2 3 4 5 6 7 8 9 | <?xml version ="1.0" encoding ="UTF-8" ?> <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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?xml version ="1.0" encoding ="UTF-8" ?> <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）代码如下：
| 1 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,实现iphonestyletopbar效果
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、自定义windowtitlestyle 在values中创建styles.xml文件
| 1 2 3 4 5 6 7 8 9 | <?xml version ="1.0" encoding ="utf-8" ?> <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，即drawableshape：
| 1 2 3 4 5 6 7 8 9 | <?xml version ="1.0" encoding ="UTF-8" ?> <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
| 1 2 3 4 5 6 7 8 | <?xml version ="1.0" encoding ="utf-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：
| 1 2 3 4 5 6 7 | <activity android:name =".MainActivity" 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中调用：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | protected void onCreate ( Bundle savedInstanceState ) { 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完整代码：
| 1 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 | package com.android.onelife ; 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 ) ; } } |
更多相关文章
- 布局（2、相对布局）
- android 设置布局为无标题样式
- android 去除ScrollVIew拉到尽头时再拉的阴影效果和个别机型的阻
- Android 解决布局问题
- Android 实现 按钮从两边移到中间动画效果
- android卡片布局CardView
- AndroidのUI布局之layout weight
- Android VR效果GoogleVR
- Android_布局属性大全