Page frame 1: Fragment + RadioGroup

With the increase of contact projects, start to summarize some knowledge points, so as to use and find more convenient in the future.

Every project needs to build a page framework. So far, I have contacted three main categories:
Fragment+RadioGroup , 
Fragment+LinearLayout, 
Fragment + ViewPager.

Let's talk about the first one: Fragment+RadioGroup.  
This one is the most used and convenient. The method steps used are also quite easy.

Don't say much, start fighting!  
1. Layout activity corresponding to mainactivity main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.junmei.mobileplayer.activity.MainActivity">

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

    <View
        android:background="@color/home_back_selected"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <!--RadioGroup-->
    <RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        >

        <RadioButton
            android:id="@+id/rb_main_home"
            android:button="@null"
            android:drawableTop="@drawable/bg_main_home_selector"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="home page"
            android:gravity="center_horizontal"
            android:textColor="@color/color_main_text_selector"
            android:layout_height="match_parent" />

        <RadioButton
            android:id="@+id/rb_main_invest"
            android:button="@null"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/bg_main_invest_selector"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="Investment"
            android:textColor="@color/color_main_text_selector"
            android:layout_height="match_parent" />

        <RadioButton
            android:id="@+id/rb_main_me"
            android:button="@null"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/bg_main_me_selector"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="My assets"
            android:textColor="@color/color_main_text_selector"
            android:layout_height="match_parent" />

        <RadioButton
            android:id="@+id/rb_main_more"
            android:button="@null"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/bg_main_more_selector"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:text="More"
            android:textColor="@color/color_main_text_selector"
            android:layout_height="match_parent" />

    </RadioGroup>
       </LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76

2. Picture selector of RadioButton (placed in drawable directory):
bg_main_home_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/me_pressed" android:state_checked="true"></item>
    <item android:drawable="@drawable/me" android:state_checked="false"></item>
</selector>
  • 1
  • 2
  • 3
  • 4
  • 5

bg_main_invest_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/invest_pressed" android:state_checked="true"></item>
    <item android:drawable="@drawable/invest" android:state_checked="false"></item>
</selector>
  • 1
  • 2
  • 3
  • 4
  • 5

bg_main_me_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/me_pressed" android:state_checked="true"></item>
    <item android:drawable="@drawable/me" android:state_checked="false"></item>
</selector>
  • 1
  • 2
  • 3
  • 4
  • 5

bg_main_more_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/more" android:state_checked="true"></item>
    <item android:drawable="@drawable/more2" android:state_checked="false"></item>
</selector>
  • 1
  • 2
  • 3
  • 4
  • 5

3. The selector corresponding to the font color in RadioButton (under the color directory)
color_main_text_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="#878787"/>
    <item android:state_checked="true" android:color="#18B4ED"/>
</selector>
  • 1
  • 2
  • 3
  • 4
  • 5

4. Start to write 4 fragments (), which is too easy, just take one as an example

Note: butterknife is used to instantiate control objects

compile 'com.jakewharton:butterknife:7.0.1'

The code of HomeFragment.java is as follows:

package com.example.chenjunmei.myp2pinvest1.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.chenjunmei.myp2pinvest1.R;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * Created by JunMei on 2016/11/11.
 */
public class HomeFragment extends Fragment {
    @Bind(R.id.iv_titletop_left)
    ImageView ivTitletopLeft;
    @Bind(R.id.tv_titletop_title)
    TextView tvTitletopTitle;
    @Bind(R.id.iv_titletop_setting)
    ImageView ivTitletopSetting;

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

        View view = View.inflate(getActivity(), R.layout.fragment_home, null);
        ButterKnife.bind(this, view);

        initTitle();

        return view;
    }

    private void initTitle() {
        ivTitletopLeft.setVisibility(View.INVISIBLE);
        ivTitletopSetting.setVisibility(View.INVISIBLE);
        tvTitletopTitle.setText("home page");
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

Layout fragment corresponding to HomeFragment ﹣ home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        layout="@layout/titletop"></include>

    <TextView
        android:text="home page"
        android:textSize="50sp"
        android:layout_gravity="center"
        android:layout_marginTop="300dp"
        android:textColor="@android:color/holo_blue_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

Investment fragment, MeFragment and MoreFragment are basically the same as HomeFragment, so they will not be repeated~

5. Press the shaft, the main one is MainActivity.java:

package com.example.chenjunmei.myp2pinvest222;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.widget.RadioGroup;

import com.example.chenjunmei.myp2pinvest222.fragmeng.HomeFragment;
import com.example.chenjunmei.myp2pinvest222.fragmeng.InvestFragment;
import com.example.chenjunmei.myp2pinvest222.fragmeng.MeFragment;
import com.example.chenjunmei.myp2pinvest222.fragmeng.MoreFragment;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * By Junmei
 * Date:2016-11-12
 * Page frame: Fragment + RadioGroup
 */

public class MainActivity extends FragmentActivity {
    @Bind(R.id.rg_main)
    RadioGroup rgMain;
    private HomeFragment homeFragment;
    private InvestFragment investFragment;
    private MeFragment meFragment;
    private MoreFragment moreFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

//General logic of writing code: initialize View > initialize data > initialize listening, so it is not easy to make mistakes

//      initView();

        initData();

        initLintener();
    }

    //Initialize Fragment data first
    private void initData() {
        homeFragment = new HomeFragment();
        investFragment = new InvestFragment();
        meFragment = new MeFragment();
        moreFragment = new MoreFragment();
    }

     // Toggle Fragment method
    private void switchFragment(Fragment fragment) {
        FragmentManager manager = getSupportFragmentManager();

        manager.beginTransaction().replace(R.id.fl_main_container, fragment).commit();
    }



    //Then set the radio group's click event monitoring
    private void initLintener() {
        rgMain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                Fragment fragment = null;

                switch (i) {
                    case R.id.rb_main_home:
                        fragment = homeFragment;
                        break;

                    case R.id.rb_main_invest:
                        fragment = investFragment;
                        break;

                    case R.id.rb_main_me:
                        fragment = meFragment;
                        break;

                    case R.id.rb_main_more:
                        fragment = moreFragment;
                        break;
                }

                // Toggle Fragment method
                switchFragment(fragment);
            }
        });

        // Default select session page
        rgMain.check(R.id.rb_main_home);


 } 
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99

Such a simple page frame is set up! Is it so easy~


  • 1
  • 2
Copyright notice: This is the original article of the blogger. It can't be reproduced without the permission of the blogger. https://blog.csdn.net/cjm2484836553/article/details/53136098

Tags: Android Fragment xml ButterKnife

Posted on Thu, 26 Mar 2020 09:10:49 -0700 by cyberRobot