1.TAB标题栏,top1.xml
<?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="60dp"
android:background="#eee"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="57dp"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/id_ll_jdkp"
android:layout_width="3dp"
android:orientation="horizontal"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:id="@+id/id_tv_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="建档卡片"
android:textSize="25sp"
android:textColor="#008000" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_ll_jbqk"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:id="@+id/id_tv_friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="25sp"
android:text="基本情况" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_ll_gddl"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="25sp"
android:id="@+id/id_tv_contact"
android:text="耕地地力" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="@+id/id_iv_tabline"
android:layout_width="100dp"
android:layout_height="3dp"
android:background="@drawable/tabline" />
</LinearLayout>
<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/top1" />
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
3.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"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is first Tab"
android:textSize="22sp"
android:textStyle="bold" />
</LinearLayout>
4.Fragment代码,实现一个简单的Fragment,每个标签对应一个Fragment,每个Fragment对应一个XML
package com.zyrj.bqw;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class JdkpTabFragment extends Fragment
{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
return inflater.inflate(R.layout.tab01, container, false);
}
}
5.重点来了,主页面的代码
package com.zyrj.bqw;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
public class OurFilesActivity extends FragmentActivity implements
android.view.View.OnClickListener {
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mDatas;
private TextView mChatTextView;
private TextView mFriendTextView;
private TextView mContactTextView;
private LinearLayout mJdkpLinearLayout, mJbqkLinearLayout,
mGddlLinearLayout;
private ImageView mTabline;
private int mScreen1_3;
private int mCurrentPageIndex;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_ourfiles);
initTabLine();
initView();
}
private void initTabLine() {
<span style="white-space:pre"> </span>//设置下划线
mTabline = (ImageView) findViewById(R.id.id_iv_tabline);
Display display = getWindow().getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
mScreen1_3 = outMetrics.widthPixels / 3;
LayoutParams lp = mTabline.getLayoutParams();
lp.width = mScreen1_3;
mTabline.setLayoutParams(lp);
}
private void initView() {
//设置切换页和动作
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
mChatTextView = (TextView) findViewById(R.id.id_tv_chat);
mFriendTextView = (TextView) findViewById(R.id.id_tv_friend);
mContactTextView = (TextView) findViewById(R.id.id_tv_contact);
//设置TAB标题点击事件
mJdkpLinearLayout = (LinearLayout) findViewById(R.id.id_ll_jdkp);
mJbqkLinearLayout = (LinearLayout) findViewById(R.id.id_ll_jbqk);
mGddlLinearLayout = (LinearLayout) findViewById(R.id.id_ll_gddl);
mJdkpLinearLayout.setOnClickListener(this);
mJbqkLinearLayout.setOnClickListener(this);
mGddlLinearLayout.setOnClickListener(this);
mDatas = new ArrayList<Fragment>();
JdkpTabFragment tab01 = new JdkpTabFragment();
JbqkTabFragment tab02 = new JbqkTabFragment();
GddlTabFragment tab03 = new GddlTabFragment();
mDatas.add(tab01);
mDatas.add(tab02);
mDatas.add(tab03);
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return mDatas.size();
}
@Override
public Fragment getItem(int arg0) {
return mDatas.get(arg0);
}
};
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
resetTextView();
switch (position) {
case 0:
mChatTextView.setTextColor(Color.parseColor("#008000"));
break;
case 1:
mFriendTextView.setTextColor(Color.parseColor("#008000"));
break;
case 2:
mContactTextView.setTextColor(Color.parseColor("#008000"));
break;
}
mCurrentPageIndex = position;
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPx) {
Log.e("TAG", position + " , " + positionOffset + " , "
+ positionOffsetPx);
LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
.getLayoutParams();
if (mCurrentPageIndex == 0 && position == 0)// 0->1
{
lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex
* mScreen1_3);
} else if (mCurrentPageIndex == 1 && position == 0)// 1->0
{
lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
* mScreen1_3);
} else if (mCurrentPageIndex == 1 && position == 1) // 1->2
{
lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset
* mScreen1_3);
} else if (mCurrentPageIndex == 2 && position == 1) // 2->1
{
lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
* mScreen1_3);
}
mTabline.setLayoutParams(lp);
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
//所有TAB标题变回黑色
protected void resetTextView() {
mChatTextView.setTextColor(Color.BLACK);
mFriendTextView.setTextColor(Color.BLACK);
mContactTextView.setTextColor(Color.BLACK);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.id_ll_jdkp:
mViewPager.setCurrentItem(0);
break;
case R.id.id_ll_jbqk:
mViewPager.setCurrentItem(1);
break;
case R.id.id_ll_gddl:
mViewPager.setCurrentItem(2);
break;
default:
break;
}
}
}
简单易用的Fragment标签页就实现了~~~~