如何在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，管理其他Drawables数组。 这些是按数组顺序绘制的，因此具有最大索引的元素将绘制在顶部。

您有两种选择来使用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));

我希望这能为您提供实现您想要的基本想法。