ViewPager+Fragment

ViewPager+Fragment （带滑块）

public class ExampleActivity extends FragmentActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {
    /**
     * viewpager
     */
    private ViewPager mPageVp;
    /**
     * Tab显示内容TextView
     */
    private TextView firstTv, secondTv, thirdTv, fourthTv;
    /**
     * Tab的那个引导线
     */
    private ImageView mTabLineIv;
    /**
     * ViewPager的当前选中页
     */
    private int currentIndex;
    /**
     * Fragment
     */
    private SearchExhibitionFragment firstFragment;
    private SearchCampaignFragment secondFragment;
    private SearchArtWorkFragment thirdFragment;
    private SearchArtistFragment searchArtistFragment;
    private List<Fragment> mFragmentList = new ArrayList<Fragment>();
    private CommonFragmentAdapter mFragmentAdapter;

    private int screenWidth;//屏幕的宽度

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ButterKnife.bind(this);
        initView();
        initListener();
        initFragment();
    }

    protected void initFragment() {
        firstFragment = new SearchExhibitionFragment();
        secondFragment = new SearchCampaignFragment();
        thirdFragment = new SearchArtWorkFragment();
        searchArtistFragment = new SearchArtistFragment();
        mFragmentList.add(firstFragment);
        mFragmentList.add(secondFragment);
        mFragmentList.add(thirdFragment);
        mFragmentList.add(searchArtistFragment);

        mFragmentAdapter = new CommonFragmentAdapter(getSupportFragmentManager(), mFragmentList);
        mPageVp.setAdapter(mFragmentAdapter);
        mPageVp.setCurrentItem(0);
    }

    protected void initListener() {
        mPageVp.setOnPageChangeListener(this);
        firstTv.setOnClickListener(this);
        secondTv.setOnClickListener(this);
        thirdTv.setOnClickListener(this);
        fourthTv.setOnClickListener(this);
    }

    protected void initView() {
        setContentView(R.layout.activity_example);
        firstTv = (TextView) findViewById(R.id.common_first_tv);
        secondTv = (TextView) findViewById(R.id.common_second_tv);
        thirdTv = (TextView) findViewById(R.id.common_third_tv);
        fourthTv = (TextView) findViewById(R.id.common_fourth_tv);
        mTabLineIv = (ImageView) findViewById(R.id.common_tab_line_iv);
        mPageVp = (ViewPager) findViewById(R.id.page_vp);
        setTitleText();
        initTabLineWidth();
    }

    private void setTitleText() {
        firstTv.setText(R.string.home_exhibition);
        secondTv.setText(R.string.home_campaign);
        thirdTv.setText(R.string.home_art);
        fourthTv.setText(R.string.home_artist);
    }


    /**
     * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
     */
    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比
     * offsetPixels:当前页面偏移的像素位置
     */
    @Override
    public void onPageScrolled(int position, float offset,
                               int offsetPixels) {
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
                .getLayoutParams();

        LogUtil.e("offset:", offset + "");
        if (currentIndex == 0 && position == 0)// 0->1
        {
            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
                    * (screenWidth / 4));

        } else if (currentIndex == 1 && position == 0) // 1->0
        {
            lp.leftMargin = (int) (-(1 - offset)
                    * (screenWidth * 1.0 / 4) + currentIndex
                    * (screenWidth / 4));

        } else if (currentIndex == 1 && position == 1) // 1->2
        {
            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 4) + currentIndex
                    * (screenWidth / 4));
        } else if (currentIndex == 2 && position == 1) // 2->1
        {
            lp.leftMargin = (int) (-(1 - offset)
                    * (screenWidth * 1.0 / 4) + currentIndex
                    * (screenWidth / 4));
        } else if (currentIndex == 2 && position == 2) { //2--3
            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
                    * (screenWidth / 4));
        } else if (currentIndex == 3 && position == 2) { //3--2
            lp.leftMargin = (int) (-(1 - offset)
                    * (screenWidth * 1.0 / 4) + currentIndex
                    * (screenWidth / 4));
        }
        mTabLineIv.setLayoutParams(lp);
    }

    @Override
    public void onPageSelected(int position) {
        resetTextView();
        switch (position) {
            case 0:
                firstTv.setTextColor(getResources().getColor(R.color._212120));
                break;
            case 1:
                secondTv.setTextColor(getResources().getColor(R.color._212120));
            case 2:
                thirdTv.setTextColor(getResources().getColor(R.color._212120));
                break;
            case 3:
                fourthTv.setTextColor(getResources().getColor(R.color._212120));
                break;
        }
        currentIndex = position;
    }


    /**
     * 设置滑动条的宽度为屏幕的1/4(根据Tab的个数而定)
     */
    private void initTabLineWidth() {
        DisplayMetrics dpMetrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay()
                .getMetrics(dpMetrics);
        screenWidth = dpMetrics.widthPixels;
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
                .getLayoutParams();
        lp.width = screenWidth / 4;
        mTabLineIv.setLayoutParams(lp);
    }

    /**
     * 重置颜色
     */
    private void resetTextView() {
        firstTv.setTextColor(getResources().getColor(R.color._66));
        secondTv.setTextColor(getResources().getColor(R.color._66));
        thirdTv.setTextColor(getResources().getColor(R.color._66));
        fourthTv.setTextColor(getResources().getColor(R.color._66));
    }

    /**
     * Tab点击事件
     *
     * @param view
     */
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.common_first_tv:
                mPageVp.setCurrentItem(0);
                break;
            case R.id.common_second_tv:
                mPageVp.setCurrentItem(1);
                break;
            case R.id.common_third_tv:
                mPageVp.setCurrentItem(2);
                break;
            case R.id.common_fourth_tv:
                mPageVp.setCurrentItem(3);
                break;
        }
    }
}

Fragment只列一个出来

public class SearchArtistFragment extends Fragment  {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search_artist, container, false);

        return view;
    }
}

activity 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background">

    <LinearLayout
        android:id="@+id/id_switch_tab_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:baselineAligned="false">

        <LinearLayout
            android:id="@+id/first_llyt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/common_first_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="1111"
                android:textColor="@color/_212120"
                android:textSize="15dip" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/second_llyt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip"
            android:saveEnabled="false" >

            <TextView
                android:id="@+id/common_second_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="@color/_66"
                android:text="2222"
                android:textSize="15dip" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/third_llyt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:focusable="false"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/common_third_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="33333"
                android:textColor="@color/_66"
                android:textSize="15dip" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/fourth_llyt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:focusable="false"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dip" >

            <TextView
                android:id="@+id/common_fourth_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="@color/_66"
                android:text="44444"
                android:textSize="15dip" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/common_tab_line_iv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/example_tab"
        android:contentDescription="tab">
    </ImageView>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#000000" />

    <android.support.v4.view.ViewPager
        android:id="@+id/page_vp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </android.support.v4.view.ViewPager>
</LinearLayout>