Preface

The last "homework" for you to log in and register believe that the small partners according to our demo have been completed, then this article we continue to talk about some of the main functions encountered in the actual combat, not to mention more, let's enter today's body link!!!

scene

java.lang.Object
 ↳android.view.View        
  ↳android.widget.TextView
   ↳android.widget.Button     
    ↳android.widget.CompoundButton                    
     ↳android.widget.RadioButton

Thus, RadioButton has Button attributes, but it has more effects and logic to select.

Simple demonstration

Let me just show you code! Let's see an effect that shows the logic of the menu interface for men and women.

<RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
   <RadioButton
        android:id="@+id/btnMan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="male"
        android:checked="true"/>
    <RadioButton
        android:id="@+id/btnWoman"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="female"/>
</RadioGroup>

The effect is shown as follows:

However, when developing according to real needs, it is necessary to set up selector in RadioButton's background to achieve the effect. If we use the combination of RadioGroup and RadioButton, how can we achieve the layout effect of the four tab columns under Wechat? (When tab is switched, icon and text colors become corresponding checked/unchecked)

Implementing Tab Effect at the Bottom of Wechat

The default AdinoButton style needs to be removed first

RadioButton defaults to having a dot in front, removing the dot in front.

android:button="@null" 

Keep RadioButton's text level in the middle

android:gravity="center_horizontal"

Set Selected and Unselected Style Selectors for RadioButton

Create four tab icon selectors under the drawable folder, where tab_home_selector.xml is pasted with the home icon.

<?xml version="1.0" encoding="utf-8"?>
<! - Here just paste out the style of the small icon on the home page, prepare two resource pictures, and select one of the selected and unselected styles-->.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_home_checked" android:state_checked="true" />
    <item android:drawable="@mipmap/tab_home_unchecked" />
</selector>

Create a new TextColor color selector tab_text_selector.xml under the drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#07c563" android:state_checked="true" />
    <item android:color="#41413b" />
</selector>

Set DraableTop to RadioButton as the selector style. After setting up four tab s, the code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RadioActivity">
<!--Every one here RadioButton It has many identical attributes and can be used in values/styles Define a file tab Styles, which extract common attributes, should also extract string constants to strings Document, easy to maintain and code management. In order to demonstrate the attributes, no extraction is done here.--> 
    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">

        <RadioButton
            android:id="@+id/rbHome"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:textColor="@drawable/tab_text_selector"
            android:drawableTop="@drawable/tab_home_selector"
            android:gravity="center_horizontal"
            android:text="home page" />

        <RadioButton
            android:id="@+id/rbDiscovery"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:textColor="@drawable/tab_text_selector"
            android:drawableTop="@drawable/tab_discovery_selector"
            android:gravity="center_horizontal"
            android:text="find" />

        <RadioButton
            android:id="@+id/rbContacts"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:textColor="@drawable/tab_text_selector"
            android:drawableTop="@drawable/tab_contacts_selector"
            android:gravity="center_horizontal"
            android:text="Mail list" />

        <RadioButton
            android:id="@+id/rbMe"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:textColor="@drawable/tab_text_selector"
            android:drawableTop="@drawable/tab_me_selector"
            android:gravity="center_horizontal"
            android:text="I" />
    </RadioGroup>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignTop="@+id/radioGroup"
        android:background="@color/colorPrimaryDark" />
    
</RelativeLayout>

The effect is as follows: Has the navigation bar at the bottom of Wechat been developed? Do not panic, only these settings, run to the real machine will find that icon size and distance can not change, I will teach you how to control RadioButto with java code to get Drawable style.

Modify the key code for spacing and size:

/**
 * Demonstrate the use of RadioButton, etc.
 *
 * @author xmkh
 * @date 2019 August 21, 2000 15:27:59
 */
public class RadioActivity extends AppCompatActivity {

    private RadioButton mRbHome;
    private RadioButton mRbDiscovery;
    private RadioButton mRbContacts;
    private RadioButton mRbMe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio);
        RadioGroup rg = findViewById(R.id.radioGroup);
        mRbHome = findViewById(R.id.rbHome);
        mRbContacts = findViewById(R.id.rbContacts);
        mRbDiscovery = findViewById(R.id.rbDiscovery);
        mRbMe = findViewById(R.id.rbMe);
        initView();
        //Setting up RadioGroup Button Group Listening
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
                switch (checkedId) {
                    case R.id.rbHome:
                        //TODO Sets Other Business Processing
                        break;
                    case R.id.rbContacts:
                        //TODO Sets Other Business Processing
                        break;
                    case R.id.rbDiscovery:
                        //TODO Sets Other Business Processing
                        break;
                    case R.id.rbMe:
                        //TODO Sets Other Business Processing
                        break;
                    default:
                        break;
                }
            }
        });
    }


    /**
     * Dynamically set the image width and text spacing for each tab
     *
     * @param selector RadioButton Style selector
     * @param rb       RadioButton Style selector
     */
    private void setStyle(int selector, RadioButton rb) {
        //Define the size and location of the bottom label image
        Drawable drawableHome = getResources().getDrawable(selector);
        //When the picture is drawn, bind it to a rectangle ltrb to specify the rectangle. This is where the size of the picture is set.
        drawableHome.setBounds(0, 0, 80, 80);
        //Set the direction of the picture in the text
        rb.setCompoundDrawables(null, drawableHome, null, null);
    }

      /**
     * Dynamically set the style of four tab s
     */
    private void initView() {
        setStyle(R.drawable.tab_home_selector, mRbHome);
        setStyle(R.drawable.tab_contacts_selector, mRbContacts);
        setStyle(R.drawable.tab_discovery_selector, mRbDiscovery);
        setStyle(R.drawable.tab_me_selector, mRbMe);
    }

}

So far, the basic effect has been achieved. Well, that's the end of this sharing between RadioButton and RadioGroup.

epilogue

What about? Are you eager to realize part of the logic in your main interface? Some smart buddies will surely find that some of the functions of the personal center can also be accomplished in conjunction with the series of articles we talked about earlier. (Forgotten buddies will remind you here: setting gender, changing nicknames, changing avatars, etc.)!! You are also welcome to join our Wechat Technology Exchange Group. If you reply to Wechat Group in Public Number, you can join it. You can also reply to video in Public Number. There are some beginner videos in it.~

PS: If there are any unknown partners, please join our QQ technology exchange group: 892271582. There are all kinds of gods answering the questions that the small partners encounter. Our Wechat group will also meet you soon. I hope you will join us enthusiastically at that time.~~