HorizontalScrollView 还是 Carrousel？

Question

我想创建一个 HorizontalScrollView，但其中有一些 "effects"，例如 example, or this other example. The thing is that I don't know how many items I'll have to use; I get the ImageView from an API so it should be dynamic. How can I make that effect that if it's selected it becomes bigger with the TextView below? The closest example I found on SO is 。这正是我所需要的，但我已经测试了给出的答案并且它对我不起作用......但是问题中的图像正是我想要的。谁能指导我这样做？

假设我将用 5 个 ImageView 仅用于测试 对其进行测试，那么如何动态添加这些 ImageView 的示例会很好我也是。

另一个例子是 Snapchat APP 但不同之处在于我想对所选内容添加一些效果，例如使其变大等。

编辑

我想举一个例子，说明如何像自定义 HorizontalScrollView 一样使用布局（适配器），最重要的是，如果可能的话，可以为单击的效果添加效果，我想要适配器，因为我会当然需要点击该项目。我认为我应该像@UncaughtException 对我说的那样使用 RecycleView，因为我不知道我会得到多少图像，我必须把它放在我的应用程序上，所以我认为这就是解决方案。

这将是 Snapchat HoritzontalScrollView and This image from a SO question

之间的混合

Answer 1

第 1 步：

在 ViewPager 中水平显示图像。

第 2 步：

对单击的项目应用 ScaleAnimation class 以放大它。这可以在 ViewPager 的 PagerAdapter.

的 instantiateItem() 方法中完成

此外，还有一些现成的开源小部件可用，例如 CoverFlow and FancyCoverFlow。您可能想查看源代码以了解它们是如何工作的。

编辑：

首先，关于如何处理未知数量图像的问题，您应该意识到在所有此类小部件（ListView、GridView、ViewPager 等）中，来自 API 的对象的数量一开始总是未知的，即当收到 API 响应时它就已知了。因此，如果您首先以正常方式实现 ViewPager，您将看到它是如何处理的。基本上，您必须使用 Adapter 和模型对象来填充 ViewPager 或 ListView。 API 响应将是 JSON 或 XML，解析后，您将知道确切的项目数。

所以我认为您应该首先以正常方式实现 ViewPager。有许多示例可用于此。两个有趣的是 this one and this one。它们对您的情况很有趣，因为它们还包含如何放大图像的示例代码。

现在来到第二个问题：我们如何放大图像。为此，一种方法是使用 ScaleAnimation class。例如，假设您想将图像围绕其中心放大 100%：

ScaleAnimation scaleAnimation =  new ScaleAnimation(1.0f, 1.5f,
                                                    1.0f, 1.5f,
                                                        Animation.RELATIVE_TO_SELF, 0.5f,
                                                        Animation.RELATIVE_TO_SELF, 0.5f);

scaleAnimation.setDuration(200);
scaleAnimation.setInterpolator(new AccelerateDecelerateInterpolator());

imageView.startAnimation(scaleAnimation);

我会在 ViewPager 的 PagerAdapter 的 instantiateItem() 方法中的图像上使用此代码。这应该工作。或者您可以尝试前面两个示例之一中的缩放动画方法。

恐怕您将不得不尝试使用这些示例作为指导来创建一个工作项目。然后我们可以进一步讨论您面临的任何其他问题。我相信这可以很容易地完成，而且我知道你可以做到。最好的...

编辑 2：

根据你给出的两个例子，你见过this and this吗？那是你要找的吗？它是否让您更接近解决问题？

Answer 2

在你的情况下，你绝对可以使用 ViewPager，但如果我是你，我会选择 RecyclerView，其中 LinearLayoutManager 的方向设置为 Horizontal，所以你不需要HorizontalScrollView，使用RecyclerView你也会得到你正在寻找的adapter..

现在为了 scale 或在 click 上显示一些其他效果以区别于其他人，您可以 Animate 该特定视图，

我已经为此编写了一些演示代码，在这里发布了所需的文件，如果这是您想要的，请告诉我，

Activity

/**
  * Created by Satyen on 10/27/15.
  **/
public class SlidingDrawerActivity extends Activity {

   RecyclerView rcyList;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_scroll_list);

        rcyList = (RecyclerView) findViewById(R.id.rcyList);

        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        rcyList.setLayoutManager(layoutManager);

       /* rcyList.addItemDecoration(
                new DividerItemDecoration(this, null));*/
        MyRecyclerViewAdapter myRecyclerAdapter = new MyRecyclerViewAdapter(this);
        rcyList.setAdapter(myRecyclerAdapter);

    }


}

Activity布局

<!-- layout_scroll_list.xml -->

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

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_weight="1">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcyList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/holo_blue_dark"
        android:paddingLeft="8dp"
        android:paddingRight="8dp" />

</FrameLayout>
</LinearLayout>

适配器

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.CustomViewHolder> {

private Context mContext;
View animatedView = null;

public MyRecyclerViewAdapter(Context context) {
    this.mContext = context;
}

@Override
public CustomViewHolder onCreateViewHolder(ViewGroup viewGroup, final int i) {
    final View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_row, null);


    CustomViewHolder viewHolder = new CustomViewHolder(view);
    /*final Animation a = AnimationUtils.loadAnimation(mContext, R.anim.scale_up);*/
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            // You can tweak with the effects here
            if (animatedView == null) {
                animatedView = view;
            } else {
                animatedView.setAnimation(null);
                animatedView = view;
            }
            ScaleAnimation fade_in = new ScaleAnimation(1f, 1.3f, 1f, 1.3f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            fade_in.setDuration(100);     // animation duration in milliseconds
            fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
            view.startAnimation(fade_in);
        }
    });
    return viewHolder;
}

@Override
public void onBindViewHolder(CustomViewHolder customViewHolder, int i) {
    //Setting text view title
    customViewHolder.textView.setText("Data No. " + i);
}

@Override
public int getItemCount() {
    return 10;
}

public class CustomViewHolder extends RecyclerView.ViewHolder {
    protected ImageView imageView;
    protected TextView textView;

    public CustomViewHolder(View view) {
        super(view);
        this.imageView = (ImageView) view.findViewById(R.id.thumbnail);
        this.textView = (TextView) view.findViewById(R.id.title);
    }
}
}

适配器行布局

<!-- list_row.xml -->
<?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="100dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical">

<RelativeLayout
    android:layout_width="80dp"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/thumbnail"
        android:layout_centerHorizontal="true"
        android:text="dafdafda"
        android:textColor="#222"
        android:textSize="12sp" />

</RelativeLayout>

</LinearLayout>

除此之外，您还可以使用 TwoWayView 来实现 HorizontalListView、

的功能

以上只是一些演示代码，可能需要进行一些调整，如果有帮助请告诉我或进一步询问...

同时添加输出的屏幕截图..

HorizontalScrollView 还是 Carrousel？

HorizontalScrollView or Carrousel?

android

android-animation

android-imageview

android-viewpager

编辑

Horizo​​ntalScrollView 还是 Carrousel？

HorizontalScrollView or Carrousel?

android

android-animation

android-imageview

android-viewpager

编辑

HorizontalScrollView 还是 Carrousel？