多种多样的App主界面Tab实现方法
看了一下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;
@Override
protected 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() {
@Override
public void onPageSelected(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public 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(){
@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 int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
};
mViewPager.setAdapter(mAdapter);
}
@Override
public 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{
@Override
public 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;
@Override
protected 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);
}
}
@Override
public 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;
@Override
protected 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()) {
@Override
public int getCount() {
return mFragments.size();
}
@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
};
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
int currentItem=mViewPager.getCurrentItem();
setTab(currentItem);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
@Override
public 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;
@Override
protected 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 {
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
public static String[] TITLES=new String[]{"课程","问答","求课","学习","计划"};
public TabAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int arg0) {
TabFragment fragment=new TabFragment(arg0);
return fragment;
}
@Override
public int getCount() {
return TITLES.length;
}
}
TabFragment
public class TabFragment extends Fragment {
private int pos;
public TabFragment(int pos){
this.pos=pos;
}
@Override
public 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