Android-实现底部切换标签(fragment)

本篇讨论实现底部标签切换

话不多说，先上效果图



具体实现步骤，首先布局文件设计好下方标签，上方标题等内容。需要准备的内容为：图片素材，分2种（点击状态的和未点击状态）。布局代码如下

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<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="@color/topbar_bg" >

<ImageView
android:id="@+id/iv_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:focusable="false"
android:src="@drawable/zhidao_logo"
android:contentDescription="@null" />

</RelativeLayout>

<!-- 底部tab -->

<LinearLayout
android:id="@+id/ll_bottom_tab"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:baselineAligned="true">

<RelativeLayout
android:id="@+id/rl_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0" >

<ImageView
android:id="@+id/iv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/index"
android:contentDescription="@null"/>

<TextView
android:id="@+id/tv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_home"
android:layout_centerHorizontal="true"
android:text="@string/bottom_tab_home"
android:textColor="@color/bottomtab_normal"
android:textSize="12sp" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/rl_find"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0" >

<ImageView
android:id="@+id/iv_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/nav_find"
android:contentDescription="@null" />

<TextView
android:id="@+id/tv_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_find"
android:layout_centerHorizontal="true"
android:text="@string/bottom_tab_find"
android:textColor="@color/bottomtab_normal"
android:textSize="12sp" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/rl_me"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0" >

<ImageView
android:id="@+id/iv_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/nav_my"
android:contentDescription="@null" />

<TextView
android:id="@+id/tv_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_me"
android:layout_centerHorizontal="true"
android:text="@string/bottom_tab_my"
android:textColor="@color/bottomtab_normal"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>

<!-- 内容部分， fragment切换 -->

<LinearLayout
android:id="@+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/line"
android:layout_below="@+id/top_tab"
android:orientation="vertical" >
</LinearLayout>

<View
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="@id/ll_bottom_tab"
android:background="@color/line" />
</RelativeLayout>

</FrameLayout>

布局设计好以后，就是实现activity，activity的实现主要是点击的简体OnClickListener，为每个标签加监听，实现标签图片状态的改变，以及显示相应的fragment。代码如下

package com.corn.platform.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.corn.platform.R;
import com.corn.platform.fragment.FindFragment;
import com.corn.platform.fragment.HomePageFragment;
import com.corn.platform.fragment.MeFragment;
import com.corn.platform.lua.RootUtil;

import java.io.DataOutputStream;

public class MainActivity extends FragmentActivity implements View.OnClickListener {

// 三个tab布局
private RelativeLayout homeLayout, findLayout, meLayout;

// 底部标签切换的Fragment
private Fragment homeFragment, findFragment, meFragment,
currentFragment;
// 底部标签图片
private ImageView homeImg, findImg, meImg;
// 底部标签的文本
private TextView homeTv, findTv, meTv;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
initTab();

}

/**
* 初始化UI
*/
private void initUI() {
homeLayout = (RelativeLayout) findViewById(R.id.rl_home);
findLayout = (RelativeLayout) findViewById(R.id.rl_find);
meLayout = (RelativeLayout) findViewById(R.id.rl_me);
homeLayout.setOnClickListener(this);
findLayout.setOnClickListener(this);
meLayout.setOnClickListener(this);

homeImg = (ImageView) findViewById(R.id.iv_home);
findImg = (ImageView) findViewById(R.id.iv_find);
meImg = (ImageView) findViewById(R.id.iv_me);
homeTv = (TextView) findViewById(R.id.tv_home);
findTv = (TextView) findViewById(R.id.tv_find);
meTv = (TextView) findViewById(R.id.tv_me);

}

/**
* 初始化底部标签
*/
private void initTab() {
if (homeFragment == null) {
homeFragment = new HomePageFragment();
}

if (!homeFragment.isAdded()) {
// 提交事务
getSupportFragmentManager().beginTransaction()
.add(R.id.content_layout, homeFragment).commit();

// 记录当前Fragment
currentFragment = homeFragment;
// 设置图片文本的变化
homeImg.setImageResource(R.drawable.index_hover);
homeTv.setTextColor(getResources()
.getColor(R.color.bottomtab_press));
findImg.setImageResource(R.drawable.nav_find);
findTv.setTextColor(getResources().getColor(
R.color.bottomtab_normal));
meImg.setImageResource(R.drawable.nav_my);
meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));

}

}

@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.rl_home: // 知道
clickTab1Layout();
break;
case R.id.rl_find: // 我想知道
clickTab2Layout();
break;
case R.id.rl_me: // 我的
clickTab3Layout();
break;
default:
break;
}
}

/**
* 点击第一个tab
*/
private void clickTab1Layout() {
if (homeFragment == null) {
homeFragment = new HomePageFragment();
}
addOrShowFragment(getSupportFragmentManager().beginTransaction(), homeFragment);

// 设置底部tab变化
homeImg.setImageResource(R.drawable.index_hover);
homeTv.setTextColor(getResources().getColor(R.color.bottomtab_press));
findImg.setImageResource(R.drawable.nav_find);
findTv.setTextColor(getResources().getColor(
R.color.bottomtab_normal));
meImg.setImageResource(R.drawable.nav_my);
meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
}

/**
* 点击第二个tab
*/
private void clickTab2Layout() {
if (findFragment == null) {
findFragment = new FindFragment();
}
addOrShowFragment(getSupportFragmentManager().beginTransaction(), findFragment);

homeImg.setImageResource(R.drawable.index);
homeTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
findImg.setImageResource(R.drawable.nav_find_hover);
findTv.setTextColor(getResources().getColor(
R.color.bottomtab_press));
meImg.setImageResource(R.drawable.nav_my);
meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));

}

/**
* 点击第三个tab
*/
private void clickTab3Layout() {
if (meFragment == null) {
meFragment = new MeFragment();
}

addOrShowFragment(getSupportFragmentManager().beginTransaction(), meFragment);
homeImg.setImageResource(R.drawable.index);
homeTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
findImg.setImageResource(R.drawable.nav_find);
findTv.setTextColor(getResources().getColor(
R.color.bottomtab_normal));
meImg.setImageResource(R.drawable.nav_my_hover);
meTv.setTextColor(getResources().getColor(R.color.bottomtab_press));

}

/**
* 添加或者显示碎片
*
* @param transaction
* @param fragment
*/
private void addOrShowFragment(android.support.v4.app.FragmentTransaction transaction,
Fragment fragment) {
if (currentFragment == fragment)
return;

if (!fragment.isAdded()) { // 如果当前fragment未被添加，则添加到Fragment管理器中
transaction.hide(currentFragment)
.add(R.id.content_layout, fragment).commit();
} else {
transaction.hide(currentFragment).show(fragment).commit();
}

currentFragment = fragment;
}

到此，标签切换就实现了，是不是很简单？