Using Fragment and RadioGroup for page layout switching in Android

Now the main page interface design of APP uses several buttons and different fragments to switch pages. It looks very clear to users at a glance. Here we use fragments and RadioGroup to switch pages. The interface design is as follows:

The code is as follows:

titlebar.xml(Titlebar Title bar)

<?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="50dp"
    android:background="@android:color/holo_blue_light"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</LinearLayout>

styles.xml

<resources>
    ...
    <style name="bottom_tag_style" >
        <!-- Customize your theme here. -->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@android:color/transparent</item>
        <item name="android:drawablePadding">3dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/bottom_textcolor_drawable_selector</item>
        <item name="android:textSize">10sp</item>
    </style>
</resources>

bottom_textcolor_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="#363636"/>
    <item android:state_checked="true" android:color="#3097FD"/>
</selector>

activity_main.xml
The layout of the main page, which is a linear layout, has a header bar, a FrameLayout in the middle and a weight of 1 to display the content, and a RadioGroup at the bottom

<?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">

    <!--title bar-->
    <include layout="@layout/titlebar" />

    <!--FrameLayout-->
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <!--Bottom RadioGroup-->
    <RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#11000000"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dp">
        <RadioButton
            android:id="@+id/rb_common_frame"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_common_frame_drawable_selector"
            android:text="frame" />
        <RadioButton
            android:id="@+id/rb_thirdparty"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_thirdparty_drawable_selector"
            android:text="Third party"/>
        <RadioButton
            android:id="@+id/rb_custom"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_custom_drawable_selector"
            android:text="Custom Control" />
        <RadioButton
            android:id="@+id/rb_other"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_other_drawable_selector"
            android:text="Other" />
    </RadioGroup>
</LinearLayout>

rb_common_frame_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/ic_tab_video"/>
<item android:state_checked="true" android:drawable="@drawable/ic_tab_video_press"/>
</selector>

rb_thirdparty_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/ic_tab_audio"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_audio_press"/>
</selector>

rb_custom_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/ic_tab_netvideo"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_netvideo_press"/>
</selector>

rb_other_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/ic_tab_netaudio"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_netaudio_press"/>
</selector>

Create BaseFragment.java

/**
 * Role: base class, common class
 * CommonFrameFragment,ThirdPartyFragment,CustomFragment,OtherFragment Wait to inherit this class
 */
public abstract class BaseFragment extends Fragment {
    /**
     * context
     */
    protected Context mContext;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return initView();
    }

    /**
     * Force subclass overrides to implement subclass-specific ui
     * @return
     */
    protected abstract View initView();

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        initData();
    }

    /**
     * This method can be overridden when a child needs to initialize data, or when a network requests to bind data, displays data, etc.
     */
    protected void initData() {

    }
}

Define 4 subpages

1,CommonFrameFragment.java

public class CommonFrameFragment extends BaseFragment {
    private TextView textView;

    private static final String TAG = CommonFrameFragment.class.getSimpleName();//"CommonFrameFragment"

    @Override
    protected View initView() {
        Log.e(TAG,"frame Fragment Page is initialized...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "frame Fragment Data is initialized...");
        textView.setText("frame");
    }
}

2,ThirdPartyFragment.java

/**
 * Role: Third-party Fragment
 */
public class ThirdPartyFragment extends BaseFragment {
    private static final String TAG = ThirdPartyFragment.class.getSimpleName();//"CommonFrameFragment"
    private TextView textView;

    @Override
    protected View initView() {
        Log.e(TAG,"Third party Fragment Page is initialized...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "Third party Fragment Data is initialized...");
        textView.setText("Third-party pages");
    }
}

3,CustomFragment.java

/**
 * Role: Customize Fragment
 */
public class CustomFragment extends BaseFragment {
    private static final String TAG = CustomFragment.class.getSimpleName();//"CommonFrameFragment"
    private TextView textView;

    @Override
    protected View initView() {
        Log.e(TAG,"custom Fragment Page is initialized...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "custom Fragment Data is initialized...");
        textView.setText("Custom Page");
    }
}

4,OtherFragment.java

/**
 * Role: Other Fragment s
 */
public class OtherFragment extends BaseFragment {
    private static final String TAG = OtherFragment.class.getSimpleName();//"CommonFrameFragment"
    private TextView textView;

    @Override
    protected View initView() {
        Log.e(TAG,"Other Fragment Page is initialized...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "Other Fragment Data is initialized...");
        textView.setText("Other Pages");
    }
}

MainActivity.java (Home Page)

/**
 * Role: Home page
 */
public class MainActivity  extends FragmentActivity{
    private RadioGroup mRg_main;
    private List<BaseFragment> mBaseFragment;

    /**
     * Corresponding locations of selected fragments
     */
    private int position;

    /**
     * Fragment last switched
     */
    private Fragment mContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Initialize View
        initView();
        //Initialize Fragment
        initFragment();
        //Set up monitoring for RadioGroup
        setListener();
    }

    private void setListener() {
        mRg_main.setOnCheckedChangeListener(new MyOnCheckedChangeListener());
        //Set Default Selected Common Framework
        mRg_main.check(R.id.rb_common_frame);
    }

    class MyOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener{

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.rb_common_frame://frame
                    position = 0;
                    break;
                case R.id.rb_thirdparty://Third party
                    position = 1;
                    break;
                case R.id.rb_custom://custom
                    position = 2;
                    break;
                case R.id.rb_other://Other
                    position = 3;
                    break;
                default:
                    position = 0;
                    break;
            }

            //Get the corresponding Fragment from its location
            BaseFragment to = getFragment();
            //replace
            switchFrament(mContent,to);
        }
    }

    /**
     *
     * @param from The Fragment just shown is about to be hidden
     * @param to Fragment to switch to now, to show later
     */
    private void switchFrament(Fragment from,Fragment to) {
        if(from != to){
            mContent = to;
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            //Switch only
            //Determine if it was added
            if(!to.isAdded()){
                //to was not added
                //from Hide
                if(from != null){
                    ft.hide(from);
                }
                //Add to
                if(to != null){
                    ft.add(R.id.fl_content,to).commit();
                }
            }else{
                //to has been added
                // from Hide
                if(from != null){
                    ft.hide(from);
                }
                //Show to
                if(to != null){
                    ft.show(to).commit();
                }
            }
        }
    }

    /**
     * Get the corresponding Fragment from its location
     * @return
     */
    private BaseFragment getFragment() {
        BaseFragment fragment = mBaseFragment.get(position);
        return fragment;
    }

    private void initFragment() {
        mBaseFragment = new ArrayList<>();
        mBaseFragment.add(new CommonFrameFragment());//Frame Fragment
        mBaseFragment.add(new ThirdPartyFragment());//Third-party Fragment
        mBaseFragment.add(new CustomFragment());//Custom Control Fragment
        mBaseFragment.add(new OtherFragment());//Other Fragment s
    }

    private void initView() {
        setContentView(R.layout.activity_main);
        mRg_main = (RadioGroup) findViewById(R.id.rg_main);
    }
}

End!!

Tags: Android Fragment xml encoding

Posted on Fri, 14 Feb 2020 08:30:17 -0800 by palpie