介绍
常见的应用框架 框架一：多个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" />
附件列表
时间： 2024-10-18 05:57:53