android gridview中嵌套progressbar
根据需求的要求：当收听过的歌曲，就会有播放进度。当正在收听过的歌曲，不仅有播放进度，同时有高亮动画。从来没有听过的歌曲，显示歌曲名称就可以。
那么为了对应进度，progressbar的样式定制很关键。。。
先亮出XML 布局：
Activity的布局：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#2c2255" tools:context=".MainActivity"> <TextView android:id="@+id/tv" android:layout_width="1640px" android:layout_height="100px" android:background="#00ff00" android:layout_marginRight="100px" android:layout_alignParentRight="true" /> <GridView android:layout_below="@id/tv" android:layout_alignParentRight="true" android:id="@+id/gridview" android:layout_width="1640px" android:layout_height="match_parent" android:columnWidth="380px" android:layout_marginRight="100px" android:verticalSpacing="74px" android:horizontalSpacing="40px" android:numColumns="4" android:stretchMode="columnWidth" android:gravity="center" /> </RelativeLayout>
单条GridView的布局：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" > <!--ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="99px" android:src="@drawable/listitem_bg" android:alpha="0.1"/> <ImageView android:id="@+id/image_progress" android:visibility="gone" android:layout_width="117px" android:layout_height="99px" android:src="@drawable/listitem_bg" android:alpha="0.07"/--> <ProgressBar android:id="@+id/pb_progressbar" style="@style/mProgressBarStyle" android:layout_width="match_parent" android:layout_height="100px" android:max="100" /> <ProgressBar android:id="@+id/pb_listening_progressbar" android:visibility="gone" style="@style/mProgressBar_listeningStyle" android:layout_width="match_parent" android:layout_height="100px" android:max="100" /> <TextView android:id="@+id/textView" android:layout_marginLeft="31px" android:layout_marginTop="20px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textSize="28px" android:textColor="#ffffff" android:typeface="normal"/> <TextView android:id="@+id/textView_time" android:layout_marginLeft="28px" android:layout_marginTop="59px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textSize="22px" android:textColor="#ffffff" android:alpha="0.4" android:text="03:22" android:typeface="normal"/> <com.example.recycler.AudioColumnView android:id="@+id/acv" android:visibility="gone" android:layout_marginLeft="26px" android:layout_marginTop="30px" android:layout_width="27px" android:layout_gravity="center_horizontal" android:background="@android:color/transparent" android:layout_height="26px"/> </RelativeLayout>
mProgressBar_listeningStyle布局：
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="mProgressBarStyle" parent="@android:style/Widget.ProgressBar.Horizontal"> <item name="android:maxHeight">100px</item> <item name="android:minHeight">100px</item> <item name="android:progressDrawable">@drawable/progress_horizontal</item> <item name="android:indeterminateOnly">false</item> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> </style> <style name="mProgressBar_listeningStyle" parent="@android:style/Widget.ProgressBar.Horizontal"> <item name="android:maxHeight">100px</item> <item name="android:minHeight">100px</item> <item name="android:progressDrawable">@drawable/progress_horizontal_listening</item> <item name="android:indeterminateOnly">false</item> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> </style> </resources>
progress_horizontal.xml:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="4px" /> <solid android:color="#1Affffff"/> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:bottomLeftRadius="4px" android:bottomRightRadius="0px" android:topLeftRadius="4px" android:topRightRadius="0px" /> <solid android:color="#0Dffffff"/> </shape> </clip> </item> </layer-list>
progress_horizontal_listening.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="4px" /> <gradient android:startColor="#169c4ff3" android:centerColor="#009c4ff3" android:endColor="#319c4ff3" android:angle="270"/> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:bottomLeftRadius="4px" android:bottomRightRadius="0px" android:topLeftRadius="4px" android:topRightRadius="0px" /> <gradient android:startColor="#4c05dd" android:centerColor="#9b44ff" android:endColor="#cb81ff" android:angle="270"/> </shape> </clip> </item> </layer-list>
定义play_info类型的数据：
package com.example.recycler; import androidx.annotation.NonNull; import java.io.Serializable; public class Playlist_Info implements Serializable { private String play_list_item_name; private String play_list_item_time; private int play_list_item_progress; private boolean is_Playing; public Playlist_Info(){ } public Playlist_Info(String play_list_item_name,String play_list_item_time,int play_list_item_progress) { this.play_list_item_name = play_list_item_name; this.play_list_item_time = play_list_item_time; this.play_list_item_progress = play_list_item_progress; } public String get_item_name() {return play_list_item_name;} public void set_item_name(String play_list_item_name) {this.play_list_item_name = play_list_item_name;} public String get_item_time() {return play_list_item_time;} public void set_item_time(String play_list_item_time) {this.play_list_item_time = play_list_item_time;} public int get_item_progress() {return play_list_item_progress;} public void set_item_progress(int play_list_item_progress) {this.play_list_item_progress = play_list_item_progress;} public boolean isPlaying() {return is_Playing;} public void setIsPlaying(boolean is_playing){is_Playing = is_playing;} @NonNull @Override public String toString() { return "{" + "play_list_item_name='" + play_list_item_name + '\'' + ", play_list_item_time='" + play_list_item_time + '\'' + ", play_list_item_progress=" + play_list_item_progress + '}'; } }
GridViewAdapter.java
package com.example.recycler; import android.content.Context; import android.os.Handler; import android.os.Message; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.ProgressBar; import android.widget.RelativeLayout; import android.widget.TextView; import android.view.ViewGroup.LayoutParams; import android.view.ViewGroup.MarginLayoutParams; import com.example.recycler.AudioColumnView; import java.util.ArrayList; import java.util.List; import java.util.Random; import java.util.Timer; public class GridViewAdapter extends BaseAdapter { private String log_tag = "GridViewAdapter"; private int listening_index; private class GridHolder{ //ImageView imgback; //ImageView imgprogress; TextView textview; TextView textview_time; AudioColumnView audioColumnView; ProgressBar pb_progressbar; ProgressBar pb_listening_progressbar; } private Context context; private List<Playlist_Info> listitem; public GridViewAdapter(Context context,List<Playlist_Info> listitem){ this.context = context; this.listitem = listitem; } @Override public int getCount() { return listitem.size(); } @Override public Object getItem(int position) { return listitem.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View view, ViewGroup viewGroup) { GridHolder holder; if(view == null){ view = LayoutInflater.from(context).inflate(R.layout.playlist_item,null); holder = new GridHolder(); holder.pb_progressbar = view.findViewById(R.id.pb_progressbar); holder.pb_listening_progressbar=view.findViewById(R.id.pb_listening_progressbar); holder.textview = (TextView)view.findViewById(R.id.textView); holder.textview_time = (TextView)view.findViewById(R.id.textView_time); holder.audioColumnView = (AudioColumnView)view.findViewById(R.id.acv); view.setTag(holder); } else { holder = (GridHolder)view.getTag(); } Playlist_Info info = listitem.get(position); if(info != null) { int text_left_margin = 0; if(position == 0) { text_left_margin = 19; holder.pb_progressbar.setProgress(38); holder.pb_listening_progressbar.setVisibility(View.GONE); holder.audioColumnView.setVisibility(View.GONE); holder.textview_time.setText("已听38%"); } else if(position == 1) { text_left_margin = 67; holder.pb_listening_progressbar.setProgress(listitem.get(position).get_item_progress()); holder.pb_progressbar.setVisibility(View.GONE); holder.pb_listening_progressbar.setVisibility(View.VISIBLE); holder.audioColumnView.setVisibility(View.VISIBLE); holder.textview_time.setText("已听38%"); } else { text_left_margin = 26; holder.pb_progressbar.setProgress(0); holder.pb_progressbar.setVisibility(View.VISIBLE); holder.pb_listening_progressbar.setVisibility(View.GONE); holder.audioColumnView.setVisibility(View.GONE); holder.textview_time.setText( info.get_item_time()); } Log.d(log_tag, String.valueOf(info.get_item_name().length())); //改变字体位置 MarginLayoutParams marginLayoutParams_text = new MarginLayoutParams(holder.textview.getLayoutParams()); marginLayoutParams_text.setMargins(text_left_margin,19,0,0); RelativeLayout.LayoutParams layoutParams_text = new RelativeLayout.LayoutParams(marginLayoutParams_text); holder.textview.setLayoutParams(layoutParams_text); holder.textview.setText( sub_string(info.get_item_name())); } return view; } String sub_string(String source_string) { String sub_string = ""; if(source_string.length()<8) { sub_string = source_string; } else { sub_string=source_string.substring(0, 4)+"..."+source_string.substring(source_string.length() - 4); } return sub_string; } }
MainActivity.java
package com.example.recycler; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.os.SystemClock; import android.view.View; import android.view.Window; import android.widget.AdapterView; import android.widget.GridView; import android.widget.ProgressBar; import com.example.recycler.GridViewAdapter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Timer; import java.util.TimerTask; public class MainActivity extends AppCompatActivity { private GridView gridView; private GridViewAdapter adapter; private List<Playlist_Info> list; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (getSupportActionBar() != null){ getSupportActionBar().hide(); } gridView = (GridView)this.findViewById(R.id.gridview); list = new ArrayList<>(); for(int i = 1; i < 21;i++) { if(2 == i) { list.add(new Playlist_Info("大江东区浪淘尽，千古风流人物","3:22",30)); continue; } else { list.add(new Playlist_Info("精绝古城第"+String.valueOf(i)+"集","3:22",30)); } } adapter = new GridViewAdapter(MainActivity.this,list); gridView.setAdapter(adapter); progress_bar(1); } public void publishProgress(final int positionInAdapter, final int progress_time) { list.get(positionInAdapter).set_item_progress(progress_time); if (positionInAdapter >= gridView.getFirstVisiblePosition() && positionInAdapter <= gridView.getLastVisiblePosition()) { int positionInListView = positionInAdapter - gridView.getFirstVisiblePosition(); ProgressBar item = (ProgressBar) gridView.getChildAt(positionInListView) .findViewById(R.id.pb_listening_progressbar); item.setProgress(progress_time); } } private void progress_bar(final int positionInAdapter) { list.get(positionInAdapter).setIsPlaying(true); if (positionInAdapter >= gridView.getFirstVisiblePosition() && positionInAdapter <= gridView.getLastVisiblePosition()) { int positionInListView = positionInAdapter - gridView.getFirstVisiblePosition(); ProgressBar item_listening = (ProgressBar) gridView.getChildAt(positionInListView) .findViewById(R.id.pb_listening_progressbar); item_listening.setVisibility(View.VISIBLE); } new Thread(new Runnable() { @Override public void run() { for (int i = 1; i < 101; i++) { final int progress = i; runOnUiThread(new Runnable() { @Override public void run() { publishProgress(positionInAdapter, progress); } }); SystemClock.sleep(5000); } } }).start(); } }
效果图：
