应用框架 ViewPager Tab Fragment SlidingMenu

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

介绍

常见的应用框架
框架一：多个tab+Fragment，点击不同的tab加载不同的Fragment，不能滑动切换只能点击切换；
框架二：多个tab+ViewPager+FragmentPagerAdapter，点击不同的tab加载ViewPager对应的item，可以滑动切换，经过改进，可以实现"强制刷新"！
框架三：多个tab+ViewPager+FragmentPagerAdapter+SlidingMenu，左右滑菜单

其他:

上有标题栏，标题栏可以是在Fragment或ViewPager中的(如QQ，每个页面的标题栏都不一样)或者和tab同级(如微信，所有页面的标题栏都一样)。

框架一，MainActivity


public class MainActivity extends Activity implements OnClickListener {
    /**
     * 四个TextView控件
     */
    private TextView[] mTabTVs = new TextView[4];
    /**
     * 四个控件【未】按下时的图片id
     */
    private int[] mTabTVIdsNormal;
    /**
     * 四个控件按下时的图片id
     */
    private int[] mTabTVIdsPress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initViews();
        setTabSelection(mTabTVs[0]);
    }

    private void initViews() {

        mTabTVs[0] = (TextView) findViewById(R.id.tv_tab_bottom_weixin);
        mTabTVs[1] = (TextView) findViewById(R.id.tv_tab_bottom_friend);
        mTabTVs[2] = (TextView) findViewById(R.id.tv_tab_bottom_contact);
        mTabTVs[3] = (TextView) findViewById(R.id.tv_tab_bottom_setting);

        mTabTVIdsNormal = new int[] { R.drawable.tab_weixin_normal, R.drawable.tab_find_frd_normal, R.drawable.tab_address_normal,
                R.drawable.tab_settings_normal };

        mTabTVIdsPress = new int[] { R.drawable.tab_weixin_pressed, R.drawable.tab_find_frd_pressed, R.drawable.tab_address_pressed,
                R.drawable.tab_settings_pressed };

        //给四个控件设置一个Tag，当我们点击某个控件时可以根据这个Tag来识别此控件，当然我们也可以根据v.getid()来识别，但在这里setTag还有其他妙用
        for (int i = 0; i < mTabTVs.length; i++) {
            mTabTVs[i].setOnClickListener(this);
            mTabTVs[i].setTag(i);
        }
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.tv_tab_bottom_weixin:
        case R.id.tv_tab_bottom_friend:
        case R.id.tv_tab_bottom_contact:
        case R.id.tv_tab_bottom_setting:
            setTabSelection(v);
            break;

        default:
            break;
        }
    }

    private void setTabSelection(View v) {
        //清除掉所有的选中状态
        for (int i = 0; i < mTabTVs.length; i++) {
            mTabTVs[i].setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(mTabTVIdsNormal[i]), null, null);
            mTabTVs[i].setSelected(false);
        }

        // 改变控件的图片，这里的setSelected是为了演示通过selector来改变文字颜色
        int index = (Integer) v.getTag();
        ((TextView) v).setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(mTabTVIdsPress[index]), null, null);
        v.setSelected(true);
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        switch (index) {
        case 0:
            transaction.replace(R.id.id_content, new MainTabFragment());//每次都必须通过new的方式创建Fragment，不然可能出问题
            break;
        case 1:
            transaction.replace(R.id.id_content, new MainTabFragment());
            break;
        case 2:
            transaction.replace(R.id.id_content, new MainTabFragment());
            break;
        case 3:
            transaction.replace(R.id.id_content, new MainTabFragment());
            break;
        }
        transaction.commit();
    }

}

框架一，布局



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@drawable/title_bar"
        android:gravity="center"
        android:text="微信"
        android:textColor="#fff"
        android:textSize="20sp"
        android:textStyle="bold" />

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2016" />

    <LinearLayout
        android:id="@+id/ly_main_tab_bottom"
        android:layout_width="fill_parent"
        android:layout_height="55dp"
        android:background="@drawable/bottom_bar" >

        <TextView
            android:id="@+id/tv_tab_bottom_weixin"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_weixin_normal"
            android:gravity="center"
            android:text="微信"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_friend"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_find_frd_normal"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_contact"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_address_normal"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_setting"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_settings_normal"
            android:gravity="center"
            android:text="设置"
            android:textColor="@drawable/text_color_sel" />
    </LinearLayout>


</LinearLayout>

框架一，fragment


public class MainTabFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.main_tab_01, container, false);
        TextView tv = (TextView) view.findViewById(R.id.tv);
        tv.setText(new SimpleDateFormat("yyyy-MM-dd\nHH:mm:ss").format(new Date()));
        return view;
    }

}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fcfcfc"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#88cc"
        android:gravity="center"
        android:text="第一个页面"
        android:textColor="#000"
        android:textSize="30sp" />


</LinearLayout>

框架二，MainActivity


/**
 * 使用support.v4.app中的Fragment，继承自FragmentActivity
 * 没办法，使用FragmentPagerAdapter就不可以用app的Fragment，只能用v4的Fragment
 * 有个问题：viewpage响应的条目会因为自己的缓存机制导致不更新页面
 * @author 白乾涛
 */
public class MainActivity2 extends FragmentActivity implements OnClickListener {
    private ViewPager mViewPager;
    private FragmentPagerAdapter mPagerAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();

    /**
     * 四个TextView控件
     */
    private TextView[] mTabTVs = new TextView[4];
    /**
     * 四个控件【未】按下时的图片id
     */
    private int[] mTabTVIdsNormal;
    /**
     * 四个控件按下时的图片id
     */
    private int[] mTabTVIdsPress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main2);
        initViews();
        initViewPage();
        setTabSelection(mTabTVs[0]);
    }

    private void initViews() {

        mTabTVs[0] = (TextView) findViewById(R.id.tv_tab_bottom_weixin);
        mTabTVs[1] = (TextView) findViewById(R.id.tv_tab_bottom_friend);
        mTabTVs[2] = (TextView) findViewById(R.id.tv_tab_bottom_contact);
        mTabTVs[3] = (TextView) findViewById(R.id.tv_tab_bottom_setting);

        mTabTVIdsNormal = new int[] { R.drawable.tab_weixin_normal, R.drawable.tab_find_frd_normal, R.drawable.tab_address_normal,
                R.drawable.tab_settings_normal };

        mTabTVIdsPress = new int[] { R.drawable.tab_weixin_pressed, R.drawable.tab_find_frd_pressed, R.drawable.tab_address_pressed,
                R.drawable.tab_settings_pressed };

        //给四个控件设置一个Tag，当我们点击某个控件时可以根据这个Tag来识别此控件，当然我们也可以根据v.getid()来识别，但在这里setTag还有其他妙用
        for (int i = 0; i < mTabTVs.length; i++) {
            mTabTVs[i].setOnClickListener(this);
            mTabTVs[i].setTag(i);
        }
    }

    private void initViewPage() {
        mFragments.add(new MainTabFragment2());
        mFragments.add(new MainTabFragment2());
        mFragments.add(new MainTabFragment2());
        mFragments.add(new MainTabFragment2());

        mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int arg0) {
                return mFragments.get(arg0);
            }
        };

        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                setTabSelection(mTabTVs[position]);
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
        });
    }

    @Override
    /**
     *当下面tab的状态改变时，更改ViewPager选中项
     */
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.tv_tab_bottom_weixin:
        case R.id.tv_tab_bottom_friend:
        case R.id.tv_tab_bottom_contact:
        case R.id.tv_tab_bottom_setting:
            setTabSelection(v);
            mViewPager.setCurrentItem((Integer) v.getTag());
            break;

        default:
            break;
        }
    }

    /**
     *当ViewPager选中项改变时，更改下面tab的状态
     */
    private void setTabSelection(View v) {
        //清除掉所有的选中状态
        for (int i = 0; i < mTabTVs.length; i++) {
            mTabTVs[i].setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(mTabTVIdsNormal[i]), null, null);
            mTabTVs[i].setSelected(false);
        }

        // 改变控件的图片，这里的setSelected是为了演示通过selector来改变文字颜色
        int index = (Integer) v.getTag();
        ((TextView) v).setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(mTabTVIdsPress[index]), null, null);
        v.setSelected(true);
    }

}

框架二，布局



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@drawable/title_bar"
        android:gravity="center"
        android:text="微信"
        android:textColor="#fff"
        android:textSize="20sp"
        android:textStyle="bold" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="2016" />

    <LinearLayout
        android:id="@+id/ly_main_tab_bottom"
        android:layout_width="fill_parent"
        android:layout_height="55dp"
        android:background="@drawable/bottom_bar" >

        <TextView
            android:id="@+id/tv_tab_bottom_weixin"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_weixin_normal"
            android:gravity="center"
            android:text="微信"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_friend"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_find_frd_normal"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_contact"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_address_normal"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_setting"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_settings_normal"
            android:gravity="center"
            android:text="设置"
            android:textColor="@drawable/text_color_sel" />
    </LinearLayout>


</LinearLayout>

框架二，fragment


/**
 * 使用support.v4.app中的Fragment
 * @author 白乾涛
 */
public class MainTabFragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.main_tab_01, container, false);
        TextView tv = (TextView) view.findViewById(R.id.tv);
        tv.setText(new SimpleDateFormat("yyyy-MM-dd\nHH:mm:ss").format(new Date()));
        return view;
    }

}

框架3，MainActivity


/**
 * 只能用v4的Fragment
 * @author 白乾涛
 */
public class MainActivity3 extends SlidingFragmentActivity implements OnClickListener {
    private ViewPager mViewPager;
    private FragmentPagerAdapter mPagerAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();
    private ImageView iv_menu_left;
    private ImageView iv_menu_right;

    /**
     * 四个TextView控件
     */
    private TextView[] mTabTVs = new TextView[4];
    /**
     * 四个控件【未】按下时的图片id
     */
    private int[] mTabTVIdsNormal;
    /**
     * 四个控件按下时的图片id
     */
    private int[] mTabTVIdsPress;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main3);
        initViews();
        initMenu();
        initViewPage();
        setTabSelection(mTabTVs[0]);
    }

    private void initViews() {
        mTabTVs[0] = (TextView) findViewById(R.id.tv_tab_bottom_weixin);
        mTabTVs[1] = (TextView) findViewById(R.id.tv_tab_bottom_friend);
        mTabTVs[2] = (TextView) findViewById(R.id.tv_tab_bottom_contact);
        mTabTVs[3] = (TextView) findViewById(R.id.tv_tab_bottom_setting);

        mTabTVIdsNormal = new int[] { R.drawable.tab_weixin_normal, R.drawable.tab_find_frd_normal, R.drawable.tab_address_normal,
                R.drawable.tab_settings_normal };

        mTabTVIdsPress = new int[] { R.drawable.tab_weixin_pressed, R.drawable.tab_find_frd_pressed, R.drawable.tab_address_pressed,
                R.drawable.tab_settings_pressed };

        //给四个控件设置一个Tag，当我们点击某个控件时可以根据这个Tag来识别此控件，当然我们也可以根据v.getid()来识别，但在这里setTag还有其他妙用
        for (int i = 0; i < mTabTVs.length; i++) {
            mTabTVs[i].setOnClickListener(this);
            mTabTVs[i].setTag(i);
        }

        //点击弹出左右侧滑菜单
        iv_menu_left = (ImageView) findViewById(R.id.iv_menu_left);
        iv_menu_right = (ImageView) findViewById(R.id.iv_menu_right);
        iv_menu_left.setOnClickListener(this);
        iv_menu_right.setOnClickListener(this);
    }

    private void initMenu() {
        SlidingMenu menu = getSlidingMenu();
        //两侧通用设置
        menu.setMode(SlidingMenu.LEFT_RIGHT);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
        menu.setShadowWidthRes(R.dimen.shadow_width);
        menu.setShadowDrawable(R.drawable.shadow);
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        menu.setFadeDegree(0.35f);

        //左侧的菜单
        setBehindContentView(R.layout.menu_left);//左右侧不能使用同一个布局，并且replace掉的控件的ID不能相同！不知道为什么会有这种情况！
        Fragment leftMenuFragment = new MainTabFragment2("左侧的");
        getSupportFragmentManager().beginTransaction().replace(R.id.menu_left, leftMenuFragment).commit();

        //右侧菜单设置
        menu.setSecondaryShadowDrawable(R.drawable.shadow);//根据资源文件ID来设置右边（二级）滑动菜单的阴影效果
        menu.setSecondaryMenu(R.layout.menu_right);//设置右边侧滑菜单
        Fragment rightMenuFragment = new MainTabFragment2("右侧的");
        getSupportFragmentManager().beginTransaction().replace(R.id.menu_right, rightMenuFragment).commit();
    }

    private void initViewPage() {
        mFragments.add(new MainTabFragment2("第1个"));
        mFragments.add(new MainTabFragment2("第2个"));
        mFragments.add(new MainTabFragment2("第3个"));
        mFragments.add(new MainTabFragment2("第4个"));

        mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int arg0) {
                return mFragments.get(arg0);
            }
        };

        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                setTabSelection(mTabTVs[position]);
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
        });
    }

    @Override
    /**
     *当下面tab的状态改变时，更改ViewPager选中项
     */
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.tv_tab_bottom_weixin:
        case R.id.tv_tab_bottom_friend:
        case R.id.tv_tab_bottom_contact:
        case R.id.tv_tab_bottom_setting:
            setTabSelection(v);
            mViewPager.setCurrentItem((Integer) v.getTag());
            break;

        case R.id.iv_menu_left:
            getSlidingMenu().showMenu();
            break;

        case R.id.iv_menu_right:
            getSlidingMenu().showSecondaryMenu();
            break;
        default:
            break;
        }
    }

    /**
     *当ViewPager选中项改变时，更改下面tab的状态
     */
    private void setTabSelection(View v) {
        //清除掉所有的选中状态
        for (int i = 0; i < mTabTVs.length; i++) {
            mTabTVs[i].setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(mTabTVIdsNormal[i]), null, null);
            mTabTVs[i].setSelected(false);
        }

        // 改变控件的图片，这里的setSelected是为了演示通过selector来改变文字颜色
        int index = (Integer) v.getTag();
        ((TextView) v).setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(mTabTVIdsPress[index]), null, null);
        v.setSelected(true);
    }

}

框架3，布局



main3.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" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@drawable/title_bar"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv_menu_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="3dp"
            android:src="@drawable/showleft_normal" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="2016"
            android:gravity="center"
            android:text="微信"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/iv_menu_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="3dp"
            android:src="@drawable/showright_normal" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:id="@+id/ly_main_tab_bottom"
        android:layout_width="fill_parent"
        android:layout_height="55dp"
        android:background="@drawable/bottom_bar" >

        <TextView
            android:id="@+id/tv_tab_bottom_weixin"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_weixin_normal"
            android:gravity="center"
            android:text="微信"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_friend"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_find_frd_normal"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_contact"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_address_normal"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@drawable/text_color_sel" />

        <TextView
            android:id="@+id/tv_tab_bottom_setting"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/tab_settings_normal"
            android:gravity="center"
            android:text="设置"
            android:textColor="@drawable/text_color_sel" />
    </LinearLayout>


</LinearLayout>


menu_left.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menu_left"
    android:layout_width="match_parent"
    android:background="#ccf"

    android:layout_height="match_parent" />


menu_right.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menu_right"
    android:layout_width="match_parent"
    android:background="#ccf"

    android:layout_height="match_parent" />