fragementtabhost总结用法 标签tab切换

总结一下tab切换

1、在main layout里面定义两个framentlayout


   
   

   
   

    
    
    

    
    
    

        
     
                 
    
    
    


   
   

2、定义tab的布局要页面:


   
   

   
   

    
    
    
    
    
    

    
    
    
    
    
    


   
   

3、在mainactivity中定义layoutflater 寻找tab页面,

tabhost.addtab 将定义的tab和activity绑定

package com.fragmenttabhost;

import com.yangyu.mycustomtab02.R;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

/**
 * @author yangyu
 *	功能描述:自定义TabHost
 */
public class MainTabActivity extends FragmentActivity implements OnTouchListener,OnGestureListener{	
	//定义FragmentTabHost对象
	 public FragmentTabHost mTabHost;
	
	 public GestureDetector gesture;
	 private final int mindistance = 5;//滑动最小距离
	 
	//定义一个布局
	private LayoutInflater layoutInflater;
		
	//定义数组来存放Fragment界面
	private Class fragmentArray[] = {FragmentPage1.class,FragmentPage2.class,FragmentPage3.class,FragmentPage4.class,FragmentPage5.class};
	
	//定义数组来存放按钮图片
	private int mImageViewArray[] = {R.drawable.tab_home_btn,R.drawable.tab_message_btn,R.drawable.tab_selfinfo_btn,
									 R.drawable.tab_square_btn,R.drawable.tab_more_btn};
	
	//Tab选项卡的文字
	public String mTextviewArray[] = {"首页", "消息", "好友", "广场", "更多"};
	
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_tab_layout);
        
        gesture =new GestureDetector(this, this);;  
	      
        LinearLayout  linearlayout1 = (LinearLayout)findViewById(R.id.linearlayout);
        linearlayout1.setOnTouchListener(this);
        linearlayout1.setLongClickable(true); //***********注意
        
        
        initView();
    }
	 
	/**
	 * 初始化组件
	 */
	private void initView(){
		//实例化布局对象
		layoutInflater = LayoutInflater.from(this);
				
		//实例化TabHost对象,得到TabHost
		mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
		mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);	
		
		//得到fragment的个数
		int count = fragmentArray.length;	
				
		for(int i = 0; i < count; i++){	
			//为每一个Tab按钮设置图标、文字和内容
			TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));
			//将Tab按钮添加进Tab选项卡中
			mTabHost.addTab(tabSpec, fragmentArray[i], null);
			//设置Tab按钮的背景
			mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);
		}//for
		
		
		
	}
				
	/**
	 * 给Tab按钮设置图标和文字
	 */
	private View getTabItemView(int index){
		View view = layoutInflater.inflate(R.layout.tab_item_view, null);
		
	
		ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
		imageView.setImageResource(mImageViewArray[index]);
		
		TextView textView = (TextView) view.findViewById(R.id.textview);		
		textView.setText(mTextviewArray[index]);
	
		return view;
	}
	
	@Override
	public boolean onTouch(View arg0, MotionEvent arg1) {
		
		return gesture.onTouchEvent(arg1); //************注意
	}
	@Override
	public boolean onDown(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return true;
	}

	@Override
	public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
			float arg3) {
		// TODO Auto-generated method stub
		int CurrentTab;//当前tab标签下标
		if((arg1.getX()-arg0.getX()>mindistance))
		{
		CurrentTab = mTabHost.getCurrentTab();//取当前标签位置
		mTabHost.setCurrentTab((CurrentTab+1)%mTextviewArray.length);//对所有当前标签做右移位置加1操作,(求余)
		}//if
		else if((arg0.getX()-arg1.getX()>mindistance))
		{
		CurrentTab = mTabHost.getCurrentTab();//取当前标签位置
		if(CurrentTab!=0) mTabHost.setCurrentTab(CurrentTab-1);//对所有当前标签做左移位置减1操作,(求余)
		else mTabHost.setCurrentTab(mTextviewArray.length-1);
	
		}
		return true;
	}

	@Override
	public void onLongPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
			float arg3) {
		// TODO Auto-generated method stub
		return false;
	}

	@Override
	public void onShowPress(MotionEvent arg0) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public boolean onSingleTapUp(MotionEvent arg0) {
		// TODO Auto-generated method stub
		return false;
	}


	
}

4、相应的activity里面定义

package com.fragmenttabhost;

import com.yangyu.mycustomtab02.R;

import android.app.Activity;
import android.media.Image;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;


public class FragmentPage1 extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		    View view = inflater.inflate(R.layout.fragment_1, null);
		    TextView textView = (TextView)view.findViewById(R.id.textView1);
		    textView.setText("改变内容");
		    ImageView imageView = (ImageView)view.findViewById(R.id.imageview);
		    imageView.setOnClickListener(new OnClickListener() {
				
				public void onClick(View v) {
					// TODO Auto-generated method stub
					Toast.makeText(getActivity(), "图片点击事件", Toast.LENGTH_SHORT).show();
				}
			});
		    return view;
	
	}	
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的jQuery实现tab标签滑动切换效果的示例代码: HTML结构: ```html <div class="tab-wrap"> <ul class="tab-nav"> <li class="active">Tab1</li> <li>Tab2</li> <li>Tab3</li> <li>Tab4</li> </ul> <div class="tab-content"> <div class="tab-pane active">Tab1 Content</div> <div class="tab-pane">Tab2 Content</div> <div class="tab-pane">Tab3 Content</div> <div class="tab-pane">Tab4 Content</div> </div> </div> ``` CSS样式: ```css .tab-wrap { position: relative; } .tab-nav { display: flex; justify-content: space-between; } .tab-nav li { cursor: pointer; padding: 10px; font-size: 16px; font-weight: bold; border: 1px solid #ccc; border-bottom: none; } .tab-nav li.active, .tab-nav li:hover { background-color: #ccc; } .tab-content { position: absolute; top: 40px; left: 0; width: 100%; height: 200px; overflow: hidden; } .tab-pane { display: none; padding: 20px; } .tab-pane.active { display: block; } ``` JavaScript代码: ```javascript $(function() { // 获取tab标签和内容元素 var $tabNav = $(".tab-nav li"); var $tabContent = $(".tab-pane"); // 绑定tab标签点击事件 $tabNav.click(function() { // 获取点击的tab标签索引 var index = $(this).index(); // 切换tab标签的active类 $tabNav.removeClass("active"); $(this).addClass("active"); // 滑动切换tab内容 $tabContent.stop().animate({ "top": -index * $tabContent.height() }, 500); }); }); ``` 这段代码实现了以下功能: - 点击tab标签切换标签的active状态 - 滑动切换tab内容 注意:这只是一个简单的示例,具体实现方式可以根据需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值