前言介绍见Android音乐播放器（一）—前言
DisplayActivity设计见图1，实际效果见图2。图1的左侧是DisplayActivity布局文件的层次结构。
图1
图2
1.设置主题style.xml
想要使用toolbar首先需要将actionbar置空，在styles.xml中设置AppTheme的parent为xxxx.NoActionBar。
AppTheme默认在manifest文件中被使用为application的android:theme属性。
2.toolbar控件添加
在DisplayActivity的布局文件中的合适的位置添加toolbar控件。
android:layout_height="?attr/actionBarSize"是设置高度为系统默认的actionbar的高度，为56dp。
app:navigationIcon是工具栏最左侧的图标，后续可以在代码中实现该图标的点击事件，比如将它设置为返回按钮，在本应用的主界面这里，设置的是一个菜单图标，点击后显示侧边栏菜单。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_activity_display"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="@drawable/menu_gray"
android:background="@color/black_color"
app:title="@string/title_toolbar"
app:titleTextColor="@color/white_color" />
在activity的onCreate（）方法中加载该控件：
Toolbar toolbar = findViewById(R.id.toolbar_activity_display);
setSupportActionBar(toolbar);
3.配合DrawerLayout实现侧边栏
在DisplayActivity的最外层的布局是DrawerLayout，里面有两个LinearLayout布局，第一个是DisplayActivity的正常内容的布局，第二个是侧边栏的布局。
侧边栏的初始化在onCreate（）方法中调用config_DrawerLayout（）方法（自己是实现的方法），代码如下。
此方法中会用到两个全局变量，一个是侧边栏控件本身，另一个是用于将侧边栏、toolbar进行联系起来、配置侧边栏相关动作事件的类的对象。
private DrawerLayout drawerlayout = null;//侧滑栏
private ActionBarDrawerToggle drawerToggle = null;
public void config_DrawerLayout() {
drawerlayout = findViewById(R.id.drawer_layout);
/*后面两个参数是@StringRes int openDrawerContentDescRes, @StringRes int
closeDrawerContentDescRes根据我看完源码猜测为侧边栏打开和关闭时的描述文本信息*/
drawerToggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, R.string.app_name, R.string.app_name) {
@Override
public void onDrawerOpened(View drawerView) {//完全打开时触发
super.onDrawerOpened(drawerView);
//Toast.makeText(DisplayActivity.this,"onDrawerOpened",Toast.LENGTH_SHORT).show();
}
@Override
public void onDrawerClosed(View drawerView) {//完全关闭时触发
super.onDrawerClosed(drawerView);
//Toast.makeText(DisplayActivity.this,"onDrawerClosed",Toast.LENGTH_SHORT).show();
}
/**
* 当抽屉被滑动的时候调用此方法
* slideOffset表示 滑动的幅度（0-1）
*/
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
}
/**
* 当抽屉滑动状态改变的时候被调用
* 状态值是STATE_IDLE（闲置--0）, STATE_DRAGGING（拖拽的--1）, STATE_SETTLING（固定--2）中之一。
*具体状态可以慢慢调试
*/
@Override
public void onDrawerStateChanged(int newState) {
super.onDrawerStateChanged(newState);
}
};
drawerlayout.setDrawerListener(drawerToggle);
//设置toolbar左侧图标点击打开侧滑栏
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (drawerlayout.isDrawerOpen(GravityCompat.START)) {
//Log.w("DisplayActivity", "closeDrawer");
drawerlayout.closeDrawer(GravityCompat.START);
} else {
//Log.w("DisplayActivity", "openDrawer");
drawerlayout.openDrawer(GravityCompat.START);
}
}
});
//配置侧滑界面listView
List<DrawerLayoutListViewItem> drawer_list_view_content = new ArrayList<>();
DrawerLayoutListViewItem myLoveSongs = new DrawerLayoutListViewItem(R.drawable.love, "我喜欢的音乐");
DrawerLayoutListViewItem stopWithTime = new DrawerLayoutListViewItem(R.drawable.stop_with_time, "定时停止播放");
DrawerLayoutListViewItem play_mode_select = new DrawerLayoutListViewItem(R.drawable.setting, "播放模式");
DrawerLayoutListViewItem feedback_suggestions = new DrawerLayoutListViewItem(R.drawable.about, "关于");
DrawerLayoutListViewItem exit = new DrawerLayoutListViewItem(R.drawable.exit_2, "退出");
drawer_list_view_content.add(myLoveSongs);
drawer_list_view_content.add(play_mode_select);
drawer_list_view_content.add(stopWithTime);
drawer_list_view_content.add(feedback_suggestions);
drawer_list_view_content.add(exit);
DrawerLayoutListViewAdapter drawer_list_view_adapter = new DrawerLayoutListViewAdapter(DisplayActivity.this, R.layout.drawer_layout_list_item, drawer_list_view_content);
drawer_layout_list_view.setAdapter(drawer_list_view_adapter);
}
DrawerLayoutListViewItem类是一个JAVA Bean类，用于存储侧边栏的listview的每个item，具体代码如下，包含一张图片和一个字符串。
/**侧滑栏ListView的item*/
public class DrawerLayoutListViewItem {
private int item_picture;//item图片
private String item_title;//item标题
public DrawerLayoutListViewItem(int item_picture, String item_title) {
this.item_picture = item_picture;
this.item_title = item_title;
}
public int getItem_picture() {
return item_picture;
}
public void setItem_picture(int item_picture) {
this.item_picture = item_picture;
}
public String getItem_title() {
return item_title;
}
public void setItem_title(String item_title) {
this.item_title = item_title;
}
}
DrawerLayoutListViewAdapter类是用于将ArrayList中的数据适配到listview的每个item里面去的。
每次有子项滑动到屏幕内时就会调用getView方法。为了充分利用缓存，会首先判断convertView是否为空，不为空的话就直接复用，往view的控件里面装载数据即可；如果为空的话就需要重新加载控件并存储到viewholder里面。
package edu.whut.ruansong.musicplayer.tool;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
import edu.whut.ruansong.musicplayer.R;
import edu.whut.ruansong.musicplayer.model.DrawerLayoutListViewItem;
public class DrawerLayoutListViewAdapter extends ArrayAdapter<DrawerLayoutListViewItem> {
private int resourceId;//用来放置布局文件的id
//适配器的构造函数
public DrawerLayoutListViewAdapter(Context context, int textViewResourceId, List<DrawerLayoutListViewItem> objects) {
super(context, textViewResourceId, objects);
resourceId = textViewResourceId;
}
class ViewHolder {
ImageView itemImage;
TextView itemTitle;
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
DrawerLayoutListViewItem item = getItem(position); // 获取当前项的item实例
View view;//子项布局对象
ViewHolder viewHolder;//内部类对象
if(convertView == null){//第一次加载
view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
viewHolder = new ViewHolder();
viewHolder.itemImage = view.findViewById(R.id.drawer_layout_list_item_image);
viewHolder.itemTitle = view.findViewById(R.id.drawer_layout_list_item_title);
}else{//不是第一次,即布局文件已经加载，可以利用
view = convertView;
viewHolder = (ViewHolder) view.getTag();
}
if(item != null && viewHolder!= null){
viewHolder.itemImage.setImageResource(item.getItem_picture());
viewHolder.itemTitle.setText(item.getItem_title());
}
return view;
}
}
侧边栏效果如图3：
图3
4.搜索图标的实现
搜索图标不是在布局文件中写出来的，是通过menu文件配合代码实现的。
在res目录下新建menu文件夹，新建xml文件，命名为menu_xxxxx.xml（这里我命名为menu_display.xml）。
app:showAsAction="always"表示toolbar有没有空间都会要求显示搜索图标。
item标签是可以多实现几个的，多了以后可能会出现竖状的3个点，点击以后会出现详细的选项。
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/display_toolbar_menu_search"
android:title="@string/search"
android:icon="@drawable/search"
app:showAsAction="always"/>
</menu>
然后在DisplayActivity（主界面activity）中重写父类的两个方法，代码如下：
/**
* toolbar的menu加载
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_display, menu);
return true;
}
/**
* toolbar的menu点击事件
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.display_toolbar_menu_search://toolbar上的搜索按钮
Intent intent_jump_toolbar_search =
new Intent(DisplayActivity.this, SearchDetailActivity.class);
startActivity(intent_jump_toolbar_search);
break;
default:
break;
}
return true;
}
这里搜索图标的点击事件是跳转到搜索界面（SearchDetailActivity）去。
5.历史播放记录控件的实现
历史播放记录控件是一个单独的布局文件实现的。用垂直的线性布局包含了一个文本框和一个listview控件，背景采用圆角卡片式效果。
然后在DisplayActivity的布局文件中采用include的方式引入历史播放记录控件。
<include layout="@layout/my_history_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dp_10"
android:layout_above="@+id/play_bar_bottom"/>
圆角卡片式的实现采用新建xml文件，写shape标签的形式来实现，具体代码如下。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 描边 -->
<stroke
android:width="1dp"
android:color="@color/black_color" />
<!-- 渐变 -->
<gradient
android:startColor="#D5CFCF"
android:endColor="#D5CFCF"/>
<!-- 圆角角度 -->
<corners
android:radius="10dp" />
</shape>
6.播放进度条
采用ProgressBa控件实现，在后台服务service中定时向主界面发送广播更新进度条的进度。
style设置进度条为水平方向，可选垂直方向
在styles.xml文件中colorAccent定义了进度条的默认颜色，如下语句：
@color/colorAccent
<ProgressBar
android:id="@+id/progressBar_activity_display"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_above="@+id/play_bar_bottom"
android:max="100"
android:progress="0"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:background="@color/gray_color"/>
7.底部播放状态控制条
具体实现可以参阅代码activity_display.xml，只是单纯的控件的堆叠。
以上是主界面的界面的实现，下一篇是本应用的播放逻辑的控制方法
求赞，谢谢
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
