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> 

評分截圖以上代碼 使用這個鏈接