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: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);
  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
使用FragmentViewPager实现页面切换的步骤如下: 1. 创建Fragment:创建需要显示的Fragment,并实现Fragment的布局和逻辑。 2. 创建ViewPager:在界面布局中添加ViewPager,并创建一个PagerAdapter(适配器)用于管理Fragment。 3. 实现PagerAdapter:创建一个继承FragmentPagerAdapter或FragmentStatePagerAdapter的适配器,重写getItem()方法,返回对应位置的Fragment。 4. 设置ViewPager:将创建好的适配器设置给ViewPager,并添加TabLayout(选项卡)用于切换页面。 具体实现步骤如下: 1. 创建需要显示的Fragment: ``` public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1_layout, container, false); // TODO: 添加需要显示的布局和逻辑 return view; } } ``` 2. 创建ViewPager: ``` <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. 实现PagerAdapter: ``` public class MyPagerAdapter extends FragmentPagerAdapter { private List<Fragment> mFragments; private List<String> mTitles; public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) { super(fm); mFragments = fragments; mTitles = titles; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } @Nullable @Override public CharSequence getPageTitle(int position) { return mTitles.get(position); } } ``` 4. 设置ViewPager: ``` ViewPager viewPager = findViewById(R.id.view_pager); List<Fragment> fragments = new ArrayList<>(); fragments.add(new Fragment1()); fragments.add(new Fragment2()); List<String> titles = new ArrayList<>(); titles.add("页面1"); titles.add("页面2"); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(), fragments, titles); viewPager.setAdapter(adapter); TabLayout tabLayout = findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(viewPager); ``` 这样就可以使用ViewPager和Fragment实现页面切换了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值