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

来源：互联网发布：java 接口过滤器编辑：程序博客网时间：2024/05/16 13:05

最近看了慕课网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;@Overrideprotected 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(){@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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(){@Overridepublic int getCount() {return mViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}@Overridepublic 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);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {int id = item.getItemId();if (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}@Overridepublic 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

0 0