码迷，mamicode.com
首页 > 移动开发 > 详细

多种多样的App主界面Tab实现方法

时间：2015-03-22 09:09:00      阅读：262      评论：0      收藏：0      [点我收藏+]

标签：多种多样的app主界面tab实现方法

看了一下App主界面Tab实现方法，总结一下：

技术分享



再看看实现的效果图：

技术分享                          技术分享


第一种：ViewPager实现Tab：

    思路：1.布局方面实现顶层和底层布局，中间是ViewPager实现的。中间是四个布局实现的，List<View>

                2.实现：setOnPageChangeListener内部类

               3.需要一个适配器：PagerAdapter

 源代码如下：

<span style="font-size:18px;">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);
	}
}
</span>


activity_main.xml的布局：

<span style="font-size:18px;"><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>
</span>

方法一学到的补充到的知识点：

将布局文件转换成View

<span style="font-size:18px;">                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);】

<span style="font-size:18px;">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);
	}
}</span>
2.在下面菜单栏实现方法来调用另外一个方法决定是否实现展现哪个FrageMent

这个地方用到FragmentManager

<span style="font-size:18px;">       FragmentManager fm=	getSupportFragmentManager();
		FragmentTransaction transaction=fm.beginTransaction();
		ruxia(transaction);</span>

主要的源代码如下：

<span style="font-size:18px;">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);
	}
}
</span>



第三种：FragmentPagerAdapter+ViewPager实现：

思路,这个FragmentPagerAdapter和ViewPager实现的思路是Fragment和ViewPager的结合体：

1.Fragment放在List里面，FragmentPagerAdapter

2.中间容器移动会触发监听器让底部菜单变化、底部菜单变化后会让触发容器的的变化

源码如下：

<span style="font-size:18px;">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);

	}

 
}
</span>


第四种：ViewPagerIndicator+ViewPager

这个方法利用的事ViewPagerIndicator框架，非常简单，代码量极少。

思路：1.TabFragment和TabAdapter从mainActivity中分离出来了。

           2.MainActivity中首先得到ViewPager和TabPageIndicator、得到适配器mAdapter-->设置适配器-->得到mTabPageIndicator

源代码如下：

mainActivity

<span style="font-size:18px;">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);
	}
}
</span>

TabAdapter

<span style="font-size:18px;">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;
	}

}
</span>

TabFragment

<span style="font-size:18px;">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;
	}
	
}
</span>

mainactivity

<span style="font-size:18px;"><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>
</span>



多种多样的App主界面Tab实现方法

标签：多种多样的app主界面tab实现方法

原文地址：http://blog.csdn.net/itjavawfc/article/details/44530485
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！