Android UI中间凸起的Tab(Raised Center Tabbar)

[color=blue][b](1)自定义Tab[/b][/color]
通过tabHost的indicator来设置自己特殊的布局。
public class MainActivity extends TabActivity {

TabHost tabHost;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

tabHost = getTabHost();
setTabs();
tabHost.setCurrentTab(0);
}

private void setTabs() {
addTab("Home", R.drawable.tab_home, HomeActivity.class);
addTab("Chat", R.drawable.tab_chat, ChatActivity.class);
}

private void addTab(String labelId, int drawableId, Class<?> c) {
TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId);
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
TextView title = (TextView) tabIndicator.findViewById(R.id.title);
title.setText(labelId);
ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
icon.setImageResource(drawableId);

spec.setIndicator(tabIndicator);
spec.setContent(new Intent(this, c));
tabHost.addTab(spec);
}

}


[b]主页面 res/layout/main.xml[/b]
把<TabWidget>放在<FrameLayout>的下边,让Tab导航处于屏幕底部
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 ... >
<TabHost android:id="@android:id/tabhost" .. >
<LinearLayout .. >
<!-- 主体内容部分 -->
<FrameLayout android:id="@android:id/tabcontent" .. />
<!-- Tab导航部分 -->
<TabWidget android:id="@android:id/tabs" .. />
</LinearLayout>
</TabHost>
</RelativeLayout>


[b]Tab布局 res/layout/tab_indicator.xml[/b]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      :
>
<ImageView android:id="@+id/icon" <-- ①
      :
/>
<TextView android:id="@+id/title" <-- ②
      :
android:textColor="@color/tab_text" <-- ③
/>
</RelativeLayout>


[b]每个Tab的图标 res/drawable/tab_home.xml[/b]
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:drawable="@drawable/home_normal"/>
<item android:state_selected="true" android:drawable="@drawable/home_selected" />
</selector>


[b]Tab文字色 res/color/tab_text.xml[/b]
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:color="#f888" />
<item android:state_selected="true" android:color="#ffff" />
</selector>


[color=blue][b](2)做一个中间凸起的Tab[/b][/color]

[b]主页面 res/layout/main.xml[/b]
TabHost的下边添加
<ImageButton
android:id="@+id/ibHome"
android:layout_width="70sp"
android:layout_height="70sp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@null"
android:src="@drawable/camera" />


[b]MainActivity.java[/b]
ImageButton ib = (ImageButton) findViewById(R.id.ibHome);
ib.setOnClickListener(new OnClickListener() {
//...
});


[b]在所有的Tab中间添加一个虚拟的Tab[/b]
addTab("", R.drawable.tab_home, HomeActivity.class);


[b]最终效果图:[/b]
[img]http://dl2.iteye.com/upload/attachment/0107/2344/505f5193-e880-3e59-8ba7-db2cdb5e70eb.png[/img]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值