1. 程式人生 > >android Fragment與ViewPager,自畫指示器的一個應用

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>