多种多样的App主界面Tab实现方法（一）：Viewpager

最新推荐文章于 2024-09-26 14:24:29 发布

原创最新推荐文章于 2024-09-26 14:24:29 发布 · 551 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#tab #ViewPager

android 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用ViewPager实现Tab页面的方法。通过LayoutInflater加载不同Tab的内容，并利用PagerAdapter将其与ViewPager结合，实现页面间的平滑切换。同时展示了如何通过点击底部导航栏图标来改变当前显示的Tab。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近看了慕课网hyman老师的课程，感觉收获很多，所以打算给大家“传销”一下。大家也可以看一下视频，讲得很好。视频连接http://www.imooc.com/learn/264

现在实现tab页面的方式有很多，我会整理一下常用的，把代码贴出来，大家参考一下。

使用ViewPager可以实现图片的滑动，那么肯定也能实现tab的效果。

top.xml

<?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="50dp"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="@drawable/title_bar"
        android:text="@string/title"
        android:textColor="#ffffff"
        android:textSize="22sp"/>"
</LinearLayout>

bottom.xml

<?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="55dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal">
    <LinearLayout 
        android:id="@+id/weixin_tab"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton 
            android:id="@+id/weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/weixin"
            android:textColor="#ffffff"/>
    </LinearLayout>
        
  	<LinearLayout 
        android:id="@+id/frd_tab"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton 
            android:id="@+id/frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd_normal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/frd"
            android:textColor="#ffffff"/>
    </LinearLayout>
        
    <LinearLayout 
        android:id="@+id/add_tab"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton 
            android:id="@+id/add_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_address_normal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/add"
            android:textColor="#ffffff"/>
    </LinearLayout>
        
    <LinearLayout 
        android:id="@+id/setting_tab"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageButton 
            android:id="@+id/setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/setting"
            android:textColor="#ffffff"/>        
    </LinearLayout>

</LinearLayout>

用四个LinearLayout作底部切换块，里面包含一个ImageButton和TextView。要把imagebutton的点击事件取消，否则会与linearlayout的点击事件冲突。

weixin_tab.xml 四个页面基本上是一样的，就以微信页面为例，其余页面可以下载源码查看。

<?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="match_parent"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/weixin"/>
</LinearLayout>

MainActivity.java

package com.example.tab;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener{

	ViewPager mViewPager;
	PagerAdapter mAdapter;
	List<View> mViews;
	
	LinearLayout weixin_tab;
	LinearLayout frd_tab;
	LinearLayout add_tab;
	LinearLayout setting_tab;
	
	ImageButton weixin_img;
	ImageButton frd_img;
	ImageButton add_img;
	ImageButton setting_img;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		intViews();
		intEvents();
	}

	@SuppressWarnings("deprecation")
	private void intEvents() {
		weixin_tab.setOnClickListener(this);
		frd_tab.setOnClickListener(this);
		add_tab.setOnClickListener(this);
		setting_tab.setOnClickListener(this);
		
		mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}

			@Override
			public void onPageSelected(int arg0) {
				resetImg();
				int currentItem = mViewPager.getCurrentItem();
				switch(currentItem){
				case 0:
					weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
					break;
				case 1:
					frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
					break;
				case 2:
					add_img.setImageResource(R.drawable.tab_address_pressed);
					break;
				case 3:					
					setting_img.setImageResource(R.drawable.tab_settings_pressed);
					break;
				default:
		            break;
				}
				
			}
			
		});
		
	}

	private void intViews() {
		mViewPager=(ViewPager) findViewById(R.id.id_viewpager);
		
		weixin_tab=(LinearLayout)findViewById(R.id.weixin_tab);
		frd_tab=(LinearLayout)findViewById(R.id.frd_tab);
		add_tab=(LinearLayout)findViewById(R.id.add_tab);
		setting_tab=(LinearLayout)findViewById(R.id.setting_tab);
		
		weixin_img=(ImageButton)findViewById(R.id.weixin_img);
		frd_img=(ImageButton)findViewById(R.id.frd_img);
		add_img=(ImageButton)findViewById(R.id.add_img);
		setting_img=(ImageButton)findViewById(R.id.setting_img);
		
		LayoutInflater inflater=LayoutInflater.from(this);
		View tab01=inflater.inflate(R.layout.weixin_tab,null);
		View tab02=inflater.inflate(R.layout.frd_tab,null);
		View tab03=inflater.inflate(R.layout.add_tab,null);
		View tab04=inflater.inflate(R.layout.setting_tab,null);
		
		mViews=new ArrayList<View>();
		mViews.add(tab01);
		mViews.add(tab02);
		mViews.add(tab03);
		mViews.add(tab04);
		
		mAdapter=new PagerAdapter(){

			@Override
			public int getCount() {
				
				return mViews.size();
			}

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				
				return arg0==arg1;
			}

			@Override
			public Object instantiateItem(ViewGroup container, int position){
				View view = mViews.get(position);
                container.addView(view);
                return view;
			}
			
			@Override
            public void destroyItem(ViewGroup container, int position,
                    Object object) {
                container.removeView(mViews.get(position));
            }
		};
		
		mViewPager.setAdapter(mAdapter);
		
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

	@Override
	public void onClick(View v) {
		resetImg();
		switch(v.getId()){
		case R.id.weixin_tab:
			mViewPager.setCurrentItem(0);
			weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
			break;
		case R.id.frd_tab:
			mViewPager.setCurrentItem(1);
			frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
			break;
		case R.id.add_tab:
			mViewPager.setCurrentItem(2);
			add_img.setImageResource(R.drawable.tab_address_pressed);
			break;
		case R.id.setting_tab:
			mViewPager.setCurrentItem(3);
			setting_img.setImageResource(R.drawable.tab_settings_pressed);
			break;
		default:
            break;
		}
		
	}

	private void resetImg() {
		weixin_img.setImageResource(R.drawable.tab_weixin_normal);
		frd_img.setImageResource(R.drawable.tab_find_frd_normal);	
		add_img.setImageResource(R.drawable.tab_address_normal);
		setting_img.setImageResource(R.drawable.tab_settings_normal);
	}
}

用LayoutInflater将weixin_tab等四个页面转化为view，再将各个view装进List<View>中，用list数据将适配器PagerAdapter初始化，适配器再将控件ViewPager初始化，然后就成像了。

源码下载：http://pan.baidu.com/s/1jGQySGe

提取码：xz3j