在PC端我们经常见到选项卡 选项卡简洁,便捷,美观 下面介绍一下选项卡在android中的实现。
先放上2张效果图:
进入正题 先贴上布局文件的代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/dtbg"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/jy_backbutton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/dtfh"
/>
<TextView
android:id="@+id/jy_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/dttt"
android:text="家园论坛"
android:layout_toRightOf="@+id/jy_backbutton"
android:gravity="center"
android:textSize="25dp"
/>
<ImageView
android:id="@+id/jytp"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_below="@+id/jy_title"
android:background="@drawable/jy"/>
/>
<!--重点内容-->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_below="@id/jytp"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="#003366"
android:layout_weight="0"
android:gravity="center"
/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view2"
android:text="这是热帖"
/>
<TextView
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是热帖"
/>
</FrameLayout>
</LinearLayout>
</TabHost>
<!--这是我做的东西的内容 大家可以忽略 为了让大家看下效果-->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFCC"
android:layout_below="@android:id/tabhost"
>
<TextView
android:id="@+id/jy_line"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#000000"/>
<TextView
android:id="@+id/jy_fake1"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_below="@+id/jy_line"/>
<ImageView
android:id="@+id/xxzh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/xxzh"
android:layout_below="@id/jy_fake1"
android:layout_marginLeft="20dp"
/>
<TextView
android:id="@+id/xxzh_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 信息综合"
android:textSize="15dp"
android:layout_toRightOf="@id/xxzh"
android:layout_below="@id/jy_fake1"
/>
<TextView
android:id="@+id/xxzh_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 学生市场\n XX问问\n 勤工俭学"
android:layout_toRightOf="@id/xxzh"
android:layout_below="@id/xxzh_title"
/>
<ImageView
android:id="@+id/kfxq"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/kfxq"
android:layout_below="@id/jy_fake1"
android:layout_marginLeft="180dp"
/>
<TextView
android:id="@+id/kfxq_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:text=" 咖啡心情"
android:layout_toRightOf="@id/kfxq"
android:layout_below="@id/jy_fake1"
/>
<TextView
android:id="@+id/kfxq_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 文字心情\n 闲聊酒吧\n"
android:layout_toRightOf="@id/kfxq"
android:layout_below="@id/kfxq_title"
/>
<TextView
android:id="@+id/jy_fake2"
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_below="@id/xxzh_content"/>
<ImageView
android:id="@+id/bfah"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bfah"
android:layout_below="@id/jy_fake2"
android:layout_marginLeft="20dp"
/>
<TextView
android:id="@+id/bfah_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:text=" 缤纷爱好"
android:layout_toRightOf="@id/bfah"
android:layout_below="@id/jy_fake2"
/>
<TextView
android:id="@+id/bfah_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 快拍XX\n 体坛动态\n XX2012暑期社会实践"
android:layout_toRightOf="@id/bfah"
android:layout_below="@id/bfah_title"
/>
<ImageView
android:id="@+id/glzq"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/glzq"
android:layout_below="@id/jy_fake2"
android:layout_marginLeft="180dp"
/>
<TextView
android:id="@+id/glzq_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:text=" 管理专区"
android:layout_toRightOf="@id/glzq"
android:layout_below="@id/jy_fake2"
/>
<TextView
android:id="@+id/glzq_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 申请专区\n 斑竹专区\n 建议投诉\n 论坛公告"
android:layout_toRightOf="@id/glzq"
android:layout_below="@id/glzq_title"
/>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
下面重点来看选项卡部分的代码:
<!--TabHost为tab的容器 id必须为tabhost-->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_below="@id/jytp"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!--TabWidget为选项卡的标签 id必须为tabs-->
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:background="#003366"
android:layout_weight="0"
android:gravity="center"
/>
<!--Tab的内容 id必须为tabcontent-->
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<!--内容可以根据需要 可以是textview imageview等等 有几个标签就可以放几个组件>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view2"
android:text="这是热帖"
/>
<TextView
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是新帖"/>
</FrameLayout>
</LinearLayout>
</TabHost>
其实选项卡任意位置放置就是利用linearlayout讲所有的组件包起来 只是哪个组件放在上面哪个放在下面的问题 我们可以将选项卡放在顶部 中部 或者是底部。
下面贴上JAVA部分的代码:
package com.example.hdu_tong;
import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
public class HsjytabActivity extends TabActivity { // 让这个activity继承Tabactivity
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.hsjy);
setTitle("红色家园");
TabHost tabHost = getTabHost();
tabHost.addTab(tabHost.newTabSpec("tab1")
.setIndicator("热帖")
.setContent(R.id.view1)); //与xml中的内容部分的id要对应起来
tabHost.addTab(tabHost.newTabSpec("tab2")
.setIndicator("新帖")
.setContent(R.id.view2));
TabWidget tabWidget=this.getTabWidget();
//下面是一些美化工作 也比较常用实用。
for (int i = 0; i < tabWidget.getChildCount(); i++) {
TextView tv=(TextView)tabWidget.getChildAt(i).findViewById(android.R.id.title);
tv.setTextSize(20);//设置字体的大小;
tv.setTextColor(Color.WHITE);//设置字体的颜色;
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tv.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, 0); //取消文字底边对齐
params.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); //设置文字居中对齐
}
}
这样android上的选项卡效果大体上就实现了。大家有需要的就去试试吧。本人也是新手 可能以上内容会有错误,欢迎大家指出。