显示效果图:
TabActivity.java:
package com.demo.tab; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.SimpleOnPageChangeListener; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageView; import android.widget.TextView; import com.demo.broadcast.R; public class TabActivity extends FragmentActivity implements OnClickListener{ private TextView tab1, tab2, tab3; private ImageView tab1_bottom, tab2_bottom, tab3_bottom; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.setContentView(R.layout.tab); initView(); show(1); } private void initView() { tab1 = (TextView) findViewById(R.id.tab1); tab2 = (TextView) findViewById(R.id.tab2); tab3 = (TextView) findViewById(R.id.tab3); tab1.setOnClickListener(this); tab2.setOnClickListener(this); tab3.setOnClickListener(this); tab1_bottom = (ImageView) findViewById(R.id.tab1_bottom); tab2_bottom = (ImageView) findViewById(R.id.tab2_bottom); tab3_bottom = (ImageView) findViewById(R.id.tab3_bottom); viewPager = (ViewPager) findViewById(R.id.viewPager); TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); viewPager.setOnPageChangeListener(new SimpleOnPageChangeListener(){ @Override public void onPageSelected(int arg0) { show(arg0); } }); viewPager.setCurrentItem(1); } private void show(int position){ tab1_bottom.setVisibility(position == 0 ? View.VISIBLE : View.INVISIBLE); tab2_bottom.setVisibility(position == 1 ? View.VISIBLE : View.INVISIBLE); tab3_bottom.setVisibility(position == 2 ? View.VISIBLE : View.INVISIBLE); } @Override public void onClick(View v) { switch(v.getId()){ case R.id.tab1: viewPager.setCurrentItem(0); break; case R.id.tab2: viewPager.setCurrentItem(1); break; case R.id.tab3: viewPager.setCurrentItem(2); break; } } }
TabPagerAdapter.java:
package com.demo.tab; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class TabPagerAdapter extends FragmentPagerAdapter{ private static int TCOUNT = 3; private TabFragment[] fragments = new TabFragment[TCOUNT]; public TabPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { TabFragment fragment = new TabFragment(); Bundle args = new Bundle(); args.putInt("section_number", position); fragment.setArguments(args); fragments[position] = fragment; return fragment; } @Override public int getCount() { return TCOUNT; } }
TabFragment.java:
package com.demo.tab; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.demo.broadcast.R; public class TabFragment extends Fragment{ private int section; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { section = getArguments().getInt("section_number"); if(section == 0){ View view = inflater.inflate(R.layout.tab1, container, false); return view; }else if(section == 1){ View view = inflater.inflate(R.layout.tab2, container, false); return view; }else if(section == 2){ View view = inflater.inflate(R.layout.tab3, container, false); return view; } return null; } }
tab.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="match_parent" android:background="#ffffff" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> <!-- tab标签栏 --> <LinearLayout android:layout_width="fill_parent" android:layout_height="60dp" android:background="#000000" > <TextView android:id="@+id/tab1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:text="tab1" android:textColor="#ffffff" android:textSize="18sp" /> <View android:layout_width="1dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:background="#F3F2F6" /> <TextView android:id="@+id/tab2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:text="tab2" android:textColor="#ffffff" android:textSize="18sp" /> <View android:layout_width="1dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:background="#F3F2F6" /> <TextView android:id="@+id/tab3" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:text="tab3" android:textColor="#ffffff" android:textSize="18sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/tab1_bottom" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/tab_red_bottom" /> <ImageView android:id="@+id/tab2_bottom" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/tab_red_bottom" /> <ImageView android:id="@+id/tab3_bottom" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/tab_red_bottom" /> </LinearLayout> </LinearLayout>
tab1.xml,tab2.xml,tab3.xml布局非常简单,在此就不在展示了。