仿微信客户端 帧布局中加入fragment

学习内容来自“慕课网”

这里用Fragment来实现APP主界面

思路：

底部横向排列4个LinearLayout，每个LinearLayout包含一个图片按钮和一个文字

1、默认显示第一个功能（微信）的图标为亮，其他三个为暗

2、点击相应的按钮，首先将所有的图标变暗，接着隐藏所有Fragment，再把点击的对应的Fragment显示出来，并把相应的图标显示亮

首先布局文件

activity_main.xml与ViewPager实现Tab的是不一样的

 <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"
      >
     <include layout="@layout/top"/>

      <FrameLayout                                    //与Viewpager实现Tab的不同点在这里
          android:id="@+id/id_content"
          android:layout_width="fill_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          ></FrameLayout>

     <include layout="@layout/bottom"/>
 </LinearLayout>

activity_main

 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:background="@drawable/title_bar"
 5     android:layout_height="45dp"
 6     android:gravity="center"
 7     android:orientation="vertical" >
 8     <TextView
 9         android:layout_height="wrap_content"
10         android:layout_width="wrap_content"
11         android:layout_gravity="center"
12         android:text="微信"
13         android:textColor="#ffffff"
14         android:textSize="20sp"
15         android:textStyle="bold"
16
17         />
18
19 </LinearLayout>
复制代码

top

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="55dp"
     android:background="@drawable/bottom_bar"
     android:orientation="horizontal" >

     <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:gravity="center"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        >
         <ImageButton
            android:id="@+id/id_tab_weixin_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_weixin_pressed"
            android:clickable="false"
            android:background="#00000000"
            />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="微信"
             android:textColor="#ffffff"
             />
     </LinearLayout>

     <LinearLayout
        android:id="@+id/id_tab_add"
        android:layout_width="0dp"
        android:gravity="center"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        >
         <ImageButton
            android:id="@+id/id_tab_add_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:src="@drawable/tab_address_normal"
            android:background="#00000000"
            />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="通信录"
             android:textColor="#ffffff"
             />
     </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:gravity="center"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        >
         <ImageButton
            android:id="@+id/id_tab_frd_image"
            android:layout_width="wrap_content"
            android:clickable="false"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_find_frd_normal"
            android:background="#00000000"
            />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="朋友"
             android:textColor="#ffffff"
             />
     </LinearLayout>

     <LinearLayout
        android:id="@+id/id_tab_set"
        android:layout_width="0dp"
        android:gravity="center"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        >
         <ImageButton
            android:id="@+id/id_tab_set_image"
            android:layout_width="wrap_content"
            android:clickable="false"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_settings_normal"
            android:background="#00000000"
            />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="设置"
             android:textColor="#ffffff"
             />
     </LinearLayout>
 </LinearLayout>

 bottom.xml

bottom

 package com.example.fragment_tab;

 import android.os.Bundle;
 import android.app.Activity;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentTransaction;
 import android.text.method.HideReturnsTransformationMethod;
 import android.view.Menu;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.Window;
 import android.widget.ImageButton;
 import android.widget.LinearLayout;

 public class MainActivity extends FragmentActivity implements OnClickListener{

     private LinearLayout mTabWeixin;
     private LinearLayout mTabFrd;
     private LinearLayout mTabAdd;
     private LinearLayout mTabSet;

     //imagebutton
     private ImageButton mImgWeixin;
     private ImageButton mImgFrd;
     private ImageButton mImgAdd;
     private ImageButton mImgSet;

     //fragment
     private Fragment mTab_1;
     private Fragment mTab_2;
     private Fragment mTab_3;
     private Fragment mTab_4;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         //初始化
         init();
         initEvent();
         //默认显示第一个功能的界面(微信界面)
         setSelect(0);
     }

     private void initEvent() {
         // TODO Auto-generated method stub
         mTabWeixin.setOnClickListener(this);
         mTabAdd.setOnClickListener(this);
         mTabFrd.setOnClickListener(this);
         mTabSet.setOnClickListener(this);

     }

     private void init() {
         // TODO Auto-generated method stub
         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
         mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);
         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
         mTabSet = (LinearLayout) findViewById(R.id.id_tab_set);

         mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);
         mImgAdd = (ImageButton) findViewById(R.id.id_tab_add_image);
         mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);
         mImgSet = (ImageButton) findViewById(R.id.id_tab_set_image);

     }

     //响应事件
     @Override
     public void onClick(View v) {
         // TODO Auto-generated method stub
         //先切换图片至暗色
         resetImage();
         switch (v.getId()) {
         case R.id.id_tab_weixin:
             setSelect(0);
             break;
         case R.id.id_tab_add:
             setSelect(1);
             break;
         case R.id.id_tab_frd:
             setSelect(2);
             break;
         case R.id.id_tab_set:
             setSelect(3);
             break;

         default:
             break;
         }
     }

     private void setSelect(int i){
         FragmentManager fm = getSupportFragmentManager();
         FragmentTransaction transaction = fm.beginTransaction();
         //隐藏所有
         hidFragment(transaction);

         //把图片设置为亮的

         //设置内容区域
         switch (i) {
         case 0:
             if(mTab_1 == null)
             {
                 mTab_1 = new WeixinFragment();
                 transaction.add(R.id.id_content, mTab_1);
             }
             else
             {
                 transaction.show(mTab_1);

             }
             mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
             break;
         case 1:
             if(mTab_2 == null)
             {
                 mTab_2 = new AddFragment();
                 transaction.add(R.id.id_content, mTab_2);
             }
             else
             {
                 transaction.show(mTab_2);

             }
             mImgAdd.setImageResource(R.drawable.tab_address_pressed);
             break;
         case 2:
             if(mTab_3 == null)
             {
                 mTab_3 = new FrdFragment();
                 transaction.add(R.id.id_content, mTab_3);
             }
             else
             {
                 transaction.show(mTab_3);

             }
             mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
             break;
         case 3:
             if(mTab_4 == null)
             {
                 mTab_4 = new SetFragment();
                 transaction.add(R.id.id_content, mTab_4);
             }
             else
             {
                 transaction.show(mTab_4);

             }
             mImgSet.setImageResource(R.drawable.tab_settings_pressed);
             break;

         default:
             break;

         }
         transaction.commit();
     }
     private void hidFragment(FragmentTransaction transaction) {
         // TODO Auto-generated method stub
         if(mTab_1 != null)
         {
             transaction.hide(mTab_1);
         }
         if(mTab_2 != null)
         {
             transaction.hide(mTab_2);
         }
         if(mTab_3 != null)
         {
             transaction.hide(mTab_3);
         }
         if(mTab_4 != null)
         {
             transaction.hide(mTab_4);
         }

     }

     //将所有功能图标的界面设为暗色
     private void resetImage() {
         // TODO Auto-generated method stub
         mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
         mImgAdd.setImageResource(R.drawable.tab_address_normal);
         mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
         mImgSet.setImageResource(R.drawable.tab_settings_normal);

     }

 }

 MainActivity

mainactivity

 package fragments;

 import com.example.licai.R;
 import android.app.Fragment;
 import android.os.Bundle;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 public class Zhichu_fragment extends Fragment {

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         View v=inflater.inflate(R.layout.zhichu_fragment, null);
         return v;
     }

 }

fragment