仿网易新闻主界面（一）——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

此时的效果