1 布局文件
a 新建三个布局文件,分别放置一个TextView,用来模拟内容。
b 主布局,一个标题栏,一个线性布局承载Fragment内容,底部三个点击的Tab按钮,xml如下:(activity_main.xml)
<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>
<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_know"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<ImageView
android:id="@+id/iv_know"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/btn_know_nor"
android:contentDescription="@null"/>
<TextView
android:id="@+id/tv_know"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_know"
android:layout_centerHorizontal="true"
android:text="@string/bottom_tab_know"
android:textColor="@color/bottomtab_normal"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_want_know"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0" >
<ImageView
android:id="@+id/iv_i_want_know"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/btn_wantknow_nor"
android:contentDescription="@null" />
<TextView
android:id="@+id/tv_i_want_know"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_i_want_know"
android:layout_centerHorizontal="true"
android:text="@string/bottom_tab_wantknow"
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/btn_my_nor"
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>
<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>
2 实现三个类继承Fragment,在每个类里加载fragment的布局。例如:IWantKnowFragment类
package com.cz.myfragment;
import com.example.testfragment.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class IWantKnowFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.from(getActivity()).inflate(R.layout.main_tab2_fragment, container,false);
}
}
3 实现MainActivity类。
完成几个方法就ok了。
a initUI():
private void initUI() {
// TODO Auto-generated method stub
knowLayout = (RelativeLayout) findViewById(R.id.rl_know);
iWantKnowLayout = (RelativeLayout) findViewById(R.id.rl_want_know);
meLayout = (RelativeLayout) findViewById(R.id.rl_me);
knowImg = (ImageView) findViewById(R.id.iv_know);
iWantKnowImg = (ImageView) findViewById(R.id.iv_i_want_know);
meImg = (ImageView) findViewById(R.id.iv_me);
knowTv = (TextView) findViewById(R.id.tv_know);
iWantKnowTv = (TextView) findViewById(R.id.tv_i_want_know);
meTv = (TextView) findViewById(R.id.tv_me);
knowLayout.setOnClickListener(this);
iWantKnowLayout.setOnClickListener(this);
meLayout.setOnClickListener(this);
}
b initTab():
/**
* 初始化默认选择的Fragment
*/
@SuppressLint("NewApi")
private void initTab() {
// TODO Auto-generated method stub
if (knowFragment == null) {
knowFragment = new ZhidaoFragment();
}
// 显示当前内容区域的Fragment
if (!knowFragment.isAdded()) {
// getSupportFragmentManager().beginTransaction().add(R.id.content_layout,
// knowFragment).commit();
// getSupportFragmentManager().beginTransaction().add(knowFragment,
// null).commit();
getSupportFragmentManager().beginTransaction()
.add(R.id.content_layout, knowFragment).commit();
}
currentFragment = knowFragment;
// 调整tab的颜色深浅
knowImg.setBackground(getResources().getDrawable(
R.drawable.btn_know_pre));
knowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));
iWantKnowImg.setBackground(getResources().getDrawable(
R.drawable.btn_wantknow_nor));
iWantKnowTv.setTextColor(getResources().getColor(
R.color.bottomtab_normal));
meImg.setBackground(getResources().getDrawable(R.drawable.btn_my_nor));
meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));
}
c changeFragemnt
/**
* 切换Fragment的方法,主要目的是代码复用
* @param beginTransaction
* @param frg
*/
public void changeFragemnt(FragmentTransaction beginTransaction,
Fragment frg) {
// getSupportFragmentManager().beginTransaction().add(R.layout., arg1)
if (frg == currentFragment) {
return;
}
if (!frg.isAdded()) {
beginTransaction.hide(currentFragment)
.add(R.id.content_layout, frg).commit();
} else {
beginTransaction.hide(currentFragment).show(frg).commit();
}
currentFragment = frg;
}
d 实现OnClickListener接口,并实现toKnow();toWantKnow();toMe();方法,具体请看源码
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
int id = v.getId();
switch (id) {
case R.id.rl_know:
toKnow();
break;
case R.id.rl_want_know:
toWantKnow();
break;
case R.id.rl_me:
toMe();
break;
default:
break;
}
4 其他相关内容,请见具体代码