多种多样的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>



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。