HorizontalScrollView还是Carrousel?

9
我想创建一个HorizontalScrollView,但其中需要一些“效果”,就像这个example或者这个other example。问题在于我不知道我将使用多少项;我从API中获取ImageView,所以它应该是动态的。如何使其被选中时变得更大,并且下面有TextView?我在SO上找到的最接近的示例是here。那正是我需要的,但我已经尝试了给出的答案,但它对我没有用……但问题中的图片恰好是我想要的。有人可以指导我如何做吗?

假设我将使用5个ImageView 仅用于测试,因此提供一个动态添加这些ImageView的示例也对我有好处。

另一个示例是 Snapchat APP,但不同之处在于我想在所选内容上添加一些效果,例如使其变大或其他。

编辑

我想要一个示例,类似于带有布局(适配器)的自定义HorizontalScrollView,并且最重要的是,如果可能的话,为所选项添加效果,我需要适配器,因为我当然需要获取所选项目。我认为我应该像@UncaughtException对我说的那样使用RecycleView,因为我不知道我会得到多少图像并且我将不得不将它们放在我的APP上,所以我认为这是解决方案。

它将是Snapchat HoritzontalScrollView来自SO问题的此图像的混合体。


1
这可以通过ViewPager实现。 - Blackbelt
那么,当我选择其中一个 ImageView 时,它会比其他的更大吗?我可以用 ViewPager 来实现这个功能吗? - Skizo-ozᴉʞS ツ
这可能不是最佳实现方式,也不会自动发生,但它是可行的。 - Blackbelt
我想变大,让用户知道哪个ImageView被选中了...这就是为什么我认为这个链接或这个链接会很好... - Skizo-ozᴉʞS ツ
1
你应该使用水平的RecyclerView来实现这个功能。示例 - Tushar Gogna
显示剩余6条评论
2个回答

7
在您的情况下,您肯定可以使用ViewPager,但如果我是您,我会选择使用RecyclerView,并使用其方向设置为HorizontalLinearLayoutManager,这样您将不需要HorizontalScrollView,并且使用RecyclerView,您还将获得所需的adapter
现在,为了对某些视图进行缩放或显示其他效果以使其与其他视图区分开来,您可以对该特定视图进行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);

    }


}

活动布局

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

Adapter

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的功能。

上面只是一些演示代码,可能需要进行一些微调,请让我知道这是否有所帮助或者需要进一步解释...

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

Layout when none of the item is clicked

Layout when second item is clicked


我应该如何使用这些图标,我的意思是这是来自API的调用,所以我需要根据它的需求填充它,你明白我的意思吗? - Skizo-ozᴉʞS ツ
还有一件事,你知道为什么如果我选择一个数据编号X,然后水平滚动并返回它,它就没有缩放吗? - Skizo-ozᴉʞS ツ
你的意思是从 URL 显示图片,对吗?如果我没错的话,你可以使用像 UniversalImageLoaderPicasso 这样的 ImageLoading 库,在 onBindViewHolder() 方法中可以相应地更新图片。 - Satyen Udeshi
是的,这是因为视图回收,每次滚动并返回时都会调用onCreateViewHolder(),因此它会失去缩放效果。让我看看我能做些什么。 - Satyen Udeshi
让我们在聊天中继续这个讨论 - Satyen Udeshi
显示剩余2条评论

4

步骤1:

ViewPager中水平显示图片。

步骤2:

对点击的项目应用ScaleAnimation类来放大它。这可以在ViewPagerPagerAdapterinstantiateItem()方法中完成。

此外,还有一些现成的开源小部件可供使用,例如CoverFlowFancyCoverFlow。您可能需要查看源代码以了解它们的工作原理。

编辑:

首先,关于您如何处理未知数量的图像的问题,您应该意识到,在所有这些小部件(ListViewGridViewViewPager等)中,来自API的对象数量都是未知的,即在收到API响应时才会知道。因此,如果您首先以正常方式实现ViewPager,您将看到如何处理此问题。基本上,您必须使用Adapter和模型对象来填充ViewPagerListView。API响应将是JSON或XML,在解析它之后,您将知道确切的项目数量。

因此,我认为您应该首先以正常方式实现ViewPager。有很多可用的示例。其中两个有趣的示例是这个这个。它们对您的情况很有趣,因为它们还包含了如何放大图像的示例代码。

现在来到第二个问题:我们如何放大图像。一种方法是使用ScaleAnimation类。例如,假设您想将图像沿中心放大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);

我会在ViewPagerPagerAdapterinstantiateItem()方法中使用这段代码来处理图像。这应该有效。或者你可以尝试在前两个示例中的一个中使用缩放动画的方法。

恐怕你必须尝试创建一个可工作的项目,并以这些示例作为指南。然后我们可以进一步讨论你遇到的任何其他问题。我相信这可以很容易地完成,而且我知道你能做到。祝好运...

编辑2:

根据你提供的两个示例,你看过这个这个了吗?那是不是你正在寻找的?这是否使你更接近解决问题?


我已经看过了CoverFlow,但是你知道我是否可以使用类似于这个图片来实现它吗? - Skizo-ozᴉʞS ツ
我已经提供了上述方法...如果您正确应用它,我相信它会起作用... :) - Yash Sampat
你知道我是否可以在不旋转这些图片的情况下使用FancyCoverFlow吗?我的意思是这些图片像被翻转了,我希望它们没有旋转。 - Skizo-ozᴉʞS ツ
你可以学习这些库的源代码并修改它以适应你自己的需求... :) - Yash Sampat
这就是我不知道最好的解决方案,有人告诉我最好的解决方案是使用RecycleView,然后将其放在Horitzontalsxrollview上,而你说要使用ViewPager。我真的不在乎使用什么,我只想让它看起来像我编辑中的这两个示例。 - Skizo-ozᴉʞS ツ
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接