Android图片库布局设计

Question

请帮我对图片库有疑问。常规图像廊通常被认为是线性或直线方式，即沿着直线一个接一个的图像。是否可能以某种方式显示围绕圆形路径旋转的图像。如下图所示：

Answer 1

...

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

摇篮

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

Maven的

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

由于图书馆项目

Alternati请检查此资源库并将其添加为库项目。

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

布局

您需要将旋转木马直接声明到布局中。

<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" 
/> 

，并应覆盖extractView和更新方法CarouselItem：

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

在活动或使用该转盘的片段，你可以找到它的参考：

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; 
    } 

    }); 

也看到这个链接..

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

Answer 2

我们需要创建2 XML文件，1）绘制椭圆形和2）布局设计。创建2个以下的文件并将其添加到您的项目中。

drwbl_ovalview.xml（RES - >绘制）

<?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 - >布局）的

<?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> 

评分截图以上代码 使用这个链接