【问题标题】:How to mimic the listView stickey-items like on Lollipop's contacts app?如何模仿棒棒糖联系人应用程序上的 listView 粘性项目?
【发布时间】:2014-12-23 13:32:23
【问题描述】:

背景

Google 最近发布了一个新版本的 Android,它有一个如下所示的联系人应用:

问题

我需要模仿这种列表,但我不知道如何做好。

这包括 3 个主要部分:

  1. 粘性标题,只要顶部联系人的姓名以此字母开头。

  2. 圆形照片或圆形+字母(适用于没有照片的联系人)

  3. PagerTitleStrip,它在项目之间具有统一的间距,并尝试在屏幕上显示所有项目(或在需要时允许滚动)。

我发现了什么

  1. 有很多第三方库,但它们会处理stickey-headers,它们是listView 本身的项目的一部分。它们的标题不在左侧,而是在项目的顶部。

    在这里,左侧的移动方式与右侧不同。它可以粘贴,如果不需要粘贴(例如,因为该部分有一个项目),它会滚动。

  2. 我注意到对于圆形照片,我可以使用名为 "RoundedBitmapDrawableFactory" 的新 (?) 类(创建 "RoundedBitmapDrawable" )。这可能会让我把一张照片很好地做成圆形。但是,它不适用于字母(用于没有照片的联系人),但我认为我可以将 textView 放在顶部,并将背景设置为颜色。

    另外,我注意到,为了很好地使用“RoundedBitmapDrawable”(使其真正成为圆形),我必须为其提供一个正方形大小的位图。否则,它的形状会很奇怪。

  3. 我尝试使用“setTextSpacing”来最小化项目之间的空间,但它似乎不起作用。我也找不到任何方法来设置/自定义 PagerTitleStrip 的样式,使其与联系人应用程序一样。

    我也尝试过使用 "PagerTabStrip" ,但也没有用。

问题

您如何模仿 Google 实现此屏幕的方式?

更具体地说:

  1. 如何使左侧的行为与联系人应用程序一样?

  2. 这是实现圆形照片的最佳方式吗?在使用特殊的drawable之前,我真的必须将位图裁剪成正方形吗?是否有关于使用哪种颜色的设计指南?有没有更正式的方式来使用圆形文本单元格?

  3. 您如何设置 PagerTitleStrip 的样式以使其具有与联系人应用程序相同的外观?


Github 项目

编辑:对于#1 和#2,我在 Github 上做了一个项目,here。遗憾的是我还发现了一个重要的错误,所以我也发布了它here

【问题讨论】:

  • 我也必须在我的应用程序中开发您问题的第一部分。也许你可以看看 PinnedHeaderListView 类 - android.googlesource.com/platform/packages/apps/ContactsCommon/…
  • @androidGuy 找到了所有这些问题的解决方案,尽管它们都不是很正式的......
  • 对于该问题的未来读者,我最近为 Android 分叉了一个粘性标头存储库,并将其设置为如上所述的“粘性侧索引”。有关代码/实现,请参阅 GitHub 上的 sticky-alphabet-index

标签: android listview android-5.0-lollipop pagertitlestrip roundedbitmapdrawable


【解决方案1】:

好的,我已经设法解决了我所写的所有问题:

1.我改变了第三方库的工作方式(我不记得我从哪里得到库,但this one 非常相似),通过改变每一行的布局,以便标题位于内容本身的左侧。这只是一个布局 XML 文件的问题,您已经完成了很多工作。也许我会为这两种解决方案发布一个不错的库。

2.这是我的观点。这不是官方的实现(没有找到),所以我自己做了一些东西。它可以更高效,但至少它很容易理解并且相当灵活:

public class CircularView extends ViewSwitcher {
    private ImageView mImageView;
    private TextView mTextView;
    private Bitmap mBitmap;
    private CharSequence mText;
    private int mBackgroundColor = 0;
    private int mImageResId = 0;

    public CircularView(final Context context) {
        this(context, null);
    }

    public CircularView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        addView(mImageView = new ImageView(context), new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT, Gravity.CENTER));
        addView(mTextView = new TextView(context), new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT, Gravity.CENTER));
        mTextView.setGravity(Gravity.CENTER);
        if (isInEditMode())
            setTextAndBackgroundColor("", 0xFFff0000);
    }

    @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        final int measuredWidth = getMeasuredWidth();
        final int measuredHeight = getMeasuredHeight();
        if (measuredWidth != 0 && measuredHeight != 0)
            drawContent(measuredWidth, measuredHeight);
    }

    @SuppressWarnings("deprecation")
    private void drawContent(final int measuredWidth, final int measuredHeight) {
        ShapeDrawable roundedBackgroundDrawable = null;
        if (mBackgroundColor != 0) {
            roundedBackgroundDrawable = new ShapeDrawable(new OvalShape());
            roundedBackgroundDrawable.getPaint().setColor(mBackgroundColor);
            roundedBackgroundDrawable.setIntrinsicHeight(measuredHeight);
            roundedBackgroundDrawable.setIntrinsicWidth(measuredWidth);
            roundedBackgroundDrawable.setBounds(new Rect(0, 0, measuredWidth, measuredHeight));
        }
        if (mImageResId != 0) {
            mImageView.setBackgroundDrawable(roundedBackgroundDrawable);
            mImageView.setImageResource(mImageResId);
            mImageView.setScaleType(ScaleType.CENTER_INSIDE);
        } else if (mText != null) {
            mTextView.setText(mText);
            mTextView.setBackgroundDrawable(roundedBackgroundDrawable);
            // mTextView.setPadding(0, measuredHeight / 4, 0, measuredHeight / 4);
            mTextView.setTextSize(measuredHeight / 5);
        } else if (mBitmap != null) {
            mImageView.setScaleType(ScaleType.FIT_CENTER);
            mImageView.setBackgroundDrawable(roundedBackgroundDrawable);
            mBitmap = ThumbnailUtils.extractThumbnail(mBitmap, measuredWidth, measuredHeight);
            final RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(),
                    mBitmap);
            roundedBitmapDrawable.setCornerRadius((measuredHeight + measuredWidth) / 4);
            mImageView.setImageDrawable(roundedBitmapDrawable);
        }
        resetValuesState(false);
    }

    public void setTextAndBackgroundColor(final CharSequence text, final int backgroundColor) {
        resetValuesState(true);
        while (getCurrentView() != mTextView)
            showNext();
        this.mBackgroundColor = backgroundColor;
        mText = text;
        final int height = getHeight(), width = getWidth();
        if (height != 0 && width != 0)
            drawContent(width, height);
    }

    public void setImageResource(final int imageResId, final int backgroundColor) {
        resetValuesState(true);
        while (getCurrentView() != mImageView)
            showNext();
        mImageResId = imageResId;
        this.mBackgroundColor = backgroundColor;
        final int height = getHeight(), width = getWidth();
        if (height != 0 && width != 0)
            drawContent(width, height);
    }

    public void setImageBitmap(final Bitmap bitmap) {
        setImageBitmapAndBackgroundColor(bitmap, 0);
    }

    public void setImageBitmapAndBackgroundColor(final Bitmap bitmap, final int backgroundColor) {
        resetValuesState(true);
        while (getCurrentView() != mImageView)
            showNext();
        this.mBackgroundColor = backgroundColor;
        mBitmap = bitmap;
        final int height = getHeight(), width = getWidth();
        if (height != 0 && width != 0)
            drawContent(width, height);
    }

    private void resetValuesState(final boolean alsoResetViews) {
        mBackgroundColor = mImageResId = 0;
        mBitmap = null;
        mText = null;
        if (alsoResetViews) {
            mTextView.setText(null);
            mTextView.setBackgroundDrawable(null);
            mImageView.setImageBitmap(null);
            mImageView.setBackgroundDrawable(null);
        }
    }

    public ImageView getImageView() {
        return mImageView;
    }

    public TextView getTextView() {
        return mTextView;
    }

}

3.我找到了一个很好的库,叫做 PagerSlidingTabStrip 。不过,没有找到一种官方的方式来设置原生样式的样式。

另一种方法是查看 Google 的示例,该示例可直接在 Android-Studio 中使用,称为“SlidingTabLayout”。它显示了它是如何完成的。

编辑:#3 更好的库是here,也称为“PagerSlidingTabStrip”。

【讨论】:

    【解决方案2】:

    您可以执行以下操作:

    1. 在 RecyclerView 的最左侧,创建一个保存字母索引的 TextView;
    2. 在 Recycler 视图的顶部(在包装它的布局中)放置一个 TextView 以覆盖您在第 1 步中创建的那个,这将是粘性的;
    3. 在您的 RecyclerView 中添加一个 OnScrollListener。在 onScrolled() 方法上,将第 2 步中创建的 TextView 设置为取自 firstVisibleRow 的参考文本。在此之前,您将拥有一个粘性索引,没有过渡的影响;
    4. 要添加淡入/淡出过渡效果,请开发一个逻辑来检查 currentFirstVisibleItem 的前一个项目是否是前一个字母列表的最后一个,或者 secondVisibleItem 是否是新字母的第一个。基于这些信息,使粘性索引可见/不可见,而行索引相反,最后添加了 alpha 效果。

         if (recyclerView != null) {
          View firstVisibleView = recyclerView.getChildAt(0);
          View secondVisibleView = recyclerView.getChildAt(1);
      
          TextView firstRowIndex = (TextView) firstVisibleView.findViewById(R.id.sticky_row_index);
          TextView secondRowIndex = (TextView) secondVisibleView.findViewById(R.id.sticky_row_index);
      
          int visibleRange = recyclerView.getChildCount();
          int actual = recyclerView.getChildPosition(firstVisibleView);
          int next = actual + 1;
          int previous = actual - 1;
          int last = actual + visibleRange;
      
          // RESET STICKY LETTER INDEX
          stickyIndex.setText(String.valueOf(getIndexContext(firstRowIndex)).toUpperCase());
          stickyIndex.setVisibility(TextView.VISIBLE);
      
          if (dy > 0) {
              // USER SCROLLING DOWN THE RecyclerView
              if (next <= last) {
                  if (isHeader(firstRowIndex, secondRowIndex)) {
                      stickyIndex.setVisibility(TextView.INVISIBLE);
                      firstRowIndex.setVisibility(TextView.VISIBLE);
                      firstRowIndex.setAlpha(1 - (Math.abs(firstVisibleView.getY()) / firstRowIndex.getHeight()));
                      secondRowIndex.setVisibility(TextView.VISIBLE);
                  } else {
                      firstRowIndex.setVisibility(TextView.INVISIBLE);
                      stickyIndex.setVisibility(TextView.VISIBLE);
                  }
              }
          } else {
              // USER IS SCROLLING UP THE RecyclerVIew
              if (next <= last) {
                  // RESET FIRST ROW STATE
                  firstRowIndex.setVisibility(TextView.INVISIBLE);
      
                  if ((isHeader(firstRowIndex, secondRowIndex) || (getIndexContext(firstRowIndex) != getIndexContext(secondRowIndex))) && isHeader(firstRowIndex, secondRowIndex)) {
                      stickyIndex.setVisibility(TextView.INVISIBLE);
                      firstRowIndex.setVisibility(TextView.VISIBLE);
                      firstRowIndex.setAlpha(1 - (Math.abs(firstVisibleView.getY()) / firstRowIndex.getHeight()));
                      secondRowIndex.setVisibility(TextView.VISIBLE);
                  } else {
                      secondRowIndex.setVisibility(TextView.INVISIBLE);
                  }
              }
          }
      
          if (stickyIndex.getVisibility() == TextView.VISIBLE) {
              firstRowIndex.setVisibility(TextView.INVISIBLE);
          }
      }
      

    我已经开发了一个执行上述逻辑的组件,可以在这里找到:https://github.com/edsilfer/sticky-index

    【讨论】:

    • 您的演示应用有很多错误,请修复它
    • 这里有效,你能明确地说你发现了哪些错误
    【解决方案3】:

    我这么晚才回答,但我希望我的回答对某人有所帮助。我也有这样的任务。我一直在寻找粘性标题的答案和示例,但对于 recyclerView。我在 Sabre Solooki 的文章"Sticky Header For RecyclerView" 中找到了最好最简单的解决方案。

    基于这个例子,我为我的应用制作了我的联系人模块,非常简单。

    【讨论】:

      【解决方案4】:

      【讨论】:

      • 这很好,但它确实需要很长时间,遗憾的是我没有。你以前看过那里的代码吗?你能指出我写的每一件事的具体实现位置吗?
      • 我不确定这是否有帮助。我没有看到我在那里写的任何东西。 :(
      • 在里面你有bindSectionHeaderAndDivider,如果你在层次结构中上一层到ContactListAdapter,你会发现有问题的方法。剩下的就看你自己了。
      • 我想我已经找到了关于 listView 本身的解决方案。现在剩下的就是 PagerTitleStrip
      【解决方案5】:

      要实现类似于电话联系人列表的功能,This 是我遇到的最佳解决方案!

      这也适用于自定义列表,因为图像可能需要与名称一起存在。以上解决方案只有String的列表或数组,可能不是每个人都需要!

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-09-12
      • 2016-01-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-08-12
      相关资源
      最近更新 更多