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

Question

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

主要活动。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

            }
        };

 }

图像适配器。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);
    }
  }

活动_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来完成

管理一系列其他可绘制内容的可绘制内容。这些元素按数组顺序绘制，因此索引最大的元素将绘制在顶部。

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

现在，您的图像视图设置了两个图像（1.your image和2.Frame）。

编辑：

在您的ImageAdapter中，您需要修改instantiateItem（ViewGroup容器，int位置）类似的内容

@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

由于图像的某些部分隐藏在框架下，在将其用于图像视图之前，需要设置图像的宽度和高度。计算出适合你的图像的最佳宽度和高度组合，使其与你的相框完全吻合。用于设置图像的高度和宽度

@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

创建一个新的可绘制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>

现在，在活动中，使用该绘图设置图像：

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

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