欢迎使用CSDN-markdown编辑器

来源：互联网发布：安装ubuntu盘符设置编辑：程序博客网时间：2024/06/16 17:01

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<View> mViews = new ArrayList<View>() ;    //为了得到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<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(){//      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，需要继承FragmentActivitypublic 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<Fragment> mFragments = new ArrayList<Fragment>() ;    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;        }    }}

0 0