Android 超简单音乐播放器（一）主界面嘛（fragment+ViewPage）（View Pager滑动）（ 标题栏的隐藏和状态栏的改变）
主界面开发
是由fragment+ViewPager组成。
分为网络歌曲和本地歌曲。
首先，将main_activity.xml写好。添加Viewpager
<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。
这就是你要展示的滑动后不同的两个界面。
<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>
<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 fragments = new ArrayList<>();
public FragmentAdapter(FragmentManager fm, List 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 gridItems = new SparseArray();
private Map maps = new HashMap();
MusicGridAdapter musicGridAdapter;
private Dialog progressDialog;
Banner banner;
private List images;
private List 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 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中设置。
".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>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">//这一行~~~
-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary
- "colorPrimaryDark"
>@color/colorPrimaryDark
- "colorAccent">@color/colorAccent
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);