如何在android viewpager / imageview中显示图像上的花哨框架？

Question

我开发了一个应用程序，可以显示位于drawable文件夹中的图像。我使用了imageview / viewpager。但是，我想显示下面显示的框架。在图像的顶部，使图像看起来更加花哨..此外，框架应该与图像一起滑动......这样它看起来更漂亮......我在想在图像上永久地创建它...通过photoshop ...但我并不喜欢这个想法..所以我认为可能是android有一些东西....我是android初学者...所以任何代码帮助以及解释将不胜感激。以下是我的代码..

Mainactivity.java

import android.app.Activity;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;

public class MainActivity extends Activity {

    MediaPlayer oursong;
    ViewPager viewPager;
    ImageAdapter adapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         oursong = MediaPlayer.create(MainActivity.this, R.raw.a);
         oursong.seekTo(0);
         oursong.start();

         viewPager = (ViewPager) findViewById(R.id.view_pager);
         adapter = new ImageAdapter(this);
         viewPager.setAdapter(adapter);


         viewPager.setOnPageChangeListener(MyViewPagerListener);
    }



    private int pos = 0;
    @Override
    protected void onPause() {
            super.onPause();

           if(oursong != null){
               pos = oursong.getCurrentPosition();
               oursong.release();
               oursong = null;
            }
    }

    @Override
    protected void onResume(){
          super.onResume();

         oursong = MediaPlayer.create(MainActivity.this, R.raw.a);
         oursong.seekTo(pos); // You will probably want to save an int to restore here
         oursong.start();
    }


   private final OnPageChangeListener MyViewPagerListener = new OnPageChangeListener() {

            @Override
            public void onPageSelected(int pos) {
              if (pos == adapter.getCount() - 1){
                 // adding null checks for safety
                 if(oursong != null){
                    oursong.pause();
                 }

               } else if (!oursong.isPlaying()){ 

                // adding null check for safety
                if(oursong != null){
                    oursong.start();
                }
              }         
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
             // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

            }
        };

 }

Imageadapter.java

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ImageAdapter extends PagerAdapter {
    Context context;
    private int[] GalImages = new int[] {
        R.drawable.one,
        R.drawable.two,
        R.drawable.three,
        R.drawable.four,
        R.drawable.five
    };
    ImageAdapter(Context context){
        this.context=context;
    }
    @Override
    public int getCount() {
      return GalImages.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
      return view == ((ImageView) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      ImageView imageView = new ImageView(context);
      int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small);
      imageView.setPadding(padding, padding, padding, padding);
      imageView.setScaleType(ImageView.ScaleType.FIT_XY);
      imageView.setImageResource(GalImages[position]);
      ((ViewPager) container).addView(imageView, 0);
      return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      ((ViewPager) container).removeView((ImageView) object);
    }
  }

activity_main.xml中

<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"
    tools:context=".MainActivity"
    android:icon="@drawable/icon" >



          <android.support.v4.view.ViewPager
          android:id="@+id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent" 
         android:icon="@drawable/icon" />
           <ImageView
        android:id="@+id/swipe_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/swipe_left" />

    <ImageView
        android:id="@+id/swipe_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/swipe_right" />

</RelativeLayout>

被修改

框架下隐藏的图像部分

Answer 1

您可以使用LayerDrawable

来完成

  

管理其他Drawable数组的Drawable。这些是绘制的   按数组顺序，因此将绘制具有最大索引的元素   顶部。

您有两种选择可以使用LayerDrawable。您可以在单独的可绘制xml中定义它，然后只需在ImageView中设置图像，也可以动态配置LayerDrawable在你的代码中。

以编程方式使用代码

Resources r = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = r.getDrawable(R.drawable.yourImage);;
layers[1] = r.getDrawable(R.drawable.yourFrame);
LayerDrawable layerDrawable = new LayerDrawable(layers);
imageView.setImageDrawable(layerDrawable);

现在您的ImageView设置了两张图片（1.your image和2.Frame）。

修改：

在ImageAdapter中，您需要修改instantiateItem(ViewGroup container, int position)类似

的内容

@Override
public Object instantiateItem(ViewGroup container, int position) {
  ImageView imageView = new ImageView(context);
  int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small);
  imageView.setPadding(padding, padding, padding, padding);
  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  Resources r = context.getResources();
  Drawable[] layers = new Drawable[2];
  layers[0] = r.getDrawable(GalImages[position]);
  layers[1] = r.getDrawable(R.drawable.yourFrame);
  LayerDrawable layerDrawable = new LayerDrawable(layers);
  imageView.setImageDrawable(layerDrawable);
  ((ViewPager) container).addView(imageView, 0);
  return imageView;
} 

修改2

由于图像的某些部分隐藏在框架下方，因此您需要先设置图像的宽度和高度，然后才能在ImageView中使用它。有一些可能是最佳宽度和高度组合的计算对于您的图像，它将与您的框架完全匹配。用于设置图像的高度和宽度

@Override
public Object instantiateItem(ViewGroup container, int position) {
  ImageView imageView = new ImageView(context);
  int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_small);
  imageView.setPadding(padding, padding, padding, padding);
  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  Resources r = context.getResources();
  Bitmap bmp = BitmapFactory.decodeResource(r, GalImages[position]);
  int width=200;//set your width
  int height=200;//set your height
  Bitmap resizedbitmap = Bitmap.createScaledBitmap(bmp, width, height, true);
  Drawable d = new BitmapDrawable(r,resizedbitmap);
  Drawable[] layers = new Drawable[2];
  layers[0] = d;
  layers[1] = r.getDrawable(R.drawable.yourFrame);
  LayerDrawable layerDrawable = new LayerDrawable(layers);
  imageView.setImageDrawable(layerDrawable);
  ((ViewPager) container).addView(imageView, 0);
  return imageView;
} 

使用XML

创建一个新的Drawable XML文件，我们称之为mylayer.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/yourimage" />
  <item android:drawable="@drawable/yourframe" />
</layer-list>

现在，在您的Activity中使用Drawable设置图像：

imageView.setImageDrawable(getResources().getDrawable(R.layout.mylayer));

我希望这能为您提供实现目标的基本思路。