Seekbar在可點擊的圖片上查看

Question

我很新，所以很抱歉，如果很簡單。我有一個2 * 4的GridLayout，圖像可以被點擊，圖像變化和聲音播放。

我想添加一個音量控制在每個圖像的頂部，這將控制圖像噪音音量。我怎樣才能做到這一點？

<GridLayout 
     android:id="@+id/mainGrid" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:background="@color/colorPrimary" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent"> 

     <ImageView 
      android:id="@+id/whitenoise" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="0" 
      android:layout_columnWeight="1" 
      android:layout_gravity="fill" 
      android:layout_row="0" 
      android:layout_rowWeight="1" 
      android:adjustViewBounds="true" 
      android:background="@android:color/transparent" 
      android:onClick="whiteNoiseTapped" 
      android:scaleType="fitXY" 
      android:text="White 1" 
      app:srcCompat="@drawable/whitenoise" /> 

Answer 1

Use FrameLayout for this. 

<FrameLayout> 

<ImageView> 
android:id="@+id/whitenoise" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_column="0" 
      android:layout_columnWeight="1" 
      android:layout_gravity="fill" 
      android:layout_row="0" 
      android:layout_rowWeight="1" 
      android:adjustViewBounds="true" 
      android:background="@android:color/transparent" 
      android:onClick="whiteNoiseTapped" 
      android:scaleType="fitXY" 
      android:text="White 1" 
      app:srcCompat="@drawable/whitenoise" 
<ImageView> 

<Button > 
</Button> 

</FrameLayout> 

Answer 2

你也可以像下面的方式

layout.xml to some extent like this... 

<?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:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
android:background="#000" 
tools:context="com.example.tistis.myapplication.MainActivity"> 

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 

    android:numColumns="2" 
    android:verticalSpacing="10dp" 
    android:horizontalSpacing="10dp" 
    android:stretchMode="columnWidth" 
    android:gravity="center" 

    /> 

和你ImageAdapter.java

下面的代碼。請注意，從 適配器編碼是一種骯髒的方式，而應該使適配器膨脹一個視圖。

class ImageAdapter extends BaseAdapter { 
     private Context mContext; 

     public int screenHeight,screenWidth; 
     public ImageAdapter(Context c) { 
      mContext = c; 
      DisplayMetrics displaymetrics = new DisplayMetrics(); 
      ((Activity)c).getWindowManager(). 
       getDefaultDisplay().getMetrics(displaymetrics); 
      screenHeight = displaymetrics.heightPixels; 
      screenWidth = displaymetrics.widthPixels; 
     } 

     public int getCount() { 
      return mThumbIds.length; 
     } 

     public Object getItem(int position) { 
      return null; 
     } 

     public long getItemId(int position) { 
      return 0; 
     } 


     public View getView(final int position, 
     View convertView, ViewGroup parent) { 
      ImageView imageView=null; 
      RelativeLayout frm; 
      SeekBar seekBar=null; 
      if (convertView == null) { 
       // if it's not recycled, initialize some attributes 
       frm= new RelativeLayout(mContext); 
       frm.setLayoutParams(new GridView.LayoutParams(screenWidth/2-(8*2+10),screenWidth/2-(8*2+10))); 
       frm.setPadding(8, 8, 8, 8); 
       frm.setBackgroundColor(Color.BLACK); 

       imageView = new ImageView(mContext); 
       imageView.setLayoutParams(
       new FrameLayout.LayoutParams(
         RelativeLayout.LayoutParams.MATCH_PARENT, 
         RelativeLayout.LayoutParams.MATCH_PARENT)); 
       imageView.setScaleType(ImageView.ScaleType.FIT_XY); 
       imageView.setBackgroundColor(Color.BLACK); 
       frm.addView(imageView); 

       imageView.setOnClickListener(
        new View.OnClickListener() { 
        @Override 
        public void onClick(View view) { 
         Toast.makeText(mContext, 
         "Item position "+(position+1), 
         Toast.LENGTH_SHORT).show(); 
        } 
       }); 


       seekBar=new SeekBar(mContext); 

       seekBar.setLayoutParams(
       new RelativeLayout.LayoutParams(
       RelativeLayout.LayoutParams.MATCH_PARENT, 40)); 
       RelativeLayout.LayoutParams lp= 
      (RelativeLayout.LayoutParams) 
       seekBar.getLayoutParams(); 
       lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); 
       seekBar.setMax(15); 
    //  seekBar.setIndeterminate(true); 

       ShapeDrawable thumb = 
       new ShapeDrawable(new OvalShape()); 

       thumb.setIntrinsicHeight(80); 
       thumb.setIntrinsicWidth(30); 
       seekBar.setThumb(thumb); 
       seekBar.setProgress(1); 
       seekBar.setVisibility(View.VISIBLE); 
       seekBar.setBackgroundColor(Color.TRANSPARENT); 

       frm.addView(seekBar); 

      } else { 
       frm = (RelativeLayout) convertView; 
      } 


      if(imageView!=null) 
       imageView.setImageResource(mThumbIds[position]); 
      return frm; 
     } 

     // references to our images 
     private Integer[] mThumbIds = { 
       R.drawable.superman, R.drawable.superman, 
       R.drawable.superman, R.drawable.superman, 

     }; 
    }