多種多樣的App主介面Tab實現方法，apptab

多種多樣的App主介面Tab實現方法，apptab

看了一下App主介面Tab實現方法，總結一下：

再看看實現的：

                          

第一種：ViewPager實現Tab：

    思路：1.布局方面實現頂層和底層布局，中間是ViewPager實現的。中間是四個布局實現的，List<View>

                2.實現：setOnPageChangeListener內部類

               3.需要一個適配器：PagerAdapter

 原始碼如下：

public class MainActivity extends Activity implements OnClickListener{private ViewPager mViewPager;private PagerAdapter mAdapter;private List<View> mViews=new ArrayList<View>();;private LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabAddress;private LinearLayout mTabSetting;private ImageButton mWeixinImg;private ImageButton mFrdImg;private ImageButton mAddressImg;private ImageButton mSettingImg;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initEvents();}private void initEvents() {mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabAddress.setOnClickListener(this);mTabSetting.setOnClickListener(this);mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {int currentItem=mViewPager.getCurrentItem();resetImg();switch(currentItem){case 0:mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);break;case 2:mAddressImg.setImageResource(R.drawable.tab_address_pressed);break;case 3:mSettingImg.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}}});}private void initView() {mViewPager=(ViewPager) findViewById(R.id.id_viewpager);mTabWeixin=(LinearLayout) findViewById(R.id.id_tab_weixin);mTabFrd=(LinearLayout) findViewById(R.id.id_tab_frd);mTabAddress=(LinearLayout) findViewById(R.id.id_tab_address);mTabSetting=(LinearLayout) findViewById(R.id.id_tab_settings);mWeixinImg=(ImageButton) findViewById(R.id.id_tab_weixin_img);mFrdImg=(ImageButton) findViewById(R.id.id_tab_frd_img);mAddressImg=(ImageButton) findViewById(R.id.id_tab_address_img);mSettingImg=(ImageButton) findViewById(R.id.id_tab_settings_img);LayoutInflater mInflater=LayoutInflater.from(this);View tab01=mInflater.inflate(R.layout.tab01, null);View tab02=mInflater.inflate(R.layout.tab02, null);View tab03=mInflater.inflate(R.layout.tab03, null);View tab04=mInflater.inflate(R.layout.tab04, null);mViews.add(tab01);mViews.add(tab02);mViews.add(tab03);mViews.add(tab04);mAdapter=new PagerAdapter(){@Overridepublic void destroyItem(ViewGroup container, int position,Object object) {container.removeView(mViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {View view=mViews.get(position);container.addView(view);return view;}@Overridepublic int getCount() {return mViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}};mViewPager.setAdapter(mAdapter);}@Overridepublic void onClick(View v) {resetImg();switch(v.getId()){case R.id.id_tab_weixin:mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);mViewPager.setCurrentItem(0);break;case R.id.id_tab_frd:mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);mViewPager.setCurrentItem(1);break;case R.id.id_tab_address:mAddressImg.setImageResource(R.drawable.tab_address_pressed);mViewPager.setCurrentItem(2);break;case R.id.id_tab_settings:mSettingImg.setImageResource(R.drawable.tab_settings_pressed);mViewPager.setCurrentItem(3);break;default:break;}}    /**將所有的圖片切換為暗色*/private void resetImg() {mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);mAddressImg.setImageResource(R.drawable.tab_address_normal);mSettingImg.setImageResource(R.drawable.tab_settings_normal);}} 

activity_main.xml的布局：

 <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:orientation="vertical"   >    <include layout="@layout/top"/>    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="fill_parent"        android:layout_weight="1"        android:layout_height="0dp"        >    </android.support.v4.view.ViewPager>    <include layout="@layout/bottom"/></LinearLayout> 

方法一學到的補充到的知識點：

將布局檔案轉換成View

               LayoutInflater mInflater=LayoutInflater.from(this);View tab01=mInflater.inflate(R.layout.tab01, null);View tab02=mInflater.inflate(R.layout.tab02, null);View tab03=mInflater.inflate(R.layout.tab03, null);View tab04=mInflater.inflate(R.layout.tab04, null);</span>

第二種：FragMent實現Tab：

    FragMent與ViewPager的區別：ViewPager可以實現左右活動的情況，但是FragMent不能實現頁面左右活動，可以通過下方按鈕實現。

思路：

1.中間的每個容器是通過FragMent來實現的：在該類中負載檔案就行了，，返回的是一個View   【inflater.inflate(R.layout.tab01, container, false);】

 public class WeixinFragment extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {return  inflater.inflate(R.layout.tab01, container, false);}} 

2.在下面功能表列實現方法來調用另外一個方法決定是否實現展現哪個FrageMent

這個地方用到FragmentManager

    FragmentManager fm=getSupportFragmentManager();FragmentTransaction transaction=fm.beginTransaction();ruxia(transaction);</span>

主要的原始碼如下：

 public class MainActivity extends FragmentActivity implements OnClickListener {private LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabAddress;private LinearLayout mTabSettings;private ImageButton mImgWeixin;private ImageButton mImgFrd;private ImageButton mImgAddress;private ImageButton mImgSettings;private Fragment mTab01;private Fragment mTab02;private Fragment mTab03;private Fragment mTab04;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initEvent();setSelect(0);}private void initEvent() {mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabAddress.setOnClickListener(this);mTabSettings.setOnClickListener(this);}private void initView() {mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);}/** 設定圖片為亮色 */private void setSelect(int i) {FragmentManager fm=getSupportFragmentManager();FragmentTransaction transaction=fm.beginTransaction();hideFragment(transaction);switch (i) {case 0:if(mTab01==null){mTab01=new WeixinFragment();transaction.add(R.id.id_content, mTab01);}else{transaction.show(mTab01);}mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:if(mTab02==null){mTab02=new FrdFragment();transaction.add(R.id.id_content, mTab02);}else{transaction.show(mTab02);}mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);break;case 2:if(mTab03==null){mTab03=new AddressFragment();transaction.add(R.id.id_content, mTab03);}else{transaction.show(mTab03);}mImgAddress.setImageResource(R.drawable.tab_address_pressed);break;case 3:if(mTab04==null){mTab04=new SettingFragment();transaction.add(R.id.id_content, mTab04);}else{transaction.show(mTab04);}mImgSettings.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}transaction.commit();}private void hideFragment(FragmentTransaction transaction) {if(mTab01!=null){transaction.hide(mTab01);}if(mTab02!=null){transaction.hide(mTab02);}if(mTab03!=null){transaction.hide(mTab03);}if(mTab04!=null){transaction.hide(mTab04);}}@Overridepublic void onClick(View v) {resetImgs();switch (v.getId()) {case R.id.id_tab_weixin:setSelect(0);break;case R.id.id_tab_frd:Toast.makeText(this, "單擊成功", Toast.LENGTH_LONG);setSelect(1);break;case R.id.id_tab_address:setSelect(2);break;case R.id.id_tab_settings:setSelect(3);break;default:break;}}private void resetImgs() {mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);mImgAddress.setImageResource(R.drawable.tab_address_normal);mImgSettings.setImageResource(R.drawable.tab_settings_normal);}} 

第三種：FragmentPagerAdapter+ViewPager實現：

思路,這個FragmentPagerAdapter和ViewPager實現的思路是Fragment和ViewPager的結合體：

1.Fragment放在List裡面，FragmentPagerAdapter

2.中間容器移動會觸發監聽器讓底部菜單變化、底部菜單變化後會讓觸發容器的的變化

源碼如下：

 public class MainActivity extends FragmentActivity implements OnClickListener {private ViewPager mViewPager;private FragmentPagerAdapter mAdapter;private List<Fragment> mFragments;private LinearLayout mTabWeixin;private LinearLayout mTabFrd;private LinearLayout mTabAddress;private LinearLayout mTabSettings;private ImageButton mImgWeixin;private ImageButton mImgFrd;private ImageButton mImgAddress;private ImageButton mImgSettings;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initEvent();setSelect(1);}private void initEvent() {mTabWeixin.setOnClickListener(this);mTabFrd.setOnClickListener(this);mTabAddress.setOnClickListener(this);mTabSettings.setOnClickListener(this);}private void initView() {mViewPager=(ViewPager) findViewById(R.id.id_viewpager);mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);mFragments=new ArrayList<Fragment>();Fragment mTab01=new WeixinFragment();Fragment mTab02=new FrdFragment();Fragment mTab03=new AddressFragment();Fragment mTab04=new SettingFragment();mFragments.add(mTab01);mFragments.add(mTab02);mFragments.add(mTab03);mFragments.add(mTab04);mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {@Overridepublic int getCount() {return mFragments.size();}@Overridepublic Fragment getItem(int arg0) {return mFragments.get(arg0);}};    mViewPager.setAdapter(mAdapter);    mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {int currentItem=mViewPager.getCurrentItem();setTab(currentItem);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});    }@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.id_tab_weixin:setSelect(0);break;case R.id.id_tab_frd:Toast.makeText(this, "單擊成功", Toast.LENGTH_LONG);setSelect(1);break;case R.id.id_tab_address:setSelect(2);break;case R.id.id_tab_settings:setSelect(3);break;default:break;}}private void setSelect(int i) {/**設定圖片為亮色、切換內容地區*/setTab(i);mViewPager.setCurrentItem(i);}private void setTab(int i) {resetImgs();switch(i){case 0:mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);break;case 2:mImgAddress.setImageResource(R.drawable.tab_address_pressed);break;case 3:mImgSettings.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}}private void resetImgs() {mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);mImgAddress.setImageResource(R.drawable.tab_address_normal);mImgSettings.setImageResource(R.drawable.tab_settings_normal);} } 

第四種：ViewPagerIndicator+ViewPager

這個方法利用的事ViewPagerIndicator架構，非常簡單，代碼量極少。

思路：1.TabFragment和TabAdapter從mainActivity中分離出來了。

           2.MainActivity中首先得到ViewPager和TabPageIndicator、得到適配器mAdapter-->設定適配器-->得到mTabPageIndicator

原始碼如下：

mainActivity

 public class MainActivity extends FragmentActivity {private ViewPager mViewPager;private TabPageIndicator mTabPageIndicator;private List<Fragment> mFragments;private TabAdapter mAdapter; @Overrideprotected void onCreate(Bundle arg0) {super.onCreate(arg0);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();}private void initView() {mViewPager=(ViewPager) findViewById(R.id.id_viewpager);mTabPageIndicator=(TabPageIndicator) findViewById(R.id.id_indicator);mAdapter=new TabAdapter(getSupportFragmentManager());mViewPager.setAdapter(mAdapter);mTabPageIndicator.setViewPager(mViewPager,0);}} 

TabAdapter

 public class TabAdapter extends FragmentPagerAdapter {@Overridepublic CharSequence getPageTitle(int position) {return TITLES[position];}public static String[] TITLES=new String[]{"課程","問答","求課","學習","計劃"};public TabAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int arg0) {TabFragment fragment=new TabFragment(arg0);return fragment;}@Overridepublic int getCount() {return TITLES.length;}} 

TabFragment

 public class TabFragment extends Fragment {private int pos;public TabFragment(int pos){this.pos=pos;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view=inflater.inflate(R.layout.frag, container, false);TextView tv=(TextView) view.findViewById(R.id.id_tv);tv.setText(TabAdapter.TITLES[pos]);return view;}} 

mainactivity

 <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="#C5DAED"    android:orientation="vertical"   >    <include layout="@layout/top"/>    <com.viewpagerindicator.TabPageIndicator        android:id="@+id/id_indicator"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@android:color/transparent"        >    </com.viewpagerindicator.TabPageIndicator>    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        >    </android.support.v4.view.ViewPager></LinearLayout> 

原始碼：http://download.csdn.net/detail/itjavawfc/8522293