介绍
常见的应用框架框架一:多个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;@Overrideprotected 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);}}@Overridepublic 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" ><TextViewandroid: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" /><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="2016" /><LinearLayoutandroid:id="@+id/ly_main_tab_bottom"android:layout_width="fill_parent"android:layout_height="55dp"android:background="@drawable/bottom_bar" ><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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 {@Overridepublic 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" ><TextViewandroid: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;@Overrideprotected 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()) {@Overridepublic int getCount() {return mFragments.size();}@Overridepublic Fragment getItem(int arg0) {return mFragments.get(arg0);}};mViewPager = (ViewPager) findViewById(R.id.id_viewpager);mViewPager.setAdapter(mPagerAdapter);mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {setTabSelection(mTabTVs[position]);}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic 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" ><TextViewandroid: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.ViewPagerandroid:id="@+id/id_viewpager"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="2016" /><LinearLayoutandroid:id="@+id/ly_main_tab_bottom"android:layout_width="fill_parent"android:layout_height="55dp"android:background="@drawable/bottom_bar" ><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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 {@Overridepublic 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;@Overridepublic 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()) {@Overridepublic int getCount() {return mFragments.size();}@Overridepublic Fragment getItem(int arg0) {return mFragments.get(arg0);}};mViewPager = (ViewPager) findViewById(R.id.id_viewpager);mViewPager.setAdapter(mPagerAdapter);mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {setTabSelection(mTabTVs[position]);}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic 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" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="45dp"android:background="@drawable/title_bar"android:orientation="horizontal" ><ImageViewandroid: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" /><TextViewandroid: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" /><ImageViewandroid: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.ViewPagerandroid:id="@+id/id_viewpager"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" /><LinearLayoutandroid:id="@+id/ly_main_tab_bottom"android:layout_width="fill_parent"android:layout_height="55dp"android:background="@drawable/bottom_bar" ><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" />