应用框架 ViewPager Tab Fragment SlidingMenu

Posted 2020-07-31

介绍

常见的应用框架
框架一：多个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"

以上是关于应用框架 ViewPager Tab Fragment SlidingMenu的主要内容，如果未能解决你的问题，请参考以下文章

Android开源框架ViewPageIndicator和ViewPager实现Tab导航

使用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab

Fragment与ViewPager

ActionBarSherlock、ViewPager、TabsAdapter 嵌套选项卡片段

ViewPager内的MapFragment在改变方向时崩溃

tablayout 结合viewpager 怎么点击tab无效