郑德才博客

Android开发学习

切换菜单，第三种：切换菜单-点击侧栏按钮进行切换，使用SlidingMenu，使用控件Fragment

新建xml布局文件：activity_three.xml，使用Fragment来显示每个页的内容，代码内容：

<?xml version="1.0" encoding="utf-8"?>
<com.publicClass.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slidingMenu"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

新建第一页xml布局文件：layout_1_title.xml，用来第一页内容，其他页布局差不多，代码内容：

<?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:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/layout_1_top"
        android:layout_width="match_parent"
        android:layout_height="40dip"
        android:background="#990000" >

        <include layout="@layout/top" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/layout_top"
        android:layout_width="match_parent"
        android:layout_height="40dip"
        android:background="#990000" >

        <ImageView
            android:id="@+id/img_netease_top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dip"
            android:src="@drawable/netease_top" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/img_netease_top"
            android:text="@string/lable_1_top_left_text"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@drawable/duoyun" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/layout_title_bar"
        android:layout_width="fill_parent"
        android:layout_height="35dip"
        android:background="@android:color/white"
        android:paddingLeft="10dip"
        android:paddingRight="10dip" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <RelativeLayout
                android:id="@+id/layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/tv_title_bar_news"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:text="@string/title_news_category_tops" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/tv_title_bar_sport"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:text="@string/title_news_category_sport" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/tv_title_bar_play"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:text="@string/title_news_category_play" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/tv_title_bar_finance"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:text="@string/title_news_category_finance" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/tv_title_bar_science"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:text="@string/title_news_category_science" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/tv_title_bar_more"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:text="@string/title_news_category_more" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

使用线性布局LinearLayout，资源文件中的四个按钮使用布局图片文件layout_1_title.xml、layout_2_title.xml、layout_3_title.xml、layout_4_title.xml、layout_5_title.xml、activitty_three.xml，在此就不一一列出

五个按钮点击后对应五个布局及页面：使用Fragment、SlidingMenu，包括：ThreeActivity.java、Tab1Fragment.java、Tab2Fragment.java、Tab3Fragment.java、Tab4Fragment.java、Tab5Fragment.java、CenterFragment.java、LeftFragment.java、RightFragment.java、SlidingMenu.java、SlidingView.java，在此也不一一列出

实现ThreeActivity.java代码：

package com.zhengdecai.switchmenu;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;

import com.TabActivity.CenterFragment;
import com.TabActivity.LeftFragment;
import com.TabActivity.RightFragment;
import com.TabActivity.Tab1Fragment;
import com.TabActivity.Tab2Fragment;
import com.TabActivity.Tab3Fragment;
import com.TabActivity.Tab4Fragment;
import com.TabActivity.Tab5Fragment;
import com.publicClass.SlidingMenu;

/**
 * 切换菜单：使用Fragment、SlidingMenu，包括：ThreeActivity.java、Tab1Fragment.java、Tab2Fragment.java、Tab3Fragment.java、Tab4Fragment.java、Tab5Fragment.java
 * CenterFragment.java、LeftFragment.java、RightFragment.java、SlidingMenu.java、SlidingView.java
 *
 * @author 郑德才
 *
 */
public class ThreeActivity extends FragmentActivity {
 public SlidingMenu mSlidingMenu;
 public LeftFragment leftFragment;
 public RightFragment rightFragment;
 public CenterFragment centerFragment;
 public Tab1Fragment tab1Fragment;
 public Tab2Fragment tab2Fragment;
 public Tab3Fragment tab3Fragment;
 public Tab4Fragment tab4Fragment;
 public Tab5Fragment tab5Fragment;
 public FragmentTransaction t;

 private Fragment mContent;

 public int index_page = 1;

 protected void onCreate(Bundle arg0) {
  super.onCreate(arg0);
  setContentView(R.layout.activity_three);
  mSlidingMenu = (SlidingMenu) findViewById(R.id.slidingMenu);
  mSlidingMenu.setLeftView(getLayoutInflater().inflate(
    R.layout.left_frame, null));
  mSlidingMenu.setRightView(getLayoutInflater().inflate(
    R.layout.right_frame, null));
  mSlidingMenu.setCenterView(getLayoutInflater().inflate(
    R.layout.center_frame, null));

  t = this.getSupportFragmentManager().beginTransaction();
  leftFragment = new LeftFragment();
  rightFragment = new RightFragment();
  t.replace(R.id.left_frame, leftFragment);
  t.replace(R.id.right_frame, rightFragment);

  centerFragment = new CenterFragment();
  t.replace(R.id.center_frame, centerFragment);
  t.commit();

  tab1Fragment = new Tab1Fragment();
  tab2Fragment = new Tab2Fragment();
  tab3Fragment = new Tab3Fragment();
  tab4Fragment = new Tab4Fragment();
  tab5Fragment = new Tab5Fragment();

  switchContent(tab1Fragment);
 }

 public void showLeft() {
  mSlidingMenu.showLeftView();
 }

 public void showRight() {
  mSlidingMenu.showRightView();
 }

 /**
  * 左侧菜单点击切换首页的内容
  */
 public void switchContent(Fragment fragment) {
  mContent = fragment;

  getSupportFragmentManager().beginTransaction()
    .replace(R.id.center_frame, fragment).commit();
 }
}

实现效果：