ViewPager+Fragment实现选项卡的滑动及点击效果

今天就先写一个简单的Demo

第一步：

在layout新建一个fragment_demo.xml

<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"
    tools:context=".FramgentDemo" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="#fff000"
        android:orientation="horizontal">

        <TextView  android:id="@+id/txt1"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center_vertical|center_horizontal"
            android:text="新闻" />

        <TextView  android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center_vertical|center_horizontal"
            android:text="娱乐" />

        <TextView  android:id="@+id/txt3"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
             android:gravity="center_vertical|center_horizontal"
            android:text="体育" />

        <TextView  android:id="@+id/txt4"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
             android:gravity="center_vertical|center_horizontal"
            android:layout_weight="1"
            android:text="军事" />
    </LinearLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/info"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

</LinearLayout>

注意加入viewpager包，并且要让ViewPager宽度高度显示

第二步:

在主配置文件中让activity继承FragmentActivity

package activity.chuangdun.com.smarttablayout;

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.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.TextView;

public class FramgentDemo extends FragmentActivity {

   ViewPager info;
   TextView txt1,txt2,txt3,txt4;
   
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_framgent_demo);
      
      
      
      initview();
      initfragment();
   }
   
   public void initview(){
      txt1 = (TextView)findViewById(R.id.txt1);
      txt2 = (TextView)findViewById(R.id.txt2);
      txt3 = (TextView)findViewById(R.id.txt3);
      txt4 = (TextView)findViewById(R.id.txt4);
      txt1.setOnClickListener(new MyOnClick());
      txt2.setOnClickListener(new MyOnClick());
      txt3.setOnClickListener(new MyOnClick());
      txt4.setOnClickListener(new MyOnClick());
      txt1.setTextColor(Color.RED);
      txt1.setBackgroundColor(Color.BLUE);
   }
    
   class MyOnClick implements OnClickListener{
      public void onClick(View v) {
         inittextcolor();
         if(v.getId()==txt1.getId()){
            info.setCurrentItem(0);
            txt1.setTextColor(Color.RED);
            txt1.setBackgroundColor(Color.BLUE);
         }
         else if(v.getId()==txt2.getId()){
            info.setCurrentItem(1);
            txt2.setTextColor(Color.RED);
            txt2.setBackgroundColor(Color.BLUE);
         }
         else if(v.getId()==txt3.getId()){
            info.setCurrentItem(2);
            txt3.setTextColor(Color.RED);
            txt3.setBackgroundColor(Color.BLUE);
         }
         
         else if(v.getId()==txt4.getId()){
            info.setCurrentItem(3);
            txt4.setTextColor(Color.RED);
            txt4.setBackgroundColor(Color.BLUE);
         }
      }
   }
   
   public void inittextcolor(){
      txt1.setTextColor(Color.BLACK);
      txt2.setTextColor(Color.BLACK);
      txt3.setTextColor(Color.BLACK);
      txt4.setTextColor(Color.BLACK);
      txt1.setBackgroundColor(Color.YELLOW);
      txt2.setBackgroundColor(Color.YELLOW);
      txt3.setBackgroundColor(Color.YELLOW);
      txt4.setBackgroundColor(Color.YELLOW);
   }
   
   public void initfragment(){
      info = (ViewPager)findViewById(R.id.info);
      
      List<Fragment> listfragment = new ArrayList<Fragment>();
      listfragment.add(new Fragment1());
      listfragment.add(new Fragment2());
      listfragment.add(new Fragment3());
      listfragment.add(new Fragment4());
      
      MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(), listfragment);
      info.setAdapter(adapter);
      info.setCurrentItem(0);
      
      info.setOnPageChangeListener(new OnPageChangeListener() {
         
         public void onPageSelected(int i) {
            inittextcolor();
            if(i==0){
               txt1.setTextColor(Color.RED);
               txt1.setBackgroundColor(Color.BLUE);
            }
            else if(i==1){
               txt2.setTextColor(Color.RED);
               txt2.setBackgroundColor(Color.BLUE);
            }
            else if(i==2){
               txt3.setTextColor(Color.RED);
               txt3.setBackgroundColor(Color.BLUE);
            }
            else if(i==3){
               txt4.setTextColor(Color.RED);
               txt4.setBackgroundColor(Color.BLUE);
            }
         }
         
         public void onPageScrolled(int arg0, float arg1, int arg2) {
         }
         
         public void onPageScrollStateChanged(int arg0) {
            
         }
      });
      
   }
}
分别新建对应的fragment.xml,这里就只列举一个
<RelativeLayout 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"
    tools:context=".Fragment1" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="新闻" />

</RelativeLayout>
通过继承fragment找到对应的布局
package activity.chuangdun.com.smarttablayout;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {

   public View onCreateView(LayoutInflater inflater, ViewGroup container,
         Bundle savedInstanceState) {
      
      View v = inflater.inflate(R.layout.activity_fragment1, container,false);
      
      return v;
   }


}


第三步：调用adapter适配器继承FragmentPagerAdapter 
package activity.chuangdun.com.smarttablayout;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentAdapter extends FragmentPagerAdapter {
   
   private List<Fragment> list;
   
   public MyFragmentAdapter(FragmentManager mg,List<Fragment> list) {
      super(mg);
      this.list=list;
   }

   public Fragment getItem(int i) {
      return list.get(i);
   }

   public int getCount() {
      return list.size();
   }

}
一个简单的ViewPager+Fragment滑动点击事件就实现了