天天看點

【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;
        }
    };
}           

複制

釋出者:全棧程式員棧長,轉載請注明出處:https://javaforall.cn/108869.html原文連結:https://javaforall.cn