仿網易新聞主界面（一）——RadioGroup+Fragment

1.底部導航欄 RadioGroup + RadioButton

1.1首先設置選擇器

drawable文件下 RadioButton選中後切換圖片

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

color文件下 RadioButton選中後字體顏色變化

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

1.2設置RadioButton的通用屬性

    <style name="RadioButtonStyle">
        <item name="android:gravity">center</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:textColor">@color/bottom_menu_color</item>
    </style>

1.3 佈局代碼

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

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <RadioGroup
        android:gravity="center"
        android:id="@+id/rg_bottom_menu"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#ffffff"
        android:orientation="horizontal">
        <RadioButton
            android:checked="true"
            android:text="主頁"
            android:id="@+id/rb_home"
            style="@style/RadioButtonStyle"
            android:drawableTop="@drawable/bottom_home_selector"
         />
        <RadioButton
            android:text="新聞"
            android:id="@+id/rb_news"
            style="@style/RadioButtonStyle"
            android:drawableTop="@drawable/bottom_news_selector"
         />
        <RadioButton
            android:text="圖片"
            android:id="@+id/rb_picture"
            style="@style/RadioButtonStyle"
            android:drawableTop="@drawable/bottom_picture_selector"
         />
        <RadioButton
            android:text="視頻"
            android:id="@+id/rb_movie"
            style="@style/RadioButtonStyle"
            android:drawableTop="@drawable/bottom_video_selector"
         />
        <RadioButton
            android:text="個人"
            android:id="@+id/rb_person"
            style="@style/RadioButtonStyle"
            android:drawableTop="@drawable/bottom_person_selector"
         />

    </RadioGroup>

</RelativeLayout>

此時的效果

2.主要頁面Fragment

BaseFragment統一管理Fragment

public abstract class BaseFragment extends Fragment {
    protected View mRootView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        mRootView = inflater.inflate(attachLayoutRes(), container, false);
        initViews();
        return mRootView;
    }
    /**
     * 找到控件ID
     */
    protected <T extends View> T findViewById(int id) {
        if (mRootView == null) {
            return null;
        }

        return (T) mRootView.findViewById(id);
    }

    /**
     * 綁定佈局文件
     *
     * @return 佈局文件ID
     */
    protected abstract int attachLayoutRes();

    /**
     * 初始化視圖控件
     */
    protected abstract void initViews();
}

新聞界面Fragment

佈局

<?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">
    <TextView
        android:textSize="20sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="新聞"/>
</LinearLayout>

新聞頁面Fragment 繼承BaseFragment其他部分如 主頁，圖片等都類似

public class MainNewsFragment extends BaseFragment {

    @Override
    protected int attachLayoutRes() {
        return R.layout.news_main_view;
    }

    @Override
    protected void initViews() {
    }
}

3.完成功能

在Activity中，對RadioGroup選中變化進行事件監聽，根據RadioButton狀態改變Fragment的顯示頁面

BaseActivity統一管理Activity

public abstract class BaseActivity extends AppCompatActivity {
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //返回佈局文件ID
        setContentView(attachLayoutRes());
        //找到控件ID
        initFindViewById();
        //初始化控件
        initViews();
    }

    /**
     * 綁定佈局文件
     *
     * @return 佈局文件的ID
     */
    @LayoutRes
    protected abstract int attachLayoutRes();

    /**
     * 初始化視圖控件
     */
    protected abstract void initViews();

    /**
     * 找到控件ID
     */
    protected abstract void initFindViewById();
}

MainActivity繼承於BaseActivity

public class MainActivity extends BaseActivity {

    RadioGroup mRgBottomMenu;
    //數組 存儲Fragment
    Fragment[] mFragments;
    //當前Fragent的下標
    private int currentIndex;
    @Override
    protected int attachLayoutRes() {
        return R.layout.activity_main;
    }
    @Override
    protected void initFindViewById() {
        mRgBottomMenu = (RadioGroup) findViewById(R.id.rg_bottom_menu);
    }
    @Override
    protected void initViews() {
        //將Fragment加入數組
        mFragments = new Fragment[] {
                //主頁、新聞、圖片、視頻、個人
                new MainHomeFragment(),
                new MainNewsFragment(),
                new MainPictureFragment(),
                new MainVideoFragment(),
                new MainPersonFragment()
        };
        //開啓事務
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        //設置爲默認界面 MainHomeFragment
        ft.add(R.id.main_content,mFragments[0]).commit();
        //RadioGroup選中事件監聽 改變fragment
        mRgBottomMenu.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
                switch (checkedId) {
                    case R.id.rb_home:
                        setIndexSelected(0);
                        break;
                    case R.id.rb_news:
                        setIndexSelected(1);
                        break;
                    case R.id.rb_picture:
                        setIndexSelected(2);
                        break;
                    case R.id.rb_movie:
                        setIndexSelected(3);
                        break;
                    case R.id.rb_person:
                        setIndexSelected(4);
                        break;
                }
            }
        });
    }
    //設置Fragment頁面
    private void setIndexSelected(int index) {
        if (currentIndex == index) {
            return;
        }
        //開啓事務
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        //隱藏當前Fragment
        ft.hide(mFragments[currentIndex]);
        //判斷Fragment是否已經添加
        if (!mFragments[index].isAdded()) {
            ft.add(R.id.main_content,mFragments[index]).show(mFragments[index]);
        }else {
            //顯示新的Fragment
            ft.show(mFragments[index]);
        }
        ft.commit();
        currentIndex = index;
    }
}

如有興趣可看下文：仿網易新聞主界面（二）——TabLayout+ViewPager

具體代碼：https://github.com/897532167/WYnews

此時的效果