Android：布局实例之模仿微信Tab

微信Tab预览效果：

 

思路：

1、用TabHost+RadioGroup搭建基本布局，以RadioGroup代替TabWidget

2、设置按钮和文字的的样式和selector

3、创建相应的Activity

4、实现按钮和内容切换

布局：

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

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

     >

     

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical"

        >

    <FrameLayout 

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

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"        

        ></FrameLayout>

    

    <!-- 隐藏TabWidget -->

<TabWidget 

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

    android:visibility="gone"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    >

  </TabWidget>  

  

<!-- 视觉上,用单选按钮替代TabWidget -->

    <RadioGroup 

        android:id="@+id/main_radiogroup"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/mmfooter_bg"

          android:paddingTop="8dp"      

       android:orientation="horizontal"

        >

        <RadioButton 

          android:id="@+id/tab_icon_weixin"

          android:checked="true"

          android:textColor="@color/tab_text"    

          android:drawableTop="@drawable/tab_weixin"    

          android:text="@string/radio1_text"

          style="@style/tab_button_bg"

            />

        

         <RadioButton 

           android:id="@+id/tab_icon_address"   

          android:textColor="@color/tab_text"    

          android:drawableTop="@drawable/tab_address"    

          android:text="@string/radio2_text"

          style="@style/tab_button_bg"

            />

         

         

          <RadioButton 

          android:id="@+id/tab_icon_friend"   

          android:textColor="@color/tab_text"    

          android:drawableTop="@drawable/tab_frd"    

          android:text="@string/radio3_text"

          style="@style/tab_button_bg"

            />

          

          

           <RadioButton 

          android:id="@+id/tab_icon_setting"          

          android:textColor="@color/tab_text"    

          android:drawableTop="@drawable/tab_set"    

          android:text="@string/radio4_text"

          style="@style/tab_button_bg"

            />

        

    </RadioGroup>

</LinearLayout>

</TabHost>

按钮样式：

    <!-- 按钮文字样式 -->

    <style name="tab_text_color">

        <item name="android:textColor">@color/tab_text</item>

        <item name="android:textSize">12dp</item>  

        <!-- 从左向右跑马灯效果 -->

        <item name="android:ellipsize">marquee</item>   

        <!-- 单行显示 -->

        <item name="android:singleLine">true</item>   

    </style>

    

    <!-- 按钮样式 -->

    <style name="tab_button_bg">

        <item name="android:textAppearance">@style/tab_text_color</item>

          <item name="android:gravity">center</item>  

        <item name="android:background">@drawable/tab_bg</item>

        <item name="android:layout_width">0dp</item>

        <item name="android:layout_height">wrap_content</item>

        <item name="android:button">@null</item>

        <item name="android:layout_weight">1</item> 

    </style>

按钮图片selector

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

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

    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_address_pressed"></item>

 <item android:drawable="@drawable/tab_address_normal"></item>

</selector>

按钮文字selector

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

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

  <item android:state_checked="true" android:color="@color/white"></item>

  <item android:color="@color/grey"></item>

</selector>

程序：

public class MainActivity extends TabActivity{

    private TabHost tabhost;

    private RadioGroup main_radiogroup;  

     private RadioButton tab_icon_weixin, tab_icon_address, tab_icon_friend,tab_icon_setting;  

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.demo);

        

        //获取按钮

        main_radiogroup = (RadioGroup) findViewById(R.id.main_radiogroup);

        

        tab_icon_weixin = (RadioButton) findViewById(R.id.tab_icon_weixin);

        tab_icon_address = (RadioButton) findViewById(R.id.tab_icon_address);

        tab_icon_friend = (RadioButton) findViewById(R.id.tab_icon_friend);

        tab_icon_setting = (RadioButton) findViewById(R.id.tab_icon_setting);

        

        //往TabWidget添加Tab

        tabhost = getTabHost();

        tabhost.addTab(tabhost.newTabSpec("tag1").setIndicator("0").setContent(new Intent(this,Activity1.class)));

        tabhost.addTab(tabhost.newTabSpec("tag2").setIndicator("1").setContent(new Intent(this,Activity2.class)));

        tabhost.addTab(tabhost.newTabSpec("tag3").setIndicator("2").setContent(new Intent(this,Activity3.class)));

        tabhost.addTab(tabhost.newTabSpec("tag4").setIndicator("3").setContent(new Intent(this,Activity4.class)));

         

        //设置监听事件

        checkListener checkradio = new checkListener();

        main_radiogroup.setOnCheckedChangeListener(checkradio);

    }



    

    //监听类

    public class checkListener implements OnCheckedChangeListener{

        @Override

        public void onCheckedChanged(RadioGroup group, int checkedId) {

            // TODO Auto-generated method stub

            //setCurrentTab 通过标签索引设置当前显示的内容

            //setCurrentTabByTag 通过标签名设置当前显示的内容

            switch(checkedId){

            case R.id.tab_icon_weixin:

                tabhost.setCurrentTab(0);

                //或

                //tabhost.setCurrentTabByTag("tag1");

                break;

            case R.id.tab_icon_address:

                tabhost.setCurrentTab(1);

                break;

            case R.id.tab_icon_friend:

                tabhost.setCurrentTab(2);

                break;

            case R.id.tab_icon_setting:

                tabhost.setCurrentTab(3);

                break;

            }



            

        }

    }

   



}

实例下载>>>>>

 

相关的文章：

Android：TabHost实现Tab切换

Android：res之selector背景选择器

Android：Activity之间跳转和参数传递