Android 图片库布局设计

Question

请帮助我解决有关图库的问题。通常发现常规图库是线性或直线方式，即沿着直线一个接一个地图像。是否有可能以某种方式显示围绕圆形路径旋转的图像。如下所示：

Answer 1

我们需要创建 2 个 xml 文件，1) 用于椭圆形可绘制对象，2) 用于布局设计。创建以下 2 个文件并将其添加到您的项目中。

drwbl_ovalview.xml (res --> drawable)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke
        android:width="5dp"
        android:color="#5EC7F1" />
</shape>

activity_main.xml (res --> layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_margin="16dp">

        <ImageView
            android:id="@+id/imgvw_ovalview"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_margin="25dp"
            android:src="@drawable/drwbl_ovalview"
            android:contentDescription="Images"/>

        <ImageView
            android:id="@+id/imgvw_yahoo"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:src="@drawable/yahoo_icon"
            android:contentDescription="Yahoo images"/>

        <ImageView
            android:id="@+id/imgvw_messenger"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_centerHorizontal="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/messenger_icon"
            android:contentDescription="Messenger images"/>

        <ImageView
            android:id="@+id/imgvw_google"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:src="@drawable/google_icon"
            android:contentDescription="Google images"/>

        <ImageView
            android:id="@+id/imgvw_facebook"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:src="@drawable/facebook_icon"
            android:contentDescription="Facbook image"/>
    </RelativeLayout>

</LinearLayout>

查看以上代码的截图

Answer 2

用过这个 link...

https://github.com/ludovicroland/carousel-android

Gradle

 compile 'fr.rolandl:carousel:1.0.1@aar'

专家

<dependency>
<groupId>fr.rolandl</groupId>
<artifactId>carousel</artifactId>
<version>1.0.1</version>
<type>aar</type>
</dependency>

作为图书馆项目

或者，查看此存储库并将其添加为库项目。

$git克隆https://github.com/ludovicroland/carousel-android.git 将项目导入您最喜欢的 IDE 并将 android.library.reference.1=/path/to/carousel-android/library 添加到您的 project.properties.

布局

您需要将 Carousel 直接声明到您的布局中。

<fr.rolandl.carousel.Carousel
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/carousel"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
android:animationDuration="200"
 />

项目

项目应与业务对象（经典 pojo）相关联，例如：

public final class Photo
implements Serializable
{

private static final long serialVersionUID = 1L;

public final String name;

public final String image;

 public Photo(String name, String image)
 {
this.name = name;
this.image = image;
}

}

具有特定布局，例如：

 <TextView
 android:id="@+id/name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textColor="@android:color/black"
 />

并且使用 CarouselItem 应该覆盖 extractView 和更新方法：

  public final class PhotoItem
  extends CarouselItem<Photo>
  {

 private ImageView image;

 private TextView name;

 private Context context;

    public PhotoItem(Context context)
   {
   super(context, R.layout.item);
   this.context = context;
   }

  @Override
 public void extractView(View view)
 {
   image = (ImageView) view.findViewById(R.id.image);
   name = (TextView) view.findViewById(R.id.name);
 }

@Override
public void update(Photo photo)
 {
  image.setImageResource(getResources().getIdentifier(photo.image, "drawable", context.getPackageName()));
  name.setText(photo.name);
}

  }

适配器

您还必须创建自己的适配器，在其构造函数中获取业务对象列表：

 public final class MyAdapter
extends CarouselAdapter<Photo>
{

 public MyAdapter(Context context, List<Photo> photos)
{
  super(context, photos);
 }

 @Override
 public CarouselItem<Photo> getCarouselItem(Context context)
 {
  return new PhotoItem(context);
}

 }

在Activity/Fragment

在activity或使用轮播的片段中，您可以找到它的参考：

 final Carousel carousel; = (Carousel) findViewById(R.id.carousel);
 create your list of business objects:

 final List<Photo> photos = new ArrayList<>();
 photos.add(new Photo("Photo1", "fotolia_40649376"));
photos.add(new Photo("Photo2", "fotolia_40973414"));
photos.add(new Photo("Photo3", "fotolia_48275073"));
photos.add(new Photo("Photo4", "fotolia_50806609"));
photos.add(new Photo("Photo5", "fotolia_61643329"));

创建适配器实例：

 final CarouselAdapter adapter = adapter = new MyAdapter(this, photos);
carousel.setAdapter(adapter);
adapter.notifyDataSetChanged();

听众

你也可以在轮播上使用一些监听器。

OnItemClickListener：

  carousel.setOnItemClickListener(new OnItemClickListener()
  {

   @Override
   public void onItemClick(CarouselBaseAdapter<?> carouselBaseAdapter, View view, int position, long id)
   {
   Toast.makeText(getApplicationContext(), "The item '" + position + "' has been clicked", Toast.LENGTH_SHORT).show();
    carousel.scrollToChild(position);
    }

 });

OnItemLongClickListener：

   carousel.setOnItemLongClickListener(new OnItemLongClickListener()
    {

  @Override
  public boolean onItemLongClick(CarouselBaseAdapter<?> carouselBaseAdapter, View view, int position, long id)
   {
    Toast.makeText(getApplicationContext(), "The item '" + position + "' has been long clicked", Toast.LENGTH_SHORT).show();
    carousel.scrollToChild(position);
    return false;
   }

   });

另请参阅此 link..

https://github.com/panhuachao/Android-3D-Carousel

Android 图片库布局设计

Android Image Gallery layout design

android

android-layout

image-gallery