安卓开发_慕课网_Fragment实现Tab(App主界面)

学习内容来自“慕课网”

这里用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>
    

其他布局文件都是一样的

头部部分：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@drawable/title_bar"
    android:layout_height="45dp"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        
        />

</LinearLayout>

底部部分：

<?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>

四个功能点击布局(这里只贴一个，都一样的，只是显示的文字不同方便效果演示而已)：

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="微信"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

然后是java文件

MainActivity.java

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);
        
    }

    
}

AddFragment.java

package com.example.fragment_tab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class AddFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
    
        
        return inflater.inflate(R.layout.tab_2, container,false);
    }
}

SetFragment.java

package com.example.fragment_tab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SetFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
    
        
        return inflater.inflate(R.layout.tab_4, container,false);
    }
}

WeixinFragment.java

package com.example.fragment_tab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class WeixinFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
    
        
        return inflater.inflate(R.layout.tab_1, container,false);
    }
}

FrdFragment.java

package com.example.fragment_tab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FrdFragment extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.tab_3, container,false);
    }

}

除了MainActivity.java的其他四个java文件都是相似的

效果图：

然后说下Fragment实现Tab与ViewPager实现Tab的不同点

1、用ViewPage的时候所有的布局都写在MainActivity.java，导致代码过长，不易写和修改

2、用Fragment的时候MainActivity只起到调用各布局的作用，具体（比如设置功能）的布局，响应事件，控件都由各自的Fragment处理，方便后期代码的维护

3、用ViewPage实现Tab可以使得中间内容部分左右滑动，而Fragment实现Tab则不能实现中间内容部分的左右滑动