Android TabHost 选项卡 滑动activity进行切换选项卡

1、布局界面:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EBF1F1"
    android:orientation="vertical" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:showDividers="none"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

2、tab选项卡布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dip"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tab_name"
        android:layout_width="match_parent"
        android:layout_height="35dip"
        android:background="@color/blue_shallow"
        android:gravity="center"
        android:textSize="15sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="5dip"
        android:background="@color/gray_line"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/tab_line"
            android:layout_width="match_parent"
            android:layout_height="5dip"
            android:background="#FF9900"
            android:visibility="gone" />
    </LinearLayout>

</LinearLayout>
3、主activity的代码:

public class TestActivity extends TabActivity  {
	protected TabHost tabHost;
	private static final String TAB_PAGE1="page1";
	private static final String TAB_PAGE2="page2";
	private static final String TAB_PAGE3="page3";
	private static final String TAB_PAGE4="page4";
	
	private int tab_last_position;
	//通过TabWidget可以获取选项卡的布局
	private TabWidget mTabWidget;
	 
	private static final int SWIPE_MIN_DISTANCE = 120;
	private static final int SWIPE_MAX_OFF_PATH = 250;
	private static final int SWIPE_THRESHOLD_VELOCITY = 200;
	private GestureDetector gestureDetector;
	View.OnTouchListener gestureListener;
	 
	private static int maxTabIndex = 3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.apply_main);
        
        tabHost = getTabHost();
       
        TabSpec tabSpec = tabHost.newTabSpec(TAB_PAGE1);
        tabSpec.setIndicator(createTabView("音乐"));
        Intent intent = new Intent(this, GovernmentActivity.class);
        tabSpec.setContent(intent);
        tabHost.addTab(tabSpec);

        tabSpec = tabHost.newTabSpec(TAB_PAGE2);
        intent = new Intent(this, ClassifyActivity.class);
        tabSpec.setContent(intent);
        tabSpec.setIndicator(createTabView("电影"));
        tabHost.addTab(tabSpec);

        tabSpec = tabHost.newTabSpec(TAB_PAGE3);
        tabSpec.setIndicator(createTabView("电视剧"));
        intent = new Intent(this, PaihangActivity.class);
        tabSpec.setContent(intent);
        tabHost.addTab(tabSpec);
        //
        tabSpec = tabHost.newTabSpec(TAB_PAGE4);
        tabSpec.setIndicator(createTabView("书籍"));
        intent = new Intent(this, FirstTestActivity.class);
        tabSpec.setContent(intent);
        tabHost.addTab(tabSpec);
        //默认使其选中
        tabHost.setCurrentTab(0);
        tab_last_position=0;
        View view =  tabHost.getCurrentTabView();
		ImageView imageView = (ImageView) view.findViewById(R.id.tab_line);
		TextView mTextView = (TextView) view.findViewById(R.id.tab_name);
		imageView.setVisibility(View.VISIBLE);
		mTextView.setTextColor(Color.GREEN);
		mTabWidget = tabHost.getTabWidget();
		
		 
		
        tabHost.setOnTabChangedListener(new OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				ImageView imageView = null;
				Logger.getLogger().i("------>" + tab_last_position);
				//获取到视图,可以对其进行样式的改变
				View lastView = mTabWidget.getChildAt(tab_last_position);
				imageView = (ImageView) lastView.findViewById(R.id.tab_line);
				TextView mTextView = (TextView) lastView.findViewById(R.id.tab_name);
				if (imageView!=null) {
					imageView.setVisibility(View.GONE);
					mTextView.setTextColor(getResources().getColor(R.color.white));
				}
				
				View view =  tabHost.getCurrentTabView();
				imageView = (ImageView) view.findViewById(R.id.tab_line);
				mTextView = (TextView) view.findViewById(R.id.tab_name);
				imageView.setVisibility(View.VISIBLE);
				mTextView.setTextColor(Color.GREEN);
				
				mTabWidget = tabHost.getTabWidget();
				tab_last_position = tabHost.getCurrentTab();
				 
			}
		});
        
        
        //滑动事件
        gestureDetector = new GestureDetector(new TabGestureDetector());  
//        gestureListener = new View.OnTouchListener() {  
//            public boolean onTouch(View v, MotionEvent event) {  
//                if (gestureDetector.onTouchEvent(event)) {  
//                    return true;  
//                }  
//                return false;  
//            }  
//        };  
        
    }
    
    // 创建tab标签
    protected View createTabView(String name) {
        View tabView = getLayoutInflater().inflate(R.layout.tab_background, null);
        TextView textView = (TextView) tabView.findViewById(R.id.tab_name);// 找到textview控件
        textView.setText(name);
        return tabView;
    }
    
    
    // 左右滑动刚好页面也有滑动效果  
    private class TabGestureDetector extends SimpleOnGestureListener {  
        @Override  
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
                float velocityY) {  
           
            try {  
                if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)  
                    return false;  
                // right to left swipe  
                int currentView = tabHost.getCurrentTab();
                
                if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE  
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {  
                    Log.i("test", "right" +currentView);  
                    if (currentView<maxTabIndex) {  
                    	currentView++;
                    	 tabHost.setCurrentTab(currentView);  
                    }
                } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE  
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {  
                    Log.i("test", "left" +currentView);  
                    if (currentView > 0) {  
                    	 currentView--;  
                    	 tabHost.setCurrentTab(currentView);  
                    }
                    
                }  
            } catch (Exception e) {  
            	e.printStackTrace();
            }  
            return false;  
        }  
    }  
  
    @Override  
    public boolean dispatchTouchEvent(MotionEvent event) {  
        if (gestureDetector.onTouchEvent(event)) {  
        	Log.i("test", "---------------dispatch ... ");  
            event.setAction(MotionEvent.ACTION_CANCEL);  
        }  
        return super.dispatchTouchEvent(event);  
    }  
     
}



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
TabHostAndroid 中常用的一个布局控件,可以用于实现选项卡的效果。要实现左侧选项卡,可以通过以下步骤: 1. 在布局文件中,使用 TabHost 控件,并设置其高度和宽度为 match_parent。 2. 在 TabHost 中添加一个 TabWidget 控件,用于显示选项卡标签。 3. 在 TabHost 中添加一个 FrameLayout 控件,用于显示选项卡内容。 4. 在代码中,使用 TabHost.newTabSpec() 方法创建一个新的选项卡,设置其标签和内容,并将其添加到 TabHost 中。 5. 在 TabWidget 中设置选项卡标签的样式,例如设置背景颜色、文字颜色等等。 6. 在 TabHost 中设置选项卡切换方式,例如设置为点击切换滑动切换。 以下是一个简单的示例代码,演示如何实现左侧选项卡: ``` <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="#f0f0f0" android:orientation="vertical" android:layout_alignLeft="@android:id/tabcontent" android:layout_alignStart="@android:id/tabcontent"> </TabWidget> ``` Java 代码: ``` TabHost tabHost = findViewById(android.R.id.tabhost); tabHost.setup(); // 创建一个新的选项卡 TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1"); spec1.setIndicator("选项卡1"); spec1.setContent(R.id.tab1); tabHost.addTab(spec1); // 创建另一个选项卡 TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2"); spec2.setIndicator("选项卡2"); spec2.setContent(R.id.tab2); tabHost.addTab(spec2); // 设置选项卡切换方式 tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { // 处理选项卡切换事件 } }); // 设置选项卡标签的样式 TabWidget tabWidget = tabHost.getTabWidget(); for (int i = 0; i < tabWidget.getChildCount(); i++) { View view = tabWidget.getChildAt(i); view.setBackgroundColor(Color.parseColor("#ffffff")); TextView textView = view.findViewById(android.R.id.title); textView.setTextColor(Color.parseColor("#000000")); } ``` 以上代码中,通过添加两个选项卡实现左侧选项卡的效果。您可以根据需要添加更多的选项卡,并自定义选项卡标签的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值