1. 程式人生 > >RadioGroup與RadioButton快速實現底部導航

RadioGroup與RadioButton快速實現底部導航

閱讀與使用此文知識,僅需5-20分鐘

大多專案之初,我們都需要搭建UI介面,而底部導航的承載效果是不可或缺的。

在我認知中有三種方式:
1.Tablayout+ViewPager+Fragment
2.LinearLayout+TextView+ImageView
3.RadioGroup+RadioButton

Effect:

這裡寫圖片描述

注意點:

Xml屬性Icon位於文字上方

//請注意圖片大小,如果圖片太大,圖片本身與文字都會顯示不全

android:drawableTop="@drawable/這裡呼叫圖"

但是查詢之後可能有四種方式去實現這樣的一個效果,大家都可以輕鬆的百度到,只不過因為講解的多而有些朋友連貫不起來,所以我特此寫了一個Demo用於使用,下面進入程式碼時間(程式碼中已經註釋)。

MainActivity :

package com.example.dow.radiogroup;

import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class
MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private FrameLayout mFragment; private RadioGroup mGroup; private RadioButton mR1; private RadioButton mR2; private RadioButton mR3; private RadioButton mR4; private UsFragment rb1,rb2,rb3,rb4; @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { mFragment = (FrameLayout) findViewById(R.id.fl); mGroup = (RadioGroup) findViewById(R.id.ra_group); mR1 = (RadioButton) findViewById(R.id.ra_1); mR2 = (RadioButton) findViewById(R.id.ra_2); mR3 = (RadioButton) findViewById(R.id.ra_3); mR4 = (RadioButton) findViewById(R.id.ra_4); //設定Group監聽,也就是下方的RadioButton的狀態監聽 mGroup.setOnCheckedChangeListener(this); //初始化預設第一個RadioButton為選中狀態 mR1.setChecked(true); } //此下介紹: //rb 的變數為我們要切換的Fragment,這裡因為是共用了同一個Fragment,只用於簡單展示, // 如果在我們的專案中的話,建議建立對應的Frgament //問題點: // 有時候在走onCheckedChanged方法的hideAllFragment()方法的時候,並沒有實現隱藏之前的Fragment, // 如果出現這個問題,嘗試在else的判斷中加入 hideAllFragment(transaction);方法 @Override public void onCheckedChanged(RadioGroup group, int checkedId) { //Fragment的簡單使用,獲取管理者,開啟事務,對應使用replace或hind,show方法 FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); hideAllFragment(transaction); switch (checkedId){ case R.id.ra_1: if(rb1==null){ rb1 = new UsFragment("第一個Fragment-首頁"); transaction.add(R.id.fl,rb1); }else{ transaction.show(rb1); } break; case R.id.ra_2: if(rb2==null){ rb2= new UsFragment("第二個Fragment-經營"); transaction.add(R.id.fl,rb2); }else{ transaction.show(rb2); } break; case R.id.ra_3: if(rb3==null){ rb3 = new UsFragment("第三個Fragment-管理"); transaction.add(R.id.fl,rb3); }else{ transaction.show(rb3); } break; case R.id.ra_4: if(rb4==null){ rb4 = new UsFragment("第四個Fragment-中心"); transaction.add(R.id.fl,rb4); }else{ transaction.show(rb4); } break; } transaction.commit(); } public void hideAllFragment(FragmentTransaction transaction){ if(rb1!=null){ transaction.hide(rb1); } if(rb2!=null){ transaction.hide(rb2); } if(rb3!=null){ transaction.hide(rb transaction.hide(rb2); } if(rb3!=null){ transaction.hide(r` 3); } if(rb4!=null){ transaction.hide(rb4); } } }

UsFragment(這個是我們用於切換的Fragment,在實際專案中就是幾大模組):

package com.example.dow.radiogroup;

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


public class UsFragment extends Fragment {
    private String context;
    private TextView mTV;

    public UsFragment(String context){
        this.context = context;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.us_fragment,container,false);
        mTV = (TextView)view.findViewById(R.id.textView);
        mTV.setText(context);
        return view;
    }
}

MainActivity 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.example.dow.radiogroup.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/fl"
        />
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#2B2B2B"
        />
    <RadioGroup
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:id="@+id/ra_group"
        android:layout_height="70dp">

        <RadioButton
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:button="@null"
            android:id="@+id/ra_1"
            android:drawableTop="@drawable/checket_box"
            android:gravity="center"
            android:text="首頁"
            android:drawablePadding="3dp"
            android:textColor="@drawable/home_tab"
            android:layout_gravity="center"
            />
        <RadioButton
            android:layout_width="0dp"
            android:button="@null"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/ra_2"
            android:text="經營"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/checket_box"
            android:layout_gravity="center"
            android:textColor="@drawable/home_tab"
            />
        <RadioButton
            android:layout_width="0dp"
            android:button="@null"
            android:layout_weight="1"
            android:gravity="center"
            android:text="管理"
            android:drawablePadding="3dp"
            android:layout_height="wrap_content"
            android:id="@+id/ra_3"
            android:drawableTop="@drawable/checket_box"
            android:layout_gravity="center"
            android:textColor="@drawable/home_tab"
            />
        <RadioButton
            android:layout_width="0dp"
            android:button="@null"
            android:drawableTop="@drawable/checket_box"
            android:layout_weight="1"
            android:text="中心"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/ra_4"
            android:textColor="@drawable/home_tab"
            />
    </RadioGroup>
</LinearLayout>

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp"
        android:gravity="center"
        android:text="所需模組"/>

</LinearLayout>

這位朋友寫的也蠻好的,大家可以借鑑下:

http://blog.csdn.net/jxq1994/article/details/52573506