底部导航栏的应用非常的广泛。今天就介绍直播视频app源码的其中一种实现方式。
一、Fragment + TextView 实现
前面一篇博客在介绍Fragment 的时候就使用了Fragment + ImageView 实现了一个直播视频app源码底部导航栏点击的例子，只要把ImageView 替换为TextView 是一样的实现。
这种方式每次点击我们都要重置 所有TextView的状态，然后选中点击的TextView
二、RadioGroup + ViewPager 实现
直播视频app源码只需重写RadioGroup的onCheckedChange，判断checkid即可知道点击的是哪个RadioButton，再给ViewPager 设置监听，让底部导航栏和viewpager同步就行了。
- 新建四个布局文件
这里我放一个布局文件的代码。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="500dp" android:src="@drawable/tx4"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我的" android:textSize="50sp" android:textColor="#ff0000" android:layout_gravity="center" /> </LinearLayout>
- 编写直播视频app源码更换底部导航栏图标的xml，和导入我们的图标，选中和没有选中个一个不同的颜色。这里就给出一个
me_drawable.xml的例子
分别设置选中和没有选中的图片
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="> <item android:state_checked="true" android:drawable="@drawable/me_select"/> <item android:state_checked="false" android:drawable="@drawable/me_normal"/> </selector>
- 编写activity_main.xml布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:app=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.mq.bottomtoobar2.MainActivity"> <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/rg_tab"/> <RadioGroup android:id="@+id/rg_tab" android:layout_width="fill_parent" android:layout_height="55dp" android:gravity="center_vertical" android:layout_alignParentBottom="true" android:orientation="horizontal"> <RadioButton android:id="@+id/rb_msg" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="true" android:drawableTop="@drawable/msg_drawable" android:gravity="center" android:paddingLeft="0dp" android:text="信息" /> <RadioButton android:id="@+id/rb_people" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/people_drawable" android:gravity="center" android:paddingLeft="0dp" android:text="联系人" /> <RadioButton android:id="@+id/rb_find" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/find_drawable" android:gravity="center" android:paddingLeft="0dp" android:text="发现" /> <RadioButton android:id="@+id/rb_me" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/me_drawable" android:gravity="center" android:paddingLeft="0dp" android:text="我" /> </RadioGroup> </RelativeLayout>
注意： android:button="@null" 属性可以将边上的圈圈去掉。
- 编写MainActivity代码
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private RadioGroup mRadioGroup;
private RadioButton tab1,tab2,tab3,tab4; //四个单选按钮
private List<View> mViews; //存放视图
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();//初始化数据
//对单选按钮进行监听，选中、未选中
mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
switch (i) {
case R.id.rb_msg:
mViewPager.setCurrentItem(0);
break;
case R.id.rb_people:
mViewPager.setCurrentItem(1);
break;
case R.id.rb_find:
mViewPager.setCurrentItem(2);
break;
case R.id.rb_me:
mViewPager.setCurrentItem(3);
break;
}
}
});
}
private void initView() {
//初始化控件
mViewPager=findViewById(R.id.viewpager);
mRadioGroup=findViewById(R.id.rg_tab);
tab1=findViewById(R.id.rb_msg);
tab2=findViewById(R.id.rb_people);
tab3=findViewById(R.id.rb_find);
tab4=findViewById(R.id.rb_me);
mViews=new ArrayList<View>();//加载，添加视图
mViews.add(LayoutInflater.from(this).inflate(R.layout.msg,null));
mViews.add(LayoutInflater.from(this).inflate(R.layout.people,null));
mViews.add(LayoutInflater.from(this).inflate(R.layout.find,null));
mViews.add(LayoutInflater.from(this).inflate(R.layout.me,null));
mViewPager.setAdapter(new MyViewPagerAdapter());//设置一个适配器
//对viewpager监听，让分页和底部图标保持一起滑动
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override //让viewpager滑动的时候，下面的图标跟着变动
public void onPageSelected(int position) {
switch (position) {
case 0:
tab1.setChecked(true);
tab2.setChecked(false);
tab3.setChecked(false);
tab4.setChecked(false);
break;
case 1:
tab1.setChecked(false);
tab2.setChecked(true);
tab3.setChecked(false);
tab4.setChecked(false);
break;
case 2:
tab1.setChecked(false);
tab2.setChecked(false);
tab3.setChecked(true);
tab4.setChecked(false);
break;
case 3:
tab1.setChecked(false);
tab2.setChecked(false);
tab3.setChecked(false);
tab4.setChecked(true);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//ViewPager适配器
private class MyViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view==object;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(mViews.get(position));
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(mViews.get(position));
return mViews.get(position);
}
}
}
这样，直播视频app源码就实现了一个底部导航栏。
声明：本文由云豹科技转发自浪漫主义码农博客，如有侵权请联系作者删除
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69982461/viewspace-2795151/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
优化安装包，app直播源代码可以怎样做
请登录后发表评论
登录
全部评论
