Android Tab类型主界面总结

来源：互联网发布：手机淘宝客户端在哪里编辑：程序博客网时间：2024/05/19 18:17

转载至http://blog.csdn.NET/lmj623565791/article/details/24740977

Android现在实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。目前写了：

1、传统的ViewPager实现

2、FragmentManager+Fragment实现

3、ViewPager+FragmentPagerAdapter实现

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

1、传统的ViewPager实现

主要就是ViewPager+ViewAdapter这个还是比较常见的，就不多说了

效果图：

代码：

package com.example.mainframework02;    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.View;  import android.view.ViewGroup;  import android.widget.ImageButton;  import android.widget.ImageView;  import android.widget.LinearLayout;    public class TraditionalViewPagerAcvitity extends Activity  {        /**      * ViewPager      */      private ViewPager mViewPager;      /**      * ViewPager的适配器      */      private PagerAdapter mAdapter;      private List<View> mViews;      private LayoutInflater mInflater;            private int currentIndex;        /**      * 底部四个按钮      */      private LinearLayout mTabBtnWeixin;      private LinearLayout mTabBtnFrd;      private LinearLayout mTabBtnAddress;      private LinearLayout mTabBtnSettings;        @Override      protected void onCreate(Bundle savedInstanceState)      {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          mInflater = LayoutInflater.from(this);          mViewPager = (ViewPager) findViewById(R.id.id_viewpager);                    /**          * 初始化View          */          initView();                    mViewPager.setAdapter(mAdapter);            mViewPager.setOnPageChangeListener(new OnPageChangeListener()          {                @Override              public void onPageSelected(int position)              {                  resetTabBtn();                  switch (position)                  {                  case 0:                      ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))                              .setImageResource(R.drawable.tab_weixin_pressed);                      break;                  case 1:                      ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))                              .setImageResource(R.drawable.tab_find_frd_pressed);                      break;                  case 2:                      ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))                              .setImageResource(R.drawable.tab_address_pressed);                      break;                  case 3:                      ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))                              .setImageResource(R.drawable.tab_settings_pressed);                      break;                  }                    currentIndex = position;              }                @Override              public void onPageScrolled(int arg0, float arg1, int arg2)              {                }                @Override              public void onPageScrollStateChanged(int arg0)              {              }          });        }        protected void resetTabBtn()      {          ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))                  .setImageResource(R.drawable.tab_weixin_normal);          ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))                  .setImageResource(R.drawable.tab_find_frd_normal);          ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))                  .setImageResource(R.drawable.tab_address_normal);          ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))                  .setImageResource(R.drawable.tab_settings_normal);      }        private void initView()      {            mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);          mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);          mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);          mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);            mViews = new ArrayList<View>();          View first = mInflater.inflate(R.layout.main_tab_01, null);          View second = mInflater.inflate(R.layout.main_tab_02, null);          View third = mInflater.inflate(R.layout.main_tab_03, null);          View fourth = mInflater.inflate(R.layout.main_tab_04, null);          mViews.add(first);          mViews.add(second);          mViews.add(third);          mViews.add(fourth);            mAdapter = new PagerAdapter()          {              @Override              public void destroyItem(ViewGroup container, int position, Object object)              {                  container.removeView(mViews.get(position));              }                @Override              public Object instantiateItem(ViewGroup container, int position)              {                  View view = mViews.get(position);                  container.addView(view);                  return view;              }                @Override              public boolean isViewFromObject(View arg0, Object arg1)              {                  return arg0 == arg1;              }                @Override              public int getCount()              {                  return mViews.size();              }          };      }    }

3、ViewPager+Fragment实现

主要通过ViewPager和FragmentPagerAdapter一起来实现。

效果图：

代码：

主Activity

package com.example.mainframework03;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends FragmentActivity
{
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments = new ArrayList<Fragment>();
/**
* 底部四个按钮
*/
private LinearLayout mTabBtnWeixin;
private LinearLayout mTabBtnFrd;
private LinearLayout mTabBtnAddress;
private LinearLayout mTabBtnSettings;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
initView();
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
{
@Override
public int getCount()
{
return mFragments.size();
}
@Override
public Fragment getItem(int arg0)
{
return mFragments.get(arg0);
}
};
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(new OnPageChangeListener()
{
private int currentIndex;
@Override
public void onPageSelected(int position)
{
resetTabBtn();
switch (position)
{
case 0:
((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
.setImageResource(R.drawable.tab_settings_pressed);
break;
}
currentIndex = position;
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{
}
@Override
public void onPageScrollStateChanged(int arg0)
{
}
});
}
protected void resetTabBtn()
{
((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
.setImageResource(R.drawable.tab_weixin_normal);
((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
.setImageResource(R.drawable.tab_find_frd_normal);
((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
.setImageResource(R.drawable.tab_address_normal);
((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))
.setImageResource(R.drawable.tab_settings_normal);
}
private void initView()
{
mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);
mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);
mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);
mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);
MainTab01 tab01 = new MainTab01();
MainTab02 tab02 = new MainTab02();
MainTab03 tab03 = new MainTab03();
MainTab04 tab04 = new MainTab04();
mFragments.add(tab01);
mFragments.add(tab02);
mFragments.add(tab03);
mFragments.add(tab04);
}
}

还有4个TabFragment，下面贴一个，四个基本一样

package com.example.mainframework03;    import android.os.Bundle;  import android.support.v4.app.Fragment;  import android.view.LayoutInflater;  import android.view.View;  import android.view.ViewGroup;    public class MainTab01 extends Fragment  {        @Override      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)      {          return  inflater.inflate(R.layout.main_tab_01, container, false);            }    }

4、TabPageIndicator+ViewPager+FragmentPagerAdapter

1、头部的布局文件，这个很简单：

<?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="wrap_content"      android:background="@color/light_blue"      android:orientation="horizontal" >          <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginLeft="8dp"          android:layout_marginRight="4dp"          android:src="@drawable/biz_navigation_tab_news_pressed" />          <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginLeft="4dp"          android:layout_marginRight="4dp"          android:src="@drawable/base_action_bar_back_divider" />          <TextView          android:id="@+id/headTV"          android:layout_width="0dp"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginLeft="4dp"          android:layout_weight="1"          android:text="CSDN资讯"          android:textColor="@color/white"          android:textSize="21sp"          android:textStyle="bold" >      </TextView>

</LinearLayout>

就显示一个图标和标题。
2、主布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:background="#eee"      android:orientation="vertical" >          <include layout="@layout/main_head" />          <com.viewpagerindicator.TabPageIndicator          android:id="@+id/id_indicator"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:background="@color/transparentblue" >      </com.viewpagerindicator.TabPageIndicator>          <android.support.v4.view.ViewPager          android:id="@+id/id_pager"          android:layout_width="fill_parent"          android:layout_height="0dp"          android:layout_weight="1" />      </LinearLayout>

布局中仅一个ViewPager，一个ViewPagerIndicator.（本例使用的是其中一种ViewPagerIndicator：TabPagerIndicator）

注意它应该紧邻在ViewPager的上方或下方，总之要挨在一起。

3、主Activity

第1步：实例化ViewPager，给ViewPager设置Adapter
第2步：实例化TabPageIndicator，TabPageIndicator与ViewPager绑在一起
第3步：在Indicator上设置OnPagerChangeListner监听器
第4步：定义Adapter（继承FragmentPagerAdapter）

先实例化ViewPager,然后实例化TabPageIndicator，然后设置TabPageIndicator和ViewPager关联，就是调用TabPageIndicator的setViewPager(ViewPager view)方法，这样子就实现了点击上面的Tab，下面的ViewPager切换；滑动ViewPager，上面的Tab跟着切换。
ViewPager的每一个Item我们使用的是Fragment，使用Fragment可以使布局更加灵活一点，建议多用Fragment。
设置监听的时候，需要用Indicator提供的OnPagerChangeListener方法

package com.zhy.csdndemo;      import com.viewpagerindicator.TabPageIndicator;      import android.os.Bundle;  import android.support.v4.app.FragmentActivity;  import android.support.v4.app.FragmentPagerAdapter;  import android.support.v4.view.ViewPager;      public class MainActivity extends FragmentActivity  {      private TabPageIndicator mIndicator ;      private ViewPager mViewPager ;      private FragmentPagerAdapter mAdapter ;          @Override      protected void onCreate(Bundle savedInstanceState)      {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);                mIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);          mViewPager = (ViewPager) findViewById(R.id.id_pager);          mAdapter = new TabAdapter(getSupportFragmentManager());          mViewPager.setAdapter(mAdapter);          mIndicator.setViewPager(mViewPager, 0);                                    }                  }

TabAdapter.java

package com.zhy.csdndemo;      import android.support.v4.app.Fragment;  import android.support.v4.app.FragmentManager;  import android.support.v4.app.FragmentPagerAdapter;      public class TabAdapter extends FragmentPagerAdapter  {          public static final String[] TITLES = new String[] { "业界", "移动", "研发", "程序员杂志", "云计算" };          public TabAdapter(FragmentManager fm)      {          super(fm);      }          @Override      public Fragment getItem(int arg0)      {          MainFragment fragment = new MainFragment(arg0);          return fragment;      }          @Override      public CharSequence getPageTitle(int position)      {          return TITLES[position % TITLES.length];      }          @Override      public int getCount()      {          return TITLES.length;      }      }

MainFragment.java

package com.zhy.csdndemo;      import android.annotation.SuppressLint;  import android.os.Bundle;  import android.support.v4.app.Fragment;  import android.view.LayoutInflater;  import android.view.View;  import android.view.ViewGroup;  import android.widget.TextView;      @SuppressLint("ValidFragment")  public class MainFragment extends Fragment  {          private int newsType = 0;          public MainFragment(int newsType)      {          this.newsType = newsType;      }          @Override      public void onActivityCreated(Bundle savedInstanceState)      {          super.onActivityCreated(savedInstanceState);      }          @Override      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)      {          View view = inflater.inflate(R.layout.tab_item_fragment_main, null);          TextView tip = (TextView) view.findViewById(R.id.id_tip);          tip.setText(TabAdapter.TITLES[newsType]);          return view;      }      }

4、在styles.xml中自定义Theme

<style name="MyTheme" parent="AppBaseTheme">          <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>          <item name="android:windowBackground">@drawable/init_pic</item>          <item name="android:windowNoTitle">true</item>            <item name="android:animationDuration">5000</item>          <item name="android:windowContentOverlay">@null</item>        </style>            <style name="MyWidget.TabPageIndicator" parent="Widget">          <item name="android:gravity">center</item>          <item name="android:background">@drawable/vpi__tab_indicator</item>          <item name="android:paddingLeft">22dip</item>          <item name="android:paddingRight">22dip</item>          <item name="android:paddingTop">8dp</item>          <item name="android:paddingBottom">8dp</item>          <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>          <item name="android:textSize">16sp</item>          <item name="android:maxLines">1</item>      </style>          <style name="MyTextAppearance.TabPageIndicator" parent="Widget">          <item name="android:textStyle">bold</item>          <item name="android:textColor">@color/black</item>      </style>

在AndroidManifest中注册使用：

<?xml version="1.0" encoding="utf-8"?>  <manifest xmlns:android="http://schemas.android.com/apk/res/android"      package="com.zhy.csdndemo"      android:versionCode="1"      android:versionName="1.0" >          <uses-sdk          android:minSdkVersion="13"          android:targetSdkVersion="17" />          <application          android:allowBackup="true"          android:icon="@drawable/ic_launcher"          android:label="@string/app_name"          android:theme="@style/AppTheme" >          <activity              android:name="com.zhy.csdndemo.MainActivity"              android:label="@string/app_name"               android:theme="@style/MyTheme">              <intent-filter>                  <action android:name="android.intent.action.MAIN" />                      <category android:name="android.intent.category.LAUNCHER" />              </intent-filter>          </activity>      </application>      </manifest>

阅读全文

1 0