更改 android ListView 中最近单击的列表项中的图像视图
Changing imageview present in recently clicked listitem in android ListView
在这里，我正在尝试制作一个使用 API 工作的音乐流媒体应用程序，并且我使用了 Android 中可用的 MusicPlayer class。在这里，我要做的是从列表视图中的 API 获取响应，然后单击列表视图中的任何项目以流式传输该特定歌曲。这些歌曲存在于服务器上，我从服务器得到了正确的响应，而且根据我的说法，音乐流媒体也得到了正确的实现。音乐进度在 SeekBar 的帮助下显示，我 100% 确定它也按我想要的方式工作。
我最近添加的新东西是，每当我点击列表中的特定歌曲项目时，该项目左侧的耳机图标就会变为播放图标，如下面的屏幕截图所示
Screenshot of the app from my phone
在这里，歌曲左侧的播放图标显示它们最近播放过，但我只想播放当前正在播放的歌曲的播放图标，而不是最近播放的歌曲。
但我想不出办法，我尝试了一些方法，比如
- 将单击的项目位置存储在 class 中的某处，以备后用。
- 网上搜索，一种只修改列表视图中未被点击的列表项的方法。
- 修改点击停止图标时最近点击项目的图片资源。
但是第3个不行，还没找到实现第1个和第2个的方法..
ListView 实现的代码片段
CustomSongList adapter = new CustomSongList(Songs.this, songdetails);
list = (ListView) findViewById(R.id.list);
list.setAdapter(adapter);
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
url = songdetails.get(position).getUrl(); // your URl
pos = position;
ImageView listenImage = (ImageView) view.findViewById(R.id.musicicon);
listenImage.setImageResource(R.drawable.play); /* I am changing icon from headphone icon to play icon here*/
if (mediaPlayer != null) {
mediaPlayer.stop();
}
mediaPlayer = new MediaPlayer();
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
try {
mediaPlayer.setDataSource(url);
mediaPlayer.prepare();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
mediaFileLengthInMilliseconds = mediaPlayer.getDuration();// gets the song length in milliseconds from URL
mediaPlayer.start();
imPlay.setVisibility(View.INVISIBLE);
imPause.setVisibility(View.VISIBLE);
primarySeekBarProgressUpdater();
}
});
这是 ListView 适配器的代码片段 class。
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView = inflater.inflate(R.layout.songlist_item, null, true);
TextView Title = (TextView) rowView.findViewById(R.id.title);
TextView Singer = (TextView) rowView.findViewById(R.id.singer);
TextView Duration = (TextView) rowView.findViewById(R.id.duration);
Title.setText(songlist.get(position).getTitle());
Singer.setText("Singer : " + songlist.get(position).getSinger());
Duration.setText("Duration : " + songlist.get(position).getDuration()+" mins");
return rowView;
}
这是歌曲布局文件的片段
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/seekBar"
android:layout_below="@+id/songheading"
android:layout_margin="10dp"
android:background="@android:color/transparent"
android:cacheColorHint="@android:color/transparent"
android:divider="@drawable/transperent_color"
android:dividerHeight="5dip" />
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/buttonPlay" />
<ImageView
android:id="@+id/buttonPlay"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/play" />
<ImageView
android:id="@+id/buttonPause"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/pause" />
<ImageView
android:id="@+id/buttonStop"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:background="@drawable/stop" />
listview各item的耳机图标设置如下代码片段完成
<ImageView
android:id="@+id/musicicon"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@string/app_name"
android:gravity="center"
android:layout_marginTop="10dp"
android:src="@drawable/listen_icon" />
编辑
应用了@KalaBalik
给出的解决方案
感谢@KalaBalik 发布标记歌曲的步骤，但我已逐步应用您的步骤，我发现我的应用程序现在不显示列表本身，加载完成后，请点击此处是截图
这是我按照您所说的对代码进行的编辑
列表视图的代码片段
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/seekBar"
android:layout_below="@+id/songheading"
android:layout_margin="10dp"
android:background="@android:color/transparent"
android:cacheColorHint="@android:color/transparent"
android:choiceMode="singleChoice" // -----here
android:divider="@drawable/transperent_color"
android:dividerHeight="5dip" />
CheckedTextView 实现
<CheckedTextView
android:id="@+id/tvChecked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="@drawable/playing" />
checkedTextview 的复合可绘制对象，
playing.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/play" android:state_checked="true" />
<item android:drawable="@drawable/listen_icon" />
SpannableStringBuilder 实现
String finalString = title + "\n" + singer + "\n" + duration;
SpannableStringBuilder sb = new SpannableStringBuilder();
Typeface exoMedium = Typeface.createFromAsset(context.getAssets(), "fonts/Exo-Medium.ttf");
TypefaceSpan exoMediumSpan = new CustomTypeFaceSpan("", exoMedium);
sb.setSpan(exoMediumSpan, finalString.indexOf(title), title.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.setSpan(new ForegroundColorSpan(Color.BLUE), finalString.indexOf(singer), singer.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.setSpan(new ForegroundColorSpan(Color.CYAN), finalString.indexOf(duration), duration.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
我使用 this link
创建了 CustomTypeFaceSpan
在 checkedTextView 中设置 SpannableStringBuilder holder.checkedTextView.setText(sb); 这里我使用了 ViewHolder 模式
并在单击项目时设置列表视图为真
list.setAdapter(adapter);
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
list.setItemChecked(position, true);
但是结果在上面的截图中，告诉我哪里做错了。
您需要以某种方式标记或"check" 当前正在播放的歌曲。例如，这可以用 CheckedTextView 来完成。
将其放入您的 ListView XML：android:choiceMode="singleChoice"
在您的 ListItem XML 中，我建议只使用一个 CheckedTextView。您仍然可以通过 (a) 为图像使用复合可绘制对象（例如：android:drawableStart="@drawable/playing"）和 (b) 以编程方式将文本设置为来自 SpannableStringBuilder 的字符串来进行格式化。这样你就可以在你放入（一个）CheckedTextView 的一个字符串中有不同的字体大小、样式和颜色。理论上，您可以有更复杂的 listItem 布局，但它会得到 complicated quickly.
在您的侦听器中，您只需检查当前位置的项目，如下所示：list.setItemChecked(position, true);
现在（初始化后）您始终只有一个选中的列表项，您所要做的就是对其做出反应。您可以在复合可绘制对象上使用 state list 来执行此操作。此状态列表将包含有关何时（在哪种状态下：选中或不选中）显示一个或另一个可绘制对象的说明。
为了使 ListView 到 运行 高效，建议（但不是必需）实施 ViewHolder 模式，如下所示：
适配器内部：
@Override
public View getView(int position, View convertView, ViewGroup parent) {
final ViewHolder viewHolder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.list_item, parent, false);
viewHolder = new ViewHolder(convertView);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.checkedTextView.setText(filteredList.get(position));
return convertView;
}
static class ViewHolder {
final CheckedTextView checkedTextView;
private ViewHolder(View convertView) {
checkedTextView = (CheckedTextView) convertView.findViewById(R.id.listentry);
}
}
您链接的代码不包含我建议的所有更改。例如，songlist_item 不引用选择器。最重要的是，我不想处理 MediaPlayer 准备回调的细节。因此，我为您的问题做了一个最小但完整且可验证的示例。请单独测试和理解代码，然后将其编织到您的项目中。
主要活动：
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ListView listView = findViewById(R.id.list);
ArrayList<String> songdetails = new ArrayList<>();
songdetails.add("Song1");
songdetails.add("Song2");
songdetails.add("Song3");
CustomArrayAdapter adapter = new CustomArrayAdapter(this, R.layout.listitem, songdetails);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
listView.setItemChecked(i, true);
// the selected song can be found at position i of songdetails
// start playing the selected song here
}
});
}
}
CustomArrayAdapter:
public class CustomArrayAdapter extends ArrayAdapter<String> {
private final Activity context;
private final int resource;
private ArrayList<String> songlist;
CustomArrayAdapter(Activity context, int resource, ArrayList<String> songlist) {
super(context, resource);
this.context = context;
this.resource = resource;
this.songlist = songlist;
}
@Override
public int getCount() {
return songlist.size();
}
@NonNull
@Override
public View getView(int position, View convertView, @NonNull ViewGroup parent) {
final ViewHolder holder;
String song = songlist.get(position);
LayoutInflater inflater = context.getLayoutInflater();
if (convertView == null) {
convertView = inflater.inflate(resource, parent, false);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.checkedTextView.setText(song);
return convertView;
}
static class ViewHolder {
final CheckedTextView checkedTextView;
private ViewHolder(View convertView) {
checkedTextView = convertView.findViewById(R.id.tvChecked);
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice" />
listitem.xml
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tvChecked"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableStart="@drawable/checkedstatelist" />
和checkedstatelist.xml（居住在res/drawable/）：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:drawable/ic_media_play" android:state_checked="true" />
<item android:drawable="@android:drawable/ic_media_pause" android:state_checked="false" />
</selector>
这是结果：
在这里，我正在尝试制作一个使用 API 工作的音乐流媒体应用程序，并且我使用了 Android 中可用的 MusicPlayer class。在这里，我要做的是从列表视图中的 API 获取响应，然后单击列表视图中的任何项目以流式传输该特定歌曲。这些歌曲存在于服务器上，我从服务器得到了正确的响应，而且根据我的说法，音乐流媒体也得到了正确的实现。音乐进度在 SeekBar 的帮助下显示，我 100% 确定它也按我想要的方式工作。
我最近添加的新东西是，每当我点击列表中的特定歌曲项目时，该项目左侧的耳机图标就会变为播放图标，如下面的屏幕截图所示
Screenshot of the app from my phone
在这里，歌曲左侧的播放图标显示它们最近播放过，但我只想播放当前正在播放的歌曲的播放图标，而不是最近播放的歌曲。
但我想不出办法，我尝试了一些方法，比如
- 将单击的项目位置存储在 class 中的某处，以备后用。
- 网上搜索，一种只修改列表视图中未被点击的列表项的方法。
- 修改点击停止图标时最近点击项目的图片资源。
但是第3个不行，还没找到实现第1个和第2个的方法..
ListView 实现的代码片段
CustomSongList adapter = new CustomSongList(Songs.this, songdetails);
list = (ListView) findViewById(R.id.list);
list.setAdapter(adapter);
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
url = songdetails.get(position).getUrl(); // your URl
pos = position;
ImageView listenImage = (ImageView) view.findViewById(R.id.musicicon);
listenImage.setImageResource(R.drawable.play); /* I am changing icon from headphone icon to play icon here*/
if (mediaPlayer != null) {
mediaPlayer.stop();
}
mediaPlayer = new MediaPlayer();
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
try {
mediaPlayer.setDataSource(url);
mediaPlayer.prepare();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (SecurityException e) {
e.printStackTrace();
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
mediaFileLengthInMilliseconds = mediaPlayer.getDuration();// gets the song length in milliseconds from URL
mediaPlayer.start();
imPlay.setVisibility(View.INVISIBLE);
imPause.setVisibility(View.VISIBLE);
primarySeekBarProgressUpdater();
}
});
这是 ListView 适配器的代码片段 class。
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView = inflater.inflate(R.layout.songlist_item, null, true);
TextView Title = (TextView) rowView.findViewById(R.id.title);
TextView Singer = (TextView) rowView.findViewById(R.id.singer);
TextView Duration = (TextView) rowView.findViewById(R.id.duration);
Title.setText(songlist.get(position).getTitle());
Singer.setText("Singer : " + songlist.get(position).getSinger());
Duration.setText("Duration : " + songlist.get(position).getDuration()+" mins");
return rowView;
}
这是歌曲布局文件的片段
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/seekBar"
android:layout_below="@+id/songheading"
android:layout_margin="10dp"
android:background="@android:color/transparent"
android:cacheColorHint="@android:color/transparent"
android:divider="@drawable/transperent_color"
android:dividerHeight="5dip" />
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/buttonPlay" />
<ImageView
android:id="@+id/buttonPlay"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/play" />
<ImageView
android:id="@+id/buttonPause"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/pause" />
<ImageView
android:id="@+id/buttonStop"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:background="@drawable/stop" />
listview各item的耳机图标设置如下代码片段完成
<ImageView
android:id="@+id/musicicon"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="@string/app_name"
android:gravity="center"
android:layout_marginTop="10dp"
android:src="@drawable/listen_icon" />
编辑
应用了@KalaBalik
给出的解决方案感谢@KalaBalik 发布标记歌曲的步骤，但我已逐步应用您的步骤，我发现我的应用程序现在不显示列表本身，加载完成后，请点击此处是截图
这是我按照您所说的对代码进行的编辑
列表视图的代码片段
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/seekBar"
android:layout_below="@+id/songheading"
android:layout_margin="10dp"
android:background="@android:color/transparent"
android:cacheColorHint="@android:color/transparent"
android:choiceMode="singleChoice" // -----here
android:divider="@drawable/transperent_color"
android:dividerHeight="5dip" />
CheckedTextView 实现
<CheckedTextView
android:id="@+id/tvChecked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="@drawable/playing" />
checkedTextview 的复合可绘制对象，
playing.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/play" android:state_checked="true" />
<item android:drawable="@drawable/listen_icon" />
SpannableStringBuilder 实现
String finalString = title + "\n" + singer + "\n" + duration;
SpannableStringBuilder sb = new SpannableStringBuilder();
Typeface exoMedium = Typeface.createFromAsset(context.getAssets(), "fonts/Exo-Medium.ttf");
TypefaceSpan exoMediumSpan = new CustomTypeFaceSpan("", exoMedium);
sb.setSpan(exoMediumSpan, finalString.indexOf(title), title.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.setSpan(new ForegroundColorSpan(Color.BLUE), finalString.indexOf(singer), singer.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.setSpan(new ForegroundColorSpan(Color.CYAN), finalString.indexOf(duration), duration.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
我使用 this link
创建了 CustomTypeFaceSpan在 checkedTextView 中设置 SpannableStringBuilder holder.checkedTextView.setText(sb); 这里我使用了 ViewHolder 模式
并在单击项目时设置列表视图为真
list.setAdapter(adapter);
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
list.setItemChecked(position, true);
但是结果在上面的截图中，告诉我哪里做错了。
您需要以某种方式标记或"check" 当前正在播放的歌曲。例如，这可以用 CheckedTextView 来完成。
将其放入您的 ListView XML：
android:choiceMode="singleChoice"在您的 ListItem XML 中，我建议只使用一个
CheckedTextView。您仍然可以通过 (a) 为图像使用复合可绘制对象（例如：android:drawableStart="@drawable/playing"）和 (b) 以编程方式将文本设置为来自SpannableStringBuilder的字符串来进行格式化。这样你就可以在你放入（一个）CheckedTextView的一个字符串中有不同的字体大小、样式和颜色。理论上，您可以有更复杂的 listItem 布局，但它会得到 complicated quickly.在您的侦听器中，您只需检查当前位置的项目，如下所示：
list.setItemChecked(position, true);现在（初始化后）您始终只有一个选中的列表项，您所要做的就是对其做出反应。您可以在复合可绘制对象上使用 state list 来执行此操作。此状态列表将包含有关何时（在哪种状态下：选中或不选中）显示一个或另一个可绘制对象的说明。
为了使
ListView到 运行 高效，建议（但不是必需）实施ViewHolder模式，如下所示：
适配器内部：
@Override
public View getView(int position, View convertView, ViewGroup parent) {
final ViewHolder viewHolder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.list_item, parent, false);
viewHolder = new ViewHolder(convertView);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.checkedTextView.setText(filteredList.get(position));
return convertView;
}
static class ViewHolder {
final CheckedTextView checkedTextView;
private ViewHolder(View convertView) {
checkedTextView = (CheckedTextView) convertView.findViewById(R.id.listentry);
}
}
您链接的代码不包含我建议的所有更改。例如，songlist_item 不引用选择器。最重要的是，我不想处理 MediaPlayer 准备回调的细节。因此，我为您的问题做了一个最小但完整且可验证的示例。请单独测试和理解代码，然后将其编织到您的项目中。
主要活动：
public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ListView listView = findViewById(R.id.list);
ArrayList<String> songdetails = new ArrayList<>();
songdetails.add("Song1");
songdetails.add("Song2");
songdetails.add("Song3");
CustomArrayAdapter adapter = new CustomArrayAdapter(this, R.layout.listitem, songdetails);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
listView.setItemChecked(i, true);
// the selected song can be found at position i of songdetails
// start playing the selected song here
}
});
}
}
CustomArrayAdapter:
public class CustomArrayAdapter extends ArrayAdapter<String> {
private final Activity context;
private final int resource;
private ArrayList<String> songlist;
CustomArrayAdapter(Activity context, int resource, ArrayList<String> songlist) {
super(context, resource);
this.context = context;
this.resource = resource;
this.songlist = songlist;
}
@Override
public int getCount() {
return songlist.size();
}
@NonNull
@Override
public View getView(int position, View convertView, @NonNull ViewGroup parent) {
final ViewHolder holder;
String song = songlist.get(position);
LayoutInflater inflater = context.getLayoutInflater();
if (convertView == null) {
convertView = inflater.inflate(resource, parent, false);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.checkedTextView.setText(song);
return convertView;
}
static class ViewHolder {
final CheckedTextView checkedTextView;
private ViewHolder(View convertView) {
checkedTextView = convertView.findViewById(R.id.tvChecked);
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice" />
listitem.xml
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tvChecked"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableStart="@drawable/checkedstatelist" />
和checkedstatelist.xml（居住在res/drawable/）：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:drawable/ic_media_play" android:state_checked="true" />
<item android:drawable="@android:drawable/ic_media_pause" android:state_checked="false" />
</selector>
这是结果：