ITPub博客

首页 > 应用开发 > IT综合 > 实现直播视频app源码的底部导航栏

实现直播视频app源码的底部导航栏

IT综合 作者:云豹科技阿星 时间:2021-10-09 16:51:21 0 删除 编辑

底部导航栏的应用非常的广泛。今天就介绍直播视频app源码的其中一种实现方式。

一、Fragment + TextView 实现

前面一篇博客在介绍Fragment 的时候就使用了Fragment + ImageView 实现了一个直播视频app源码底部导航栏点击的例子,只要把ImageView 替换为TextView 是一样的实现。

这种方式每次点击我们都要重置 所有TextView的状态,然后选中点击的TextView

二、RadioGroup + ViewPager 实现

直播视频app源码只需重写RadioGroup的onCheckedChange,判断checkid即可知道点击的是哪个RadioButton,再给ViewPager 设置监听,让底部导航栏和viewpager同步就行了。

  1. 新建四个布局文件

在这里插入图片描述

这里我放一个布局文件的代码。

<?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>
  1. 编写直播视频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>
  1. 编写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" 属性可以将边上的圈圈去掉。

  1. 编写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博客 ” ,链接:http://blog.itpub.net/69982461/viewspace-2795151/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-08-24

  • 博文量
    230
  • 访问量
    78316