`
rensanning
  • 浏览: 3509852 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:37407
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:603972
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:677512
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:86989
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:399568
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:68983
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:90294
社区版块
存档分类
最新评论

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

 
阅读更多
(1)自定义Tab
通过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);
    }

}


主页面 res/layout/main.xml
把<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>


Tab布局  res/layout/tab_indicator.xml
<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>


每个Tab的图标 res/drawable/tab_home.xml
<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>


Tab文字色 res/color/tab_text.xml
<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>


(2)做一个中间凸起的Tab

主页面 res/layout/main.xml
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" />


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


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


最终效果图:

  • 大小: 16.2 KB
分享到:
评论
1 楼 geofferysun 2015-09-23  
    其实是个假的,只是个样子,多出来那一部分还是不行

相关推荐

Global site tag (gtag.js) - Google Analytics