使用Fragment实现底部Tab标签切换界面功能

使用Fragment实现底部Tab标签切换界面功能

主界面布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.loccy.loccy.MainActivity">
    <RelativeLayout
        android:id="@+id/rl_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--<RelativeLayout-->
            <!--android:id="@+id/top_tab"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="50dip"-->
            <!--android:background="#948a8a">-->
            <!--<ImageView-->
                <!--android:id="@+id/logo"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="match_parent"-->
                <!--android:layout_centerInParent="true"-->
                <!--android:background="#f00"/>-->
        <!--</RelativeLayout>-->
        <LinearLayout
            android:id="@+id/ll_bottom_tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:baselineAligned="true"
            android:background="#dadada">
            <RelativeLayout
                android:id="@+id/rl_tab_homepage"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">
                <ImageView
                    android:id="@+id/iv_tab_homepage"
                    android:layout_width="26dp"
                    android:layout_height="26dp"
                    android:paddingTop="5dp"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/tab_homepage_checked"
                    android:contentDescription="@null"/>
                <TextView
                    android:id="@+id/tv_tab_homepage"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingBottom="3dp"
                    android:layout_below="@+id/iv_tab_homepage"
                    android:layout_centerHorizontal="true"
                    android:text="@string/tab_homepage"
                    android:textColor="@color/tab_item_checked"
                    android:textSize="14sp"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/rl_tab_activity"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">
                <ImageView
                    android:id="@+id/iv_tab_activity"
                    android:layout_width="26dp"
                    android:layout_height="26dp"
                    android:paddingTop="5dp"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/tab_me_normal"
                    android:contentDescription="@null"/>
                <TextView
                    android:id="@+id/tv_tab_activity"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingBottom="3dp"
                    android:layout_below="@+id/iv_tab_activity"
                    android:layout_centerHorizontal="true"
                    android:text="@string/tab_activity"
                    android:textColor="@color/tab_item_normal"
                    android:textSize="14sp"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/rl_tab_message"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">
                <ImageView
                    android:id="@+id/iv_tab_message"
                    android:layout_width="26dp"
                    android:layout_height="26dp"
                    android:paddingTop="5dp"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/tab_message_normal"
                    android:contentDescription="@null"/>
                <TextView
                    android:id="@+id/tv_tab_message"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingBottom="3dp"
                    android:layout_below="@+id/iv_tab_message"
                    android:layout_centerHorizontal="true"
                    android:text="@string/tab_message"
                    android:textColor="@color/tab_item_normal"
                    android:textSize="14sp"/>
            </RelativeLayout>
            <RelativeLayout
                android:id="@+id/rl_tab_me"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">
                <ImageView
                    android:id="@+id/iv_tab_me"
                    android:layout_width="26dp"
                    android:layout_height="26dp"
                    android:paddingTop="5dp"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/tab_me_normal"
                    android:contentDescription="@null"/>
                <TextView
                    android:id="@+id/tv_tab_me"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingBottom="3dp"
                    android:layout_below="@+id/iv_tab_me"
                    android:layout_centerHorizontal="true"
                    android:text="@string/tab_me"
                    android:textColor="@color/tab_item_normal"
                    android:textSize="14sp"/>
            </RelativeLayout>
        </LinearLayout>
        <View
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_above="@id/ll_bottom_tab"
            android:background="#cfcece">
        </View>
        <LinearLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/line"
            android:orientation="vertical">
        </LinearLayout>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

主Activity控制切换

package com.loccy.loccy;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private RelativeLayout tab_homepage_lt,tab_activity_lt,tab_message_lt,tab_me_lt;
    private Fragment homepage_fm,activity_fm,message_fm,me_fm,curFragment;
    private static final int TABCOUNT = 4;
    private ImageView[] tab_item_imgs = new ImageView[TABCOUNT];
    private TextView[] tab_item_txts = new TextView[TABCOUNT];
    private int[] img_ids = new int[]{R.id.iv_tab_homepage,R.id.iv_tab_activity,R.id.iv_tab_message,R.id.iv_tab_me};
    private int[] txt_ids = new int[]{R.id.tv_tab_homepage,R.id.tv_tab_activity,R.id.tv_tab_message,R.id.tv_tab_me};
    private int[] img_nor_ids = new int[]{R.drawable.tab_homepage_normal,R.drawable.tab_me_normal,R.drawable.tab_message_normal,R.drawable.tab_me_normal};
    private int[] img_chd_ids = new int[]{R.drawable.tab_homepage_checked,R.drawable.tab_me_checked,R.drawable.tab_message_checked,R.drawable.tab_me_checked};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        InitUI();
        InitTab();
    }
    void InitUI(){
        tab_homepage_lt = (RelativeLayout)findViewById(R.id.rl_tab_homepage);
        tab_activity_lt = (RelativeLayout)findViewById(R.id.rl_tab_activity);
        tab_message_lt = (RelativeLayout)findViewById(R.id.rl_tab_message);
        tab_me_lt = (RelativeLayout)findViewById(R.id.rl_tab_me);
        tab_homepage_lt.setOnClickListener(this);
        tab_activity_lt.setOnClickListener(this);
        tab_message_lt.setOnClickListener(this);
        tab_me_lt.setOnClickListener(this);
        for(int i=0;i<TABCOUNT;i++){
            tab_item_imgs[i] = (ImageView)findViewById(img_ids[i]);
            tab_item_txts[i] = (TextView)findViewById(txt_ids[i]);
        }
    }
    void InitTab() {
        if (homepage_fm == null)
            homepage_fm = new HomeFragment();
        if(!homepage_fm.isAdded()){
            getSupportFragmentManager().beginTransaction().add(R.id.content_layout,homepage_fm).commit();
            curFragment = homepage_fm;
            for(int i=0;i<TABCOUNT;i++){
                if(i==0){
                    tab_item_imgs[i].setImageResource(img_chd_ids[i]);
                    tab_item_txts[i].setTextColor(getResources().getColor(R.color.tab_item_checked));
                }
                else {
                    tab_item_imgs[i].setImageResource(img_nor_ids[i]);
                    tab_item_txts[i].setTextColor(getResources().getColor(R.color.tab_item_normal));
                }
            }
        }
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.rl_tab_homepage:onClickTab(0);break;
            case R.id.rl_tab_activity:onClickTab(1);break;
            case R.id.rl_tab_message:onClickTab(2);break;
            case R.id.rl_tab_me:onClickTab(3);break;
        }
    }
    void onClickTab(int index){
        switch (index){
            case 0:{
                if (homepage_fm == null)
                    homepage_fm = new HomeFragment();
                addOrShowFragment(homepage_fm);
            }
            break;
            case 1:{
                if (activity_fm == null)
                    activity_fm = new ActivityFragment();
                addOrShowFragment(activity_fm);
            }
            break;
            case 2:{
                if (message_fm == null)
                    message_fm = new MessageFragment();
                addOrShowFragment(message_fm);
            }
            break;
            case 3:{
                if (me_fm == null)
                    me_fm = new MeFragment();
                addOrShowFragment(me_fm);
            }
            break;
            default:break;
        }
        for(int i=0;i<TABCOUNT;i++){
            if(i==index){
                tab_item_imgs[i].setImageResource(img_chd_ids[i]);
                tab_item_txts[i].setTextColor(getResources().getColor(R.color.tab_item_checked));
            }
            else {
                tab_item_imgs[i].setImageResource(img_nor_ids[i]);
                tab_item_txts[i].setTextColor(getResources().getColor(R.color.tab_item_normal));
            }
        }
    }
    private void addOrShowFragment(Fragment fragment){
        if(curFragment==fragment)
            return;
        if(!fragment.isAdded()) {
            getSupportFragmentManager().beginTransaction().hide(curFragment).add(R.id.content_layout, fragment).commit();
        }
        else {
            getSupportFragmentManager().beginTransaction().hide(curFragment).show(fragment).commit();
        }
        curFragment = fragment;
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Fragment布局

<?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">
    <RelativeLayout
        android:id="@+id/top_tab"
        android:layout_width="match_parent"
        android:layout_height="50dip"
        android:background="#948a8a"
        android:layout_weight="1">
        <ImageView
            android:id="@+id/logo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:background="#837a7a"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/tab_homepage"
            android:textColor="@color/white"
            android:textSize="24sp"/>
        <Button
            android:id="@+id/locate_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:background="#0000"
            android:text="深圳"
            android:textSize="24sp"/>
    </RelativeLayout>
</LinearLayout>

Fragment代码

package com.loccy.loccy;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

/**
 * Created by Loccy on 16/3/17.
 */
public class HomeFragment extends Fragment{

    private Button search_btn,locate_btn;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //return super.onCreateView(inflater, container, savedInstanceState);

        View view = inflater.inflate(R.layout.fragment_homepage,container,false);

        locate_btn = (Button)view.findViewById(R.id.locate_btn);
        locate_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), "Locate", Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
}