android Fragment與ViewPager，自畫指示器的一個應用

示例圖：

main

public class TestActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {

    RadioGroup rg;
    RadioButton rb1, rb2;
    ViewPager vp;
    View v_v;

    List<Fragment> fragments = new ArrayList<>();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        rg = (RadioGroup) findViewById(R.id.rg);
        vp = (ViewPager) findViewById(R.id.vp);
        v_v = findViewById(R.id.v_v);
        rb1 = (RadioButton) findViewById(R.id.rb1);
        rb2 = (RadioButton) findViewById(R.id.rb2);


        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        //設置ViewPager的適配器
        vp.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), fragments));

        rg.setOnCheckedChangeListener(this);
        vp.addOnPageChangeListener(this);
        rg.check(R.id.rb1);
        rb1.setTextColor(getResources().getColor(R.color.colorAccent));
        indicator();

    }


    //將他做成 1半
    int width;

    public void indicator() {
        width = getResources().getDisplayMetrics().widthPixels / 2;
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(width, ViewGroup.LayoutParams.MATCH_PARENT);
        v_v.setLayoutParams(params);
    }


//RadioGroup 的點擊事件
    @Override
    public void onCheckedChanged(RadioGroup radioGroup, @IdRes int i) {
        vp.setCurrentItem(i == R.id.rb1 ? 0 : 1);
        if (i == R.id.rb1) {
            rb1.setTextColor(getResources().getColor(R.color.colorAccent));
            rb2.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
        } else {
            rb1.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
            rb2.setTextColor(getResources().getColor(R.color.colorAccent));
        }
    }

//下面是ViewPager的滑動事件 設置下面的指示器，以及fragment的選擇
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) v_v.getLayoutParams();
        int left = (int) ((position + positionOffset) * width);
        params.setMargins(left, 0, 0, 0);
        v_v.setLayoutParams(params);
    }

    @Override
    public void onPageSelected(int position) {
        rg.check(position == 0 ? R.id.rb1 : R.id.rb2);
        if (position == 0) {
            rb1.setTextColor(getResources().getColor(R.color.colorAccent));
            rb2.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
        } else {
            rb2.setTextColor(getResources().getColor(R.color.colorAccent));
            rb1.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //ViewPager的適配器
    class MyFragmentAdapter extends FragmentPagerAdapter

    {


        private final List<Fragment> mList;

        public MyFragmentAdapter(FragmentManager fm, List<Fragment> mList) {
            super(fm);
            this.mList = mList;
        }

        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }

        @Override
        public int getCount() {
            return mList.size();
        }
    }


}

兩個fragment

public class OneFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView tv = new TextView(getActivity());
        tv.setText("這是第一個界面");
        tv.setTextSize(50);
        return tv;

    }
}



public class TwoFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView tv = new TextView(getActivity());
        tv.setText("這是空白界面");
        tv.setTextSize(50);
        return tv;

    }
}

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:orientation="vertical">

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="第一個" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="第二個" />
    </RadioGroup>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="3dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_gravity="center"
            android:background="@android:color/darker_gray" />

        <View
            android:id="@+id/v_v"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_light" />
    </FrameLayout>

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

</LinearLayout>