关于android 选项卡效果及选项卡在屏幕中位置的任意放置

本文链接：https://blog.csdn.net/Lee_cpp/article/details/8005738

在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上的选项卡效果大体上就实现了。大家有需要的就去试试吧。本人也是新手可能以上内容会有错误，欢迎大家指出。