【问题标题】:HorizontalScrollView or Carrousel?Horizo​​ntalScrollView 还是 Carrousel?
【发布时间】:2015-10-19 16:58:16
【问题描述】:

我想创建一个HorizontalScrollView,但里面有一些“效果”,比如这个example,或者这个other example。问题是我不知道我必须使用多少物品。我从 API 获得了ImageView,所以它应该是动态的。如果选择它,我怎样才能产生这种效果,它会随着下面的TextView 而变大?我在 SO 上找到的最接近的例子是here。这正是我所需要的,但我已经测试了给出的答案,但它对我不起作用......但问题中的图像正是我想要的。谁能指导我这样做?

假设我将使用 5 ImageView 对其进行测试 仅用于测试,因此如何动态添加这些 ImageView 的示例对我也有好处。

另一个例子是Snapchat APP,但不同的是我想对选中的对象添加一些效果,比如让它变大或其他什么。

编辑

我想举一个例子来说明如何使用带有布局(适配器)的自定义 Horizo​​ntalScrollView,最重要的是,如果可以为单击的效果添加效果,我想要适配器,因为我需要让项目点击当然。我认为我应该使用 RecycleView 作为@UncaughtException 对我说的事情,因为我不知道我会得到多少图像并且我必须放在我的应用程序上,所以我认为这是解决方案。

这将是 Snapchat HoritzontalScrollViewThis image from a SO question 之间的混合

【问题讨论】:

  • 想要实施哪种解决方案? stackoverflow 的问题或 other example lins 中的问题
  • @Blackbelt 我的意思是发布在问题上的图片。
  • 这可以通过 ViewPager 实现。
  • 所以当我选择其中一个 ImageView 时,它会比其他的大吗?我可以用 ViewPager 做到这一点吗?
  • 你应该使用水平回收视图来获得它。 example

标签: android android-viewpager android-animation android-imageview


【解决方案1】:

在您的情况下,您绝对可以使用ViewPager,但如果我是您,我会选择RecyclerView,其方向设置为LinearLayoutManager,其方向设置为Horizontal,因此您不需要HorizontalScrollView,并使用RecyclerView,您还将获得您正在寻找的adapter 的东西..

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

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

活动

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

适配器

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

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

还添加了输出的截图..

【讨论】:

  • 你成功了!我需要查看它是否有效的最后一个东西,我需要scale_up 动画。
  • 抱歉,您可以忽略我们在代码中没有使用的那一行,我正在编辑答案
  • 我应该如何使用这些图标,我的意思是这是来自 API 的调用,所以我需要根据需要填写它,你明白了吗?
  • 另外一件事,你知道为什么如果我选择一个数据号。 X 和我水平滚动,然后我回到它没有缩放?
  • 你的意思是从 url 显示它们对吗?如果我没记错,那么您可以使用ImageLoading 库,如UniversalImageLoaderPicasso,在onBindViewHolder() 方法中,您可以相应地更新图像
【解决方案2】:

第 1 步:

ViewPager 中水平显示图像。

第 2 步:

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

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

编辑:

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

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

现在来到第二个问题:我们如何放大图像。为此,一种方法是使用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:

根据你给出的两个例子,你见过thisthis吗?那是你要找的吗?它是否让您离解决问题更近了一步?

【讨论】:

  • 我已经看到了CoverFlow,但是你知道我是否可以使用类似image 的东西来做到这一点吗?
  • 我已经给出了上面的方法......如果你正确应用它,那么我相信它会工作...... :)
  • 你知道我是否可以使用FancyCoverFlow 来处理那些不旋转的图像吗?我的意思是那些图像就像转动了我想要它没有旋转
  • 绝对......我很惊讶没有其他人试图回答它......我会尽快发布一个更好的答案...... :)
  • 当然......很快再和你谈谈...... :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-18
  • 2014-07-22
相关资源
最近更新 更多