展会信息港展会大全

android TabActivity的美化
来源:互联网   发布日期:2015-10-03 11:10:04   浏览:2663次  

导读:第一篇从TabActivity着手,一直以为Android中的TabActivity只能放在上面,只能如此丑陋,直到有一天看到米聊。咋一看,软件下面的那个菜单栏,觉得像是用LinearLayout+Button来实现的,但事实上,它却是一个Tab!......

第一篇从TabActivity着手,一直以为Android中的TabActivity只能放在上面,只能如此丑陋,直到有一天看到 米聊 。

咋一看,软件下面的那个菜单栏,觉得像是用LinearLayout+Button来实现的,但事实上,它却是一个Tab!

怎么看出来的?我就不多说了,你懂的。

下面我们来抽丝剥茧,一步步分析它的实现过程。

1.TabActivity的布局

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<LinearLayout

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<FrameLayout

android:gravity="center"

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1.0" >

<LinearLayout android:id="@+id/first"

android:orientation="vertical"

android:background="#ffffff"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="first tab" />

</LinearLayout>

<LinearLayout android:id="@+id/second"

android:orientation="vertical"

android:background="#ffffff"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="second tab" />

</LinearLayout>

</FrameLayout>

<TabWidget

android:id="@android:id/tabs"

android:background="@drawable/tab_bottom_bg"

android:padding="3.0dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="0.0" />

</LinearLayout>

</TabHost>

我们看到,要自定义一个位于屏幕下方的TAB标签,首先我们不能使用缺省的TabActivity实现了,啥事都要自己亲力亲为。

很好理解,把tabs放在tabcontent下面就可以了。其它不多说了。

2.MainActivity的实现代码

先看看缺省的实现代码,不复杂,省略一些无关的东西:

private void setIndicator(int icon, int title, int view) {

String str = getResources().getString(title);

TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view);

tabhost.addTab(localTabSpec);

}

private void setIndicator(int icon, int title, int view) {

String str = getResources().getString(title);

TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view);

tabhost.addTab(localTabSpec);

}

可以测试一下,效果出来了吧,虽然有点丑,但它真的在屏幕下方了。

3.美化TAB标签

现在我们来定制这个TAB的标签。先看代码:

private void setIndicator(int icon, int title, int view) {

View localView = LayoutInflater.from(this.tabhost.getContext()).inflate(R.layout.main_activity_tab, null);

((ImageView)localView.findViewById(R.id.main_activity_tab_image)).setBackgroundResource(icon);

((TextView)localView.findViewById(R.id.main_activity_tab_text)).setText(title);

String str = getResources().getString(title);

TabHost.TabSpec localTabSpec = tabhost.newTabSpec(str).setIndicator(localView).setContent(view);

tabhost.addTab(localTabSpec);

}

注意到这个main_activity_tab的layout了吧,看看它的内容:

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:gravity="center"

android:orientation="vertical"

android:id="@id/tabsLayout"

android:background="@drawable/tab_item_bkg"

android:padding="3.0dip"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="3.0dip"

android:layout_marginBottom="3.0dip"

>

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="0.6">

<ImageView

android:layout_gravity="center"

android:id="@id/main_activity_tab_image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="2.0dip"

android:scaleType="center" />

</FrameLayout>

<TextView

android:textSize="12.0dip"

android:textColor="@drawable/tab_text_selector"

android:id="@id/main_activity_tab_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Title" />

</LinearLayout>

这个文件定义了每个TAB标签的样式,tab_item_bkg定义每个item的背景(包括focused/selected/pressed),每个item上面的图标和下面的文字都在代码中动态定义即可。其中tab_text_selector则定义文字的颜色

赞助本站

人工智能实验室

相关热词: TabActivity

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港