• 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));
                        }
                    }
                }
            });
        }
    }

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

    
    
  • 相关阅读:
    常见概念
    网站扒取
    图书管理系统易错点整理
    CSIC_716_2020104【Django入门---静态文件、request对象方法、ORM增删改查】
    CSIC_716_2020103【Django入门---HttpResponse、render、redirect】
    CSIC_716_2020102【前端框架Bootstrap】
    CSIC_716_2020101【???】
    CSIC_716_20191231【jQuery基础入门】
    CSIC_716_20191230【前端的BOM与DOM】
    ss
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/2956494.html
Copyright © 2020-2023  润新知