Android 超简单音乐播放器（一）主界面嘛（fragment+ViewPage）（View Pager滑动）（标题栏的隐藏和状态栏的改变）

最新推荐文章于 2022-08-04 22:50:56 发布

ArcheH

最新推荐文章于 2022-08-04 22:50:56 发布

阅读量3.4k

点赞数 3

本文链接：https://blog.csdn.net/ArcheH/article/details/78523934

版权

主界面开发

是由fragment+ViewPager组成。
分为网络歌曲和本地歌曲。
这里写图片描述

这里写图片描述

首先，将main_activity.xml写好。添加Viewpager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.music.activity.MainActivity"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:background="@drawable/bgmain"
        android:elevation="5dp"
        android:layout_width="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_height="45dp"
        android:id="@+id/tb_main">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我的音乐"
                android:textSize="16sp"
                android:textColor="#FFFFFF"
                android:layout_centerInParent="true"
                />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/iv_down"
                android:src="@drawable/down"
                android:layout_centerVertical="true" />
            <ImageView
                android:layout_marginRight="10dp"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:id="@+id/iv_setting"
                android:layout_width="35dp"
                android:layout_height="30dp"
                android:scaleType="centerInside"
                android:src="@drawable/setting" />
        </RelativeLayout>

    </android.support.v7.widget.Toolbar>
    <LinearLayout
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="25dp">
        <TextView
            android:id="@+id/tv_local"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="网络音乐"
            android:textSize="15sp"
            android:layout_weight="1"
            android:gravity="center"
            />
        <View
        android:layout_width="1dp"
        android:layout_height="20dp"
        android:background="#e2dada"/>
        <TextView
            android:id="@+id/tv_network"
            android:textColor="#000000"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="本地音乐"
            android:gravity="center"
            android:textSize="15sp"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/vv_main"
            android:layout_width="wrap_content"
            android:layout_height="4dp">
            <View
                android:layout_width="match_parent"
                android:layout_height="4dp"
                android:background="@drawable/btn_red"/>
        </LinearLayout>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

第二步，就要在layout中添加两个布局文件。
分别为fragment_local.xml和fragment_network.xml。
这就是你要展示的滑动后不同的两个界面。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="#edebeb">
                <EditText
                    android:imeOptions="actionSearch"
                    android:maxLines="1"
                    android:id="@+id/et_findlocal"
                    android:textSize="13sp"
                    android:hint="共6首，搜索本地歌曲"
                    android:gravity="center"
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:background="@drawable/btn_white"
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:layout_gravity="center"/>
        </LinearLayout>
        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/rv_fragment_local"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        <View
            android:id="@+id/vv_xian"
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:background="#edebeb"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="#edebeb">
            <EditText
                android:imeOptions="actionSearch"
                android:maxLines="1"
                android:id="@+id/et_findlocal"
                android:textSize="13sp"
                android:hint="搜索网络歌曲"
                android:gravity="center"
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/btn_white"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="30dp"
                android:layout_gravity="center"/>
            <ImageView
                android:id="@+id/iv_findNet"
                android:layout_marginRight="5dp"
                android:layout_gravity="center"
                android:layout_width="0dp"
                android:layout_weight="0.1"
                android:layout_height="30dp"
                android:background="@drawable/find"/>
        </LinearLayout>
        <RelativeLayout
            android:id="@+id/rl_scroll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <GridView
                android:id="@+id/main_gridview"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:horizontalSpacing="0dp"
                android:numColumns="3"
                android:scrollbars="none"
                android:verticalSpacing="0dp" >
            </GridView>
        </RelativeLayout>
        <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:text="最好的祝福都给你"
            android:layout_height="match_parent"
            android:background="#edebeb"/>
</LinearLayout>

接下来，就是写Fragment 的adapter。
继承 FragmentPagerAdapter，然后重写两个方法。
写一个构造器，将fragment集合传入。

public class FragmentAdapter extends FragmentPagerAdapter {
    List<Fragment> fragments = new ArrayList<>();
    public FragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragments=fragmentList;
    }

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

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

然后，就可以写两个Fragment的Java代码了。
这里就可以当成Activity来写。（稍微有的地方会有区别）
继承Frgement。然后通过onCreateView（）绑定布局文件。
这个方法相当于Activity的 onCreate（）。数据的初始化以及界面的加载写在这里面。

public class NetFragment extends Fragment {
    @Bind(R.id.et_findlocal)
    EditText etFindlocal;
    @Bind(R.id.main_gridview)
    GridView mainGridview;
    private SparseArray<String> gridItems = new SparseArray<String>();
    private Map<String, Integer> maps = new HashMap<String, Integer>();
    MusicGridAdapter musicGridAdapter;
    private Dialog progressDialog;
    Banner banner;
    private List<Integer> images;
    private List<String> strings;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_network, container, false);
        banner =  view.findViewById(R.id.banner);
        initData();
        banner.setImageLoader(new GlideImagerLoader());
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
        banner.setImages(images);
        banner.setBannerTitles(strings);
        banner.isAutoPlay(true);
        banner.setDelayTime(2000);
        banner.start();
        musicGridAdapter = new MusicGridAdapter(gridItems, getContext());
        mainGridview = view.findViewById(R.id.main_gridview);
        mainGridview.setAdapter(musicGridAdapter);
        mainGridview.setOnItemClickListener(new mainGridviewListener());
        ButterKnife.bind(this, view);
        return view;
    }

}

最后就是写MainActivity。
将两个Fragment通过适配器添加到Viewpager里面去。
public class MainActivity extends AppCompatActivity {

@Bind(R.id.tb_main)
Toolbar tbMain;
@Bind(R.id.tv_local)
TextView tvLocal;
@Bind(R.id.tv_network)
TextView tvNetwork;
@Bind(R.id.vv_main)
LinearLayout vvMain;
@Bind(R.id.vp_main)
ViewPager vpMain;
@Bind(R.id.iv_down)
ImageView ivDown;
@Bind(R.id.iv_setting)
ImageView ivSetting;
private FragmentAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    StatusBarCompat.setStatusBarColor(this, Color.parseColor("#da3318"));
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);
    List<Fragment> fragments = new ArrayList<>();
    fragments.add(new NetFragment());
    fragments.add(new LocalFragment());
        }

View Pager滑动

这里是关于那个红色条的滑动实现。
首先，在布局文件添加

        <LinearLayout
            android:id="@+id/vv_main"
            android:layout_width="wrap_content"
            android:layout_height="4dp">
            <View
                android:layout_width="match_parent"
                android:layout_height="4dp"
                android:background="@drawable/btn_red"/>
        </LinearLayout>

定义两个全局变量，分别记录当前为哪个Fragment以及屏幕的宽度。

    private int currentIndex;
    private int screenWidth;

由于两边都要留空白，所以通过getWindowManager().getDefaultDisplay().getWidth() 获取屏幕的宽度后还要减去20dp。
通过LinearLayout.LayoutParams设置属性。
将其宽度设为屏幕宽度的一半。

 screenWidth = getWindowManager().getDefaultDisplay().getWidth() - dip2px(this, 20);
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
        lp.width = screenWidth / 2;
        vvMain.setLayoutParams(lp);

定义一个方法将dp换成px。

    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

接下来就是给ViewPager设置一个监听。
当其position变化后，相应的改变红线距离左边的宽度。
并改变相应字体的颜色。

vpMain.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
                if (currentIndex == 0 && position == 0)// 0->1
                {
                    lp.leftMargin = (int) (positionOffset * screenWidth / 2);
                } else if (currentIndex == 1 && position == 0) {
                    lp.leftMargin = (int) ((1 + positionOffset) * screenWidth / 4);
                }
                vvMain.setLayoutParams(lp);
            }//滑动时，红线随着位移偏移量positionOffset移动。

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    tvLocal.setTextColor(Color.parseColor("#da3318"));
                    tvNetwork.setTextColor(Color.BLACK);
                    currentIndex = 0;
                    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
                    lp.leftMargin = 0;
                    vvMain.setLayoutParams(lp);
                } else if (position == 1) {
                    tvLocal.setTextColor(Color.BLACK);
                    tvNetwork.setTextColor(Color.parseColor("#da3318"));
                    currentIndex = 1;
                    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vvMain.getLayoutParams();
                    lp.leftMargin = screenWidth / 4;
                    vvMain.setLayoutParams(lp);
                }
            }//滑动后颜色改变。

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

最后是初始化。

        vpMain.setCurrentItem(0);
        tvLocal.setTextColor(Color.parseColor("#da3318"));
        tvNetwork.setTextColor(Color.BLACK);
        currentIndex = 0;

如果需要添加点击效果，只需要在点击事件中setCurrentItem（）即可。

            case R.id.tv_local:
                vpMain.setCurrentItem(0);
                break;
            case R.id.tv_network:
                vpMain.setCurrentItem(1);
                break;

标题栏的隐藏和状态栏的改变

标题栏的隐藏

在AndroidManifest.xml中设置。

<application
    android:name=".App"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">//对！就是这里~

进入我们的values~
在styles.xml中添加相对应的主题。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">//这一行~~~
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

状态栏的改变

在build.gradle中添加依赖。

dependencies {
compile 'com.github.niorgai:StatusBarCompat:2.1.1'
}

再在Activity中加入一行代码。
注意，这里必须加在 setContentView(R.layout.activity_main);之前。

        StatusBarCompat.setStatusBarColor(this, Color.parseColor("#da3318"));
        StatusBarCompat.translucentStatusBar（this)；//透明
        setContentView(R.layout.activity_main);

ArcheH

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
16
评论
Android 超简单音乐播放器（一）主界面嘛（fragment+ViewPage）（View Pager滑动）（标题栏的隐藏和状态栏的改变）

主界面开发是由fragment+ViewPager组成。分为网络歌曲和本地歌曲。首先，将main_activity.xml写好。添加Viewpager<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:
复制链接

扫一扫