仿网易新闻主界面（一）——RadioGroup+Fragment
界面 新闻 fragment 网易 RadioGroup
2023-09-11 14:18:54 时间
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
此时的效果
