android底部标签页的tab实现

本次项目中要求实现底部标签的tabActivity,

方法一:因为发现利用tabhost自身的tabwidget很难实现要求,

因此在布局文件中将tabwidget属性设置为不可见,自己进行布局。

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

 <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:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="#000000"

        android:orientation="vertical" >

 <FrameLayout 

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

     android:layout_width="fill_parent"

     android:layout_height="fill_parent"

  android:layout_weight="1">

      </FrameLayout>

 <TabWidget 

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

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

      android:visibility="gone"

   />

  <LinearLayout

     android:layout_width="fill_parent"    

     android:layout_height="wrap_content"

     android:background="@drawable/homepage_tab_bg"

     android:paddingTop="5px"

     android:orientation="horizontal"

   

  >

   <LinearLayout

         android:id="@+id/home_jingling"

         style="@style/home_tab_list"

         >

         <ImageView 

             android:id="@+id/home_jingling_image"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_weight="1"

             android:src="@drawable/homepage_icon_jingling_s"

             />

         <TextView 

             android:id="@+id/home_jingling_text"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_weight="1"

              android:text="精灵" />

  </LinearLayout>

       <LinearLayout

         android:id="@+id/home_friend"

         style="@style/home_tab_list">

         <ImageView 

             android:id="@+id/home_friend_image"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_weight="1"

             android:src="@drawable/homepage_icon_friend_uns"

             />

         <TextView 

             android:id="@+id/home_friend_text"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_weight="1"

             android:text="朋友"/>

  </LinearLayout>

       <LinearLayout

         android:id="@+id/home_setting"

         style="@style/home_tab_list">

         <ImageView 

             android:id="@+id/home_setting_image"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_weight="1"

             android:src="@drawable/homepage_icon_setting_uns"

             />

         <TextView 

             android:id="@+id/home_setting_text"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_weight="1"

             android:text="设置"/>

  </LinearLayout> 

 </LinearLayout> 

   </LinearLayout>

</TabHost>

 

在上述代码中,注意tabhost,tabwidget,framelayout的id不能随意指定,这样才能够在继承了tabactivity的java文件中通过getTabhost,getTabwidet来得到对应的控件。

为了同样达到点击自制的标签实现页面的跳转功能,需要在activity文件中,建立一个类实现view.onclicklistener();

package com.magic.activity;



import com.magic.entity.LoginInfo;

import com.magic.R;



import android.app.TabActivity;

import android.content.Intent;

import android.content.res.Resources;

import android.os.Bundle;

import android.util.Log;

import android.view.KeyEvent;

import android.view.View;

import android.view.Window;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TabHost;

import android.widget.TextView;



//这个类相对够复杂的

public class HomeActivity extends TabActivity {

	// 使用类本身作为监听器?

	Resources res;

	TabHost tabHost;

	private ImageView jinglingImage;

	private ImageView friendImage;

	private ImageView settingImage;

	private TextView jinglingText;

	private TextView friendText;

	private TextView settingText;

	//动画元素

	private Animation left_in;

	private Animation left_out;

	private Animation right_in;

	private Animation right_out;

	// 当前选中的tabId

int curTabId=R.id.home_jingling;

 

//下面这些变量在根据tabtag找到对应的tab时候会用到

	private final static String JINGLINGTAG ="tag1";

	private final static String FRIENDTAG="tab2";

	private final static String SETTINGTAG="tab3";

	LoginInfo loginInfo;

	@Override

	protected void onCreate(Bundle savedInstanceState) {

	 

		// TODO Auto-generated method stub

		super.onCreate(savedInstanceState);

		loginInfo=(LoginInfo)this.getIntent().getSerializableExtra("loginInfo");	 

		this.requestWindowFeature(Window.FEATURE_NO_TITLE);

		this.setContentView(R.layout.homelayout);

		res = this.getResources(); 		

		//初始化并且加载动画

		loadAnim();

		loadIntent();

		// 更具资源文件找到各个组件,并为对应的组件设置监听事件

		initView();

		 

		tabHost.setOnKeyListener(new View.OnKeyListener() {

			

			@Override

			public boolean onKey(View arg0, int arg1, KeyEvent arg2) {

				switch(arg2.getAction()){

				case KeyEvent.ACTION_DOWN:

					 if(arg2.getKeyCode()==KeyEvent.KEYCODE_BACK&&arg2.getRepeatCount()==0)

				jinglingImage.performClick();

				}

				return false;

			}

		});

	//	tabHost.getCurrentTabView().setOnKeyListener(new)

		

	}



	private void loadAnim() {

	left_in= AnimationUtils.loadAnimation(this, R.anim.left_in);

	left_out=AnimationUtils.loadAnimation(this, R.anim.left_out);

	right_in=AnimationUtils.loadAnimation(this, R.anim.right_in);

	right_out=AnimationUtils.loadAnimation(this, R.anim.right_out);

	}



	private void initView() {



		jinglingImage = (ImageView) this.findViewById(R.id.home_jingling_image);

		jinglingText = (TextView) this.findViewById(R.id.home_jingling_text);

		friendImage = (ImageView) this.findViewById(R.id.home_friend_image);

		friendText = (TextView) this.findViewById(R.id.home_friend_text);

		settingImage = (ImageView) this.findViewById(R.id.home_setting_image);

		settingText = (TextView) this.findViewById(R.id.home_setting_text);

		// 给初始的图像设置高亮,这里借助颜色资源文件

		jinglingText.setTextColor(res.getColor(R.color.color2));

		// 三个控件共用一个对象应该可以把

		View.OnClickListener listener = new Listener();

		LinearLayout jingling = (LinearLayout) this

				.findViewById(R.id.home_jingling);

		jingling.setOnClickListener(listener);

		LinearLayout setting = (LinearLayout) this

				.findViewById(R.id.home_setting);

		setting.setOnClickListener(listener);

		LinearLayout friend = (LinearLayout) this

				.findViewById(R.id.home_friend);

		friend.setOnClickListener(listener);

	}



	private void loadIntent() {



		Intent jinglingIntent = new Intent(this, JinglingActivity.class);

		tabHost = this.getTabHost();

 Intent intent=new Intent();

 intent.putExtra("loginInfo", loginInfo);

 intent.setClass(this, JinglingActivity.class);

		tabHost.addTab(tabHost

				.newTabSpec(JINGLINGTAG)

				.setIndicator(res.getString(R.string.jingling),

						res.getDrawable(R.drawable.homepage_icon_jingling_uns))

				.setContent(intent));

		tabHost.addTab(tabHost

				.newTabSpec(FRIENDTAG)

				.setIndicator(res.getString(R.string.friend),

						res.getDrawable(R.drawable.homepage_icon_friend_uns))

				.setContent(new Intent(this, FriendActivity.class)));

		tabHost.addTab(tabHost

				.newTabSpec(SETTINGTAG)

				.setIndicator("tab3")

				.setIndicator(res.getString(R.string.setting),

						res.getDrawable(R.drawable.homepage_icon_setting_uns))

				.setContent(new Intent(this, SettingActivity.class)));

	}



	

	private class Listener implements View.OnClickListener {



		@Override

		public void onClick(View v) {

			if (curTabId == v.getId()) {

				return;

			}

			jinglingImage

					.setImageResource(R.drawable.homepage_icon_jingling_uns);

			friendImage.setImageResource(R.drawable.homepage_icon_friend_uns);

			settingImage.setImageResource(R.drawable.homepage_icon_setting_uns);

			int color1 = res.getColor(R.color.color1);

			int color2 = res.getColor(R.color.color2);

			jinglingText.setTextColor(res.getColor(R.color.color1));

			friendText.setTextColor(color1);

			settingText.setTextColor(color1);

			

			int selectedId = v.getId();

			final boolean flag;

			//吐过选中的是左侧的tab,那么向左边退出,否则,如果选中的是右侧的tab,就向着右边退出

			if (curTabId < selectedId) {

				flag = true;

			} else {

				flag = false;

			}



			if (flag) {

	//如果选中的是当前选项卡左边的选项卡,那么当前的选项卡从左侧退出

				tabHost.getCurrentView().startAnimation(left_out);

			}else {

				tabHost.getCurrentView().startAnimation(right_out);

			}

			

			switch(selectedId){

			case R.id.home_jingling :

				tabHost.setCurrentTabByTag(JINGLINGTAG);

				jinglingImage.setImageResource(R.drawable.homepage_icon_jingling_s);

				jinglingText.setTextColor(color2);

				break;

			case R.id.home_friend:

				tabHost.setCurrentTabByTag(FRIENDTAG);

				friendImage.setImageResource(R.drawable.homepage_icon_friend_s);

				friendText.setTextColor(color2);

				break;

			case R.id.home_setting:

				tabHost.setCurrentTabByTag(SETTINGTAG);

				settingImage.setImageResource(R.drawable.homepage_icon_setting_s); 

				settingText.setTextColor(color2);

				break;

			}

			if(flag){

				//没有弄清楚getcurrenttabview与getcurrentview的区别

				//tabHost.getCurrentTabView().startAnimation(left_in);

				tabHost.getCurrentView().startAnimation(left_in);

			}else{

				tabHost.getCurrentView().startAnimation(right_in);

			}

			curTabId=selectedId;



		}



	}



}

  这样这个问题得到了圆满的解决。

方法2:

之前自己尝试过使用另外一种方法,但是发现其tab标签不能由用户自己灵活定制
对应的布局文件是
<?xml version="1.0" encoding="utf-8"?>

<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">

        <!-- 实现Tab标签的居底主要是通过设置属性 android:layout_weight="1" -->

        <!-- 还要注意FrameLayout标签的位置,要写在TabWidget标签的前面 -->

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

            android:layout_weight="1" 

            android:layout_width="fill_parent"

            android:layout_height="fill_parent" />

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

            android:layout_alignParentBottom="true"

             android:layout_width="fill_parent"

            android:layout_height="wrap_content" />

    </LinearLayout>

</TabHost>

对应的前台java文件是

package com.android.tabhost;



import android.app.TabActivity;

import android.content.Intent;

import android.content.res.Resources;

import android.graphics.Color;

import android.os.Bundle;

import android.view.View;

import android.widget.TabHost;

import android.widget.TabWidget;

import android.widget.TextView;

import android.widget.TabHost.OnTabChangeListener;



/**

 * <一句话功能简述>定制居底的TabHost<BR>

 * <功能详细描述>

 * 

 * @author chenli

 * @version [版本号, 2011-1-27]

 * @see [相关类/方法]

 * @since [产品/模块版本]

 */

public class MyTabHostFive extends TabActivity

{

    /**

     * TabHost控件

     */

    private TabHost mTabHost;



    /**

     * TabWidget控件

     */

    private TabWidget mTabWidget;



    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        mTabHost = this.getTabHost();

        /* 去除标签下方的白线 */

        mTabHost.setPadding(mTabHost.getPaddingLeft(),

                mTabHost.getPaddingTop(), mTabHost.getPaddingRight(),

                mTabHost.getPaddingBottom() - 5);

        Resources rs = getResources();



        Intent layout1intent = new Intent();

        layout1intent.setClass(this, Layout1.class);

        TabHost.TabSpec layout1spec = mTabHost.newTabSpec("layout1");

        layout1spec.setIndicator("layou1",

                rs.getDrawable(android.R.drawable.stat_sys_phone_call));

        layout1spec.setContent(layout1intent);

        mTabHost.addTab(layout1spec);



        Intent layout2intent = new Intent();

        layout2intent.setClass(this, Layout2.class);

        TabHost.TabSpec layout2spec = mTabHost.newTabSpec("layout2");

        layout2spec.setIndicator("layout2",

                rs.getDrawable(android.R.drawable.stat_sys_phone_call_forward));

        layout2spec.setContent(layout2intent);

        mTabHost.addTab(layout2spec);



        Intent layout3intent = new Intent();

        layout3intent.setClass(this, Layout3.class);

        TabHost.TabSpec layout3spec = mTabHost.newTabSpec("layout3");

        layout3spec.setIndicator("layout3",

                rs.getDrawable(android.R.drawable.stat_sys_phone_call_on_hold));

        layout3spec.setContent(layout3intent);

        mTabHost.addTab(layout3spec);



        /* 对Tab标签的定制 */

        mTabWidget = mTabHost.getTabWidget();

        for (int i = 0; i < mTabWidget.getChildCount(); i++)

        {

            /* 得到每个标签的视图 */

            View view = mTabWidget.getChildAt(i);

            /* 设置每个标签的背景 */

            if (mTabHost.getCurrentTab() == i)

            {

                view.setBackgroundDrawable(getResources().getDrawable(

                        R.drawable.number_bg_pressed));

            }

            else

            {

                view.setBackgroundDrawable(getResources().getDrawable(

                        R.drawable.number_bg));

            }

            /* 设置Tab间分割竖线的颜色 */

            // tabWidget.setBackgroundColor(Color.WHITE);

            /* 设置Tab间分割竖线的背景图片 */

            // tabWidget.setBackgroundResource(R.drawable.icon);

            /* 设置tab的高度 */

            mTabWidget.getChildAt(i).getLayoutParams().height = 50;

            TextView tv = (TextView) mTabWidget.getChildAt(i).findViewById(

                    android.R.id.title);

            /* 设置tab内字体的颜色 */

            tv.setTextColor(Color.rgb(49, 116, 171));

        }



        /* 当点击Tab选项卡的时候,更改当前Tab标签的背景 */

        mTabHost.setOnTabChangedListener(new OnTabChangeListener()

        {

            @Override

            public void onTabChanged(String tabId)

            {

                for (int i = 0; i < mTabWidget.getChildCount(); i++)

                {

                    View view = mTabWidget.getChildAt(i);

                    if (mTabHost.getCurrentTab() == i)

                    {

                        view.setBackgroundDrawable(getResources().getDrawable(

                                R.drawable.number_bg_pressed));

                    }

                    else

                    {

                        view.setBackgroundDrawable(getResources().getDrawable(

                                R.drawable.number_bg));

                    }

                }

            }

        });

    }

}

相比较而言,第一种方法的灵活性更大,推荐使用



                            

你可能感兴趣的:(android)