仿网易新闻主界面（一）——RadioGroup+Fragment

来源：互联网发布：淘宝上的食品能买吗编辑：程序博客网时间：2024/05/16 06:14

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

此时的效果

1 0