Android音乐播放器4.0(布局)

218 阅读1分钟

这是我参与2022首次更文挑战的第13天,活动详情查看:2022首次更文挑战

音乐播放器4.0布局

目标:这一节里,我们需要完成以下以下效果 在这里插入图片描述

activity_main

布局中放置 RadioGroup 和 ViewPager

<?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:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#2894FF"
        android:gravity="center"
        android:text="音乐播放器"
        android:textColor="#fff" />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioButtonNew"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:gravity="center"
            android:text="新歌榜"
            android:textSize="18sp"
            android:textColor="@drawable/selector_tab" />

        <RadioButton
            android:id="@+id/radioButtonHot"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:textSize="18sp"
            android:text="热歌榜"
            android:textColor="@drawable/selector_tab" />

    </RadioGroup>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

drawable/selector_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#ffffff" android:state_checked="true" />
    <item android:color="#cccccc" android:state_checked="false" />
</selector>

MainActivity

初始化控件,并完成 RadioGroup 和 ViewPager 的联动

public class TestActivity extends AppCompatActivity {
    private RadioGroup radioGroup;
    private RadioButton radioButtonNew;
    private RadioButton radioButtonHot;
    private ViewPager viewPager;
    private ArrayList<Fragment> fragments;
    private MainPagerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        setViews();
        //设置ViewPager适配器
        setViewPagerAdapter();
        //设置监听
        setListeners();
    }

    private void setViews() {
        radioGroup = findViewById(R.id.radioGroup);
        radioButtonNew = findViewById(R.id.radioButtonNew);
        radioButtonHot = findViewById(R.id.radioButtonHot);
        viewPager = findViewById(R.id.viewpager);
    }

    private void setViewPagerAdapter() {
        //准备Fragment集合作为数据源
        fragments = new ArrayList<Fragment>();
        //向集合中添加两页
        fragments.add(new NewMusicListFragment());
        fragments.add(new HotMusicListFragment());
        //Activity必须继承自FragmentActivity
        adapter = new MainPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
    }

    private void setListeners() {
        //viewpager控制radiobutton
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            //当选择某一页时执行该方法
            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        radioButtonNew.setChecked(true);
                        break;
                    case 1:
                        radioButtonHot.setChecked(true);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        //radiobutton控制viewpager
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i) {
                    case R.id.radioButtonNew:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.radioButtonHot:
                        viewPager.setCurrentItem(1);
                        break;
                }
            }
        });
    }

    class MainPagerAdapter extends FragmentPagerAdapter {

        public MainPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }
    }
}

ViewPager的数据源是2个Fragment NewMusicListFragmentHotMusicListFragment

AndroidManifest.xml 中设置 theme 为 android:theme="@style/Theme.AppCompat.NoActionBar"