【1-100】RadioGroup實現應用主界面

首先，咱們先來建立主界面的佈局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/group_tab"/>
    <RadioGroup
        android:id="@+id/group_tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#FBFBFB"
        android:orientation="horizontal">
        
        <RadioButton
            android:id="@+id/rb_watch"
            style="@style/main_tab_style"
            android:drawableTop="@drawable/select_tab_watch"
            android:text="高速全覽"/>
            
            .......省略
            
        <RadioButton
            android:id="@+id/rb_event"
            style="@style/main_tab_style"
            android:checked="true"
            android:drawableTop="@drawable/select_tab_event"
            android:text="事件管理"/>
    </RadioGroup>
</RelativeLayout>

能夠看到，咱們將最後一個先設置爲選中狀態，在Activity中再進行狀態的切換

四個RadioButton的屬性大多都是同樣的，因此抽取到styles

<style name="main_tab_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@drawable/select_tab_text_color</item>
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:drawablePadding">3dp</item>
        <item name="android:gravity">center</item>
    </style>

還有drawableTop和text相應的Seletor
select_tab_bus.xml
這裏只列出了一個，其餘三個只是圖片不一樣就不列出來了

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_bus_pre" android:state_pressed="false" android:state_selected="true" />
    <item android:drawable="@drawable/tab_bus_pre" android:state_checked="true" android:state_pressed="false" />
    <item android:drawable="@drawable/tab_bus_nomal" />
</selector>

select_tab_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#2e9ed0"/>
    <!-- not selected -->
    <item android:state_checked="false" android:color="#B2B2B2"/>
</selector>

到這裏咱們的佈局就準備好了，接下來開始編寫Fragment與Activity的代碼。

fragment代碼很簡單，以下，

public class MainExpresswayWatchFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
         Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_common, container, false);
        TextView tvContent = (TextView) view.findViewById(R.id.tv_content);
        tvContent.setText("高速全覽");
        return view;
    }

    @Override
    public void setMenuVisibility(boolean menuVisible) {
        super.setMenuVisibility(menuVisible);
        // 每一個Fragment都須要實現`setMenuVisibility`來控制視圖，
        // 當Fragment不可見的時候，須要隱藏相應的視圖，否則會使界面重疊在一塊兒。
        if (this.getView() != null) {
            this.getView().setVisibility(menuVisible ? View.VISIBLE : View.GONE);
        }
    }
}

接下來是Activity的代碼，關鍵代碼都有註釋，我就很少說了...

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
    private RadioGroup radioGroup;
    private FrameLayout fragmentContainer;

    // 是否第一次進入主界面
    private boolean isFirstEnter = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_group_main);
        radioGroup = (RadioGroup) findViewById(R.id.group_tab);
        fragmentContainer = (FrameLayout) findViewById(R.id.fragment_container);

        radioGroup.setOnCheckedChangeListener(this);
    }

    @Override
    protected void onStart() {
        super.onStart();
        if (isFirstEnter) {
            isFirstEnter = false;
            // 準備顯示界面的時候切換第一個RadioButton爲選中狀態
            radioGroup.check(R.id.rb_watch);
        }
    }

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        int index = 0;
        switch (i) {
            case R.id.rb_watch:
                index = 0;
                break;
            case R.id.rb_bus_danger:
                index = 1;
                break;
            case R.id.rb_car:
                index = 2;
                break;
            case R.id.rb_event:
                index = 3;
                break;
        }
        // 從FragmentManager中查找Fragment，找不到就使用getItem獲取
        Fragment fragment = (Fragment) fragments.instantiateItem(fragmentContainer, index);
        // 設置顯示第一個Fragment
        fragments.setPrimaryItem(fragmentContainer, 0, fragment);
        // 提交事務
        fragments.finishUpdate(fragmentContainer);
    }

    // 使用FragmentStatePagerAdapter管理Fragment
    FragmentStatePagerAdapter fragments = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            Fragment fragment = null;
            switch (position) {
                case 0:
                    fragment = new MainExpresswayWatchFragment();
                    break;
                case 1:
                    fragment = new MainBusDangerFragment();
                    break;
                case 2:
                    fragment = new MainCarManageFragment();
                    break;
                case 3:
                    fragment = new MainEventDangerFragment();
                    break;
            }
            return fragment;
        }

        @Override
        public int getCount() {
            return 4;
        }
    };
}