17

背景

谷歌最近发布了一个新版本的 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 上做了一个项目,在这里。可悲的是,我还发现了一个重要的错误,所以我也在这里发布了它。

4

5 回答 5

7

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

1.我改变了第三方库的工作方式(我不记得我从哪里得到这个库,但是这个很相似),通过改变每一行的布局,这样标题就在左边内容本身。这只是一个布局 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 的更好的库在这里,也称为“PagerSlidingTabStrip”。

于 2014-12-25T08:23:33.863 回答
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

于 2015-06-06T05:50:59.837 回答
1

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

在此处输入图像描述

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

在此处输入图像描述

于 2019-10-10T10:41:20.193 回答
0

那么应用程序的源代码总是一个很好的起点

于 2014-12-23T15:02:14.127 回答
0

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

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

于 2020-09-05T08:49:50.890 回答