欢迎使用CSDN-markdown编辑器
ViewPager、Fragment、ViewPagerFragment分别模仿实现微信界面
- ViewPager实现方式
这种实现方式的优点是可以通过滑动屏幕来TAB界面
缺点是viewPager的初始化全在MainActivity.java中，冗长且不易维护
import android.support.v4.view.PagerAdapter;//ViewPager是v4包的
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
private ViewPager viewPager;
//ViewPager的初始化需要一个适配器PagerAdapter
private PagerAdapter madapter ;
//PagerAdapter的初始化需要一个List的数据集合
//ViewPager里面需要放置的是什么东西呢？是View
private List mViews = new ArrayList() ;
//为了得到View，需要一个LayoutInflater将xml布局文件转换为View
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab_01, null);
View tab02 = mInflater.inflate(R.layout.tab_02, null);
View tab03 = mInflater.inflate(R.layout.tab_03, null);
//将这些View加入List中
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
//初始化PagerAdapter
//需要重写destroyItem instantiateItem isViewFromObject getCount 四个函数
madapter = new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
// TODO Auto-generated method stub
container.removeView(mViews.get(position) );
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
View mView = mViews.get(position);
container.addView(mView);
return mView;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mViews.size();
}
};
//最后为viewPager 设置配适器 setAdapter
viewPager.setAdapter(madapter);
完整的代码为
package com.imooc.imooc_tab01;
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.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnClickListener{
private ViewPager viewPager;
//ViewPager的初始化需要一个适配器PagerAdapter
private PagerAdapter madapter ;
//PagerAdapter的初始化需要一个List的数据集合
//ViewPager里面需要放置的是什么东西呢？是View
private List mViews = new ArrayList() ;
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(){
// resetImg();
mTabWeixin.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
int currentItem = viewPager.getCurrentItem();
resetImg();
switch(currentItem){
case 0 :
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1 :
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 2 :
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 3 :
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
//初始化所有的View
private void initView() {
// TODO Auto-generated method stub
viewPager = (ViewPager)findViewById(R.id.view_pager);
mTabWeixin = (LinearLayout)findViewById(R.id.tab_weixin);
mTabAddress = (LinearLayout)findViewById(R.id.tab_address);
mTabFrd = (LinearLayout)findViewById(R.id.tab_frd);
mTabSetting = (LinearLayout)findViewById(R.id.tab_setting);
mWeixinImg = (ImageButton)findViewById(R.id.weixing_img);
mAddressImg = (ImageButton)findViewById(R.id.address_img);
mFrdImg = (ImageButton)findViewById(R.id.frd_img);
mSettingImg = (ImageButton)findViewById(R.id.setting_img);
//把布局转化为View
//LayoutInflater作用是将layout的xml布局文件实例化为View类对象。
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab_01, null);
View tab02 = mInflater.inflate(R.layout.tab_02, null);
View tab03 = mInflater.inflate(R.layout.tab_03, null);
View tab04 = mInflater.inflate(R.layout.tab_04, null);
//将这些View加入到List中
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
//初始化PagerAdapter
madapter = new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
// TODO Auto-generated method stub
container.removeView(mViews.get(position) );
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
View mView = mViews.get(position);
container.addView(mView);
return mView;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mViews.size();
}
};
viewPager.setAdapter(madapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
resetImg();
switch (v.getId()){
case R.id.tab_weixin :
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
viewPager.setCurrentItem(0);
break;
case R.id.tab_address :
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
viewPager.setCurrentItem(1);
break;
case R.id.tab_frd :
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
viewPager.setCurrentItem(2);
break;
case R.id.tab_setting :
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
viewPager.setCurrentItem(3);
break;
default:
break;
}
}
private void resetImg(){
mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}
} - Fragment实现方式
这种方式相比上面的ViewPager ， TAB内容用Fragment实现，每个Fragment都是一个.java文件，调用时只需在MainActivity.java中实例化，易于维护。
缺点是没有手动滑动切换界面的功能
注意Fragment是用support.v4的包，为了向下兼容。
完整代码
import android.annotation.TargetApi;
//import android.app.Activity;
//import android.app.Activity;
//import android.app.Fragment;
//import android.app.FragmentManager;
//import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.Fragment;
//import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentActivity;
//import android.support.v4.app.Fragment;
//import android.support.v4.app.FragmentActivity;
//import android.support.v4.app.FragmentManager;
//import android.support.v4.app.FragmentTransaction;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
//注意是support.v4的包的Fragment，需要继承FragmentActivity
public class MainActivity extends FragmentActivity implements OnClickListener {
private LinearLayout id_tab_weixin;
private LinearLayout id_tab_frd;
private LinearLayout id_tab_address;
private LinearLayout id_tab_setting;
private ImageView weixinImg;
private ImageView frdImg;
private ImageView addressImg;
private ImageView settingImg;
private TextView weixinText;
private TextView frdText;
private TextView addressText;
private TextView settingText;
//TAB界面的内容放在各个Fragment.java文件中，易于修改维护
private Fragment tab01;
private Fragment tab02;
private Fragment tab03;
private Fragment tab04;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();
initEvents();
setSelect(0);//程序第一次启动的界面
}
private void initViews() {
// TODO Auto-generated method stub
id_tab_weixin = (LinearLayout)findViewById(R.id.id_tab_weixin);
id_tab_frd = (LinearLayout)findViewById(R.id.id_tab_frd);
id_tab_address = (LinearLayout)findViewById(R.id.id_tab_address);
id_tab_setting = (LinearLayout)findViewById(R.id.id_tab_setting);
weixinImg = (ImageView)findViewById(R.id.weixin_img);
frdImg = (ImageView)findViewById(R.id.frd_img);
addressImg = (ImageView)findViewById(R.id.address_img);
settingImg = (ImageView)findViewById(R.id.setting_img);
weixinText = (TextView)findViewById(R.id.weixin_text);
frdText = (TextView)findViewById(R.id.frd_text);
addressText = (TextView)findViewById(R.id.address_text);
settingText = (TextView)findViewById(R.id.setting_text);
// tab01 = new Tab01Fragment();
// tab02 = new Tab02Fragment();
// tab03 = new Tab03Fragment();
// tab04 = new Tab04Fragment();
}
private void initEvents() {
// TODO Auto-generated method stub
id_tab_weixin.setOnClickListener(this);
id_tab_frd.setOnClickListener(this);
id_tab_address.setOnClickListener(this);
id_tab_setting.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
resetImg();//每次点击事件都会重置所有的img
switch (v.getId()){
case R.id.id_tab_weixin:
setSelect(0);
break;
case R.id.id_tab_frd:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_setting:
setSelect(3);
break;
}
}
private void resetImg() {
// TODO Auto-generated method stub
weixinImg.setImageResource(R.drawable.tab_weixin_normal);
weixinText.setTextColor(Color.rgb(255, 255, 255));
frdImg.setImageResource(R.drawable.tab_find_frd_normal);
frdText.setTextColor(Color.rgb(255 , 255, 255));
addressImg.setImageResource(R.drawable.tab_address_normal);
addressText.setTextColor(Color.rgb(255, 255, 255));
settingImg.setImageResource(R.drawable.tab_settings_normal);
settingText.setTextColor(Color.rgb(255, 255, 255));
}
//这个setSelect()函数只在 onClick（）中有调用，因此只有点击事件可以切换TAB界面，这也是Fragment实现的缺点
private void setSelect(int i) {
// TODO Auto-generated method stub
//得到一个FragmentManager，生成一个FragmentTransaction事务，
//通过通过transaction.add()和transaction.show()来显示Fragment,通过transaction.hide()来隐藏Fragment
//最后提交事务transaction.commit()
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
hideFragments(transaction);//每次点击事件都会隐藏所有的Fragment
switch (i) {
case 0:
if(tab01 == null){
tab01 = new Tab01Fragment();
transaction.add(R.id.content, tab01);
}
else{
transaction.show(tab01);
}
weixinImg.setImageResource(R.drawable.tab_weixin_pressed);
weixinText.setTextColor(Color.rgb(0, 255, 0));
break;
case 1:
if(tab02 == null){
tab02 = new Tab02Fragment();
transaction.add(R.id.content, tab02);
}
else{
transaction.show(tab02);
}
frdImg.setImageResource(R.drawable.tab_find_frd_pressed);
frdText.setTextColor(Color.rgb(0, 255, 0));
break;
case 2:
if(tab03 == null){
tab03 = new Tab03Fragment();
transaction.add(R.id.content, tab03);
}
else{
transaction.show(tab03);
}
addressImg.setImageResource(R.drawable.tab_address_pressed);
addressText.setTextColor(Color.rgb(0, 255, 0));
break;
case 3:
if(tab04 == null){
tab04 = new Tab04Fragment();
transaction.add(R.id.content, tab04);
}
else{
transaction.show(tab04);
}
settingImg.setImageResource(R.drawable.tab_settings_pressed);
settingText.setTextColor(Color.rgb(0, 255, 0));
break;
default:
break;
}
transaction.commit();
}
private void hideFragments(FragmentTransaction transaction) {
// TODO Auto-generated method stub
if(tab01!=null){
transaction.hide(tab01);
}
if(tab02!=null){
transaction.hide(tab02);
}
if(tab03!=null){
transaction.hide(tab03);
}
if(tab04!=null){
transaction.hide(tab04);
}
}
}- ViewPagerFragment实现方式
及易于维护，也可以实现滑动切换页面
全部代码
import java.util.ArrayList;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
//import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.os.Bundle;
//import android.view.Menu;
//import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends FragmentActivity implements OnClickListener {
private ViewPager viewPager;
//ViewPager的初始化需要一个适配器FragmentPagerAdapter
private FragmentPagerAdapter madapter ;
//PagerAdapter的初始化需要一个List的数据集合
//ViewPager里面需要放置的是什么东西呢？是Fragment
private List mFragments = new ArrayList() ;
private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;
private Fragment tab01;
private Fragment tab02;
private Fragment tab03;
private Fragment tab04;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();
initEvents();
}
private void initViews() {
// TODO Auto-generated method stub
//注意
viewPager = (ViewPager)findViewById(R.id.view_pager);
tab01 = new Tab01Fragment();
tab02 = new Tab02Fragment();
tab03 = new Tab03Fragment();
tab04 = new Tab04Fragment();
mFragments.add(tab01);
mFragments.add(tab02);
mFragments.add(tab03);
mFragments.add(tab04);
//初始化适配器，和ViewPager相比少重写了两个函数，只需重写默认的两个函数
madapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
// TODO Auto-generated method stub
return mFragments.size();
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return mFragments.get(arg0);
}
};
viewPager.setAdapter(madapter);
mTabWeixin = (LinearLayout)findViewById(R.id.tab_weixin);
mTabAddress = (LinearLayout)findViewById(R.id.tab_address);
mTabFrd = (LinearLayout)findViewById(R.id.tab_frd);
mTabSetting = (LinearLayout)findViewById(R.id.tab_setting);
mWeixinImg = (ImageButton)findViewById(R.id.weixing_img);
mAddressImg = (ImageButton)findViewById(R.id.address_img);
mFrdImg = (ImageButton)findViewById(R.id.frd_img);
mSettingImg = (ImageButton)findViewById(R.id.setting_img);
}
@Override
public void onClick(View v) {
resetImg();
// TODO Auto-generated method stub
switch(v.getId()){
case R.id.tab_weixin:
setTab(0);
break;
case R.id.tab_frd:
setTab(1);
break;
case R.id.tab_address:
setTab(2);
break;
case R.id.tab_setting:
setTab(3);
break;
}
}
private void initEvents() {
// TODO Auto-generated method stub
mTabWeixin.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
//当通过滑动屏幕切换页面时，通过以下来改变对应的IMG
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
//得到当前页面的Item
int currentItem = viewPager.getCurrentItem();
//重置IMG
resetImg();
//得到对应的IMG
setSelect(currentItem);
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
private void resetImg(){
mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}
//变更对应Item的IMG
private void setSelect(int i) {
// TODO Auto-generated method stub
switch(i){
case 0 :
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1 :
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 2 :
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 3 :
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
//变更页面和IMG
private void setTab(int currentItem) {
switch(currentItem){
case 0 :
viewPager.setCurrentItem(0);
setSelect(0);
break;
case 1 :
viewPager.setCurrentItem(1);
setSelect(1);
break;
case 2 :
viewPager.setCurrentItem(2);
setSelect(2);
break;
case 3 :
viewPager.setCurrentItem(3);
setSelect(3);
break;
}
}
}