如何在水平RecyclerView下添加点?

时间:2017-04-27 11:16:54

标签: android recycler-adapter

我有RecyclerView显示我想要的图像

    RecyclerView detailsRecycleImage = (RecyclerView) view.findViewById(R.id.detailsRcycleImage);
     RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(
      getActivity().getApplicationContext(),
      LinearLayoutManager.HORIZONTAL,
      false
    );

    detailsRecycleImage.setLayoutManager(mLayoutManager);
    ImagesAdapter imgAdapter = new 
    ImagesAdapter(getActivity(),contactsData.getContactImages());
    detailsRecycleImage.setAdapter(imgAdapter);  

我的适配器代码是

     public class ImagesAdapter extends  RecyclerView.Adapter<ImagesAdapter.MyViewHolder>{
  private Context cnt;
  public ArrayList<String> imgsUrls;
  public ImagesAdapter(Context cnt, ArrayList<String> imgsUrls) {
    this.cnt=cnt;
    this.imgsUrls=imgsUrls;
  }

  @Override
  public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.single_img,parent,false);

    return new MyViewHolder(itemView);
  }

  @Override
  public void onBindViewHolder(final MyViewHolder holder, int position) {
    String singleImg = imgsUrls.get(position);
    Picasso.with(cnt).load(singleImg).into(holder.img);
  }

  @Override
  public int getItemCount() {
    return imgsUrls.size();
  }


  public class MyViewHolder extends RecyclerView.ViewHolder {
    public ImageView img;

    public MyViewHolder(View view) {
      super(view);
      img = (ImageView) view.findViewById(R.id.img);
    }
  }
}

我的布局是

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <ImageView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:id="@+id/img"
          />
</RelativeLay

我只需要在recyclerview下添加点作为此图像的指示符    enter image description here enter image description here
有没有办法在我的代码中添加一些内容并获得此视图?

3 个答案:

答案 0 :(得分:1)

检查一下: https://blog.davidmedenjak.com/android/2017/06/24/viewpager-recyclerview.html

Tldr: 创建一个LinePagerIndicatorDecoration并将其添加到我们的RecyclerView:

// pager indicator
recyclerView.addItemDecoration(new LinePagerIndicatorDecoration());

答案 1 :(得分:0)

我稍微更改LinePagerIndicatorDecoration使其成为DotsIndicatorDecoration并同时支持GridLayoutManager和LinearLayoutManager

public class DotsIndicatorDecoration extends RecyclerView.ItemDecoration {

    private final int indicatorHeight;
    private final int indicatorItemPadding;
    private final int radius;

    private final Paint inactivePaint = new Paint();
    private final Paint activePaint = new Paint();

    public DotsIndicatorDecoration(int radius, int padding, int indicatorHeight, @ColorInt int colorInactive, @ColorInt int colorActive) {
        float strokeWidth = Resources.getSystem().getDisplayMetrics().density * 1;
        this.radius = radius;
        inactivePaint.setStrokeCap(Paint.Cap.ROUND);
        inactivePaint.setStrokeWidth(strokeWidth);
        inactivePaint.setStyle(Paint.Style.STROKE);
        inactivePaint.setAntiAlias(true);
        inactivePaint.setColor(colorInactive);

        activePaint.setStrokeCap(Paint.Cap.ROUND);
        activePaint.setStrokeWidth(strokeWidth);
        activePaint.setStyle(Paint.Style.FILL);
        activePaint.setAntiAlias(true);
        activePaint.setColor(colorActive);

        this.indicatorItemPadding = padding;
        this.indicatorHeight = indicatorHeight;
    }

    @Override
    public void onDrawOver(@NotNull Canvas c, @NotNull RecyclerView parent, @NotNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);

        final RecyclerView.Adapter adapter = parent.getAdapter();

        if (adapter == null) {
            return;
        }

        int itemCount = adapter.getItemCount();

        // center horizontally, calculate width and subtract half from center
        float totalLength = this.radius * 2 * itemCount;
        float paddingBetweenItems = Math.max(0, itemCount - 1) * indicatorItemPadding;
        float indicatorTotalWidth = totalLength + paddingBetweenItems;
        float indicatorStartX = (parent.getWidth() - indicatorTotalWidth) / 2f;

        // center vertically in the allotted space
        float indicatorPosY = parent.getHeight() - indicatorHeight / 2f;

        drawInactiveDots(c, indicatorStartX, indicatorPosY, itemCount);

        final int activePosition;

        if (parent.getLayoutManager() instanceof GridLayoutManager) {
            activePosition = ((GridLayoutManager) parent.getLayoutManager()).findFirstVisibleItemPosition();
        } else if (parent.getLayoutManager() instanceof LinearLayoutManager) {
            activePosition = ((LinearLayoutManager) parent.getLayoutManager()).findFirstVisibleItemPosition();
        } else {
            // not supported layout manager
            return;
        }

        if (activePosition == RecyclerView.NO_POSITION) {
            return;
        }

        // find offset of active page if the user is scrolling
        final View activeChild = parent.getLayoutManager().findViewByPosition(activePosition);
        if (activeChild == null) {
            return;
        }

        drawActiveDot(c, indicatorStartX, indicatorPosY, activePosition);
    }

    private void drawInactiveDots(Canvas c, float indicatorStartX, float indicatorPosY, int itemCount) {
        // width of item indicator including padding
        final float itemWidth = this.radius * 2 + indicatorItemPadding;

        float start = indicatorStartX + radius;
        for (int i = 0; i < itemCount; i++) {
            c.drawCircle(start, indicatorPosY, radius, inactivePaint);
            start += itemWidth;
        }
    }

    private void drawActiveDot(Canvas c, float indicatorStartX, float indicatorPosY,
                               int highlightPosition) {
        // width of item indicator including padding
        final float itemWidth = this.radius * 2 + indicatorItemPadding;
        float highlightStart = indicatorStartX + radius + itemWidth * highlightPosition;
        c.drawCircle(highlightStart, indicatorPosY, radius, activePaint);
    }

    @Override
    public void getItemOffsets(@NotNull Rect outRect, @NotNull View view, @NotNull RecyclerView parent, @NotNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.bottom = indicatorHeight;
    }
}

用法:

        RecyclerView recyclerView = resourceLayout.getSuccessView().findViewById(R.id.cardsRecyclerView);
        recyclerView.setNestedScrollingEnabled(false);
        recyclerView.setLayoutManager(new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false));
        recyclerView.setHasFixedSize(true);
        recyclerView.setAdapter(manageCardGenericAdapter);
        final int radius = getResources().getDimensionPixelSize(R.dimen.radius);
        final int dotsHeight = getResources().getDimensionPixelSize(R.dimen.dots_height);
        final int color = ContextCompat.getColor(getContext(), R.color.primaryBlue);
        recyclerView.addItemDecoration(new DotsIndicatorDecoration(radius, radius * 4, dotsHeight, color, color));
        new PagerSnapHelper().attachToRecyclerView(recyclerView);

答案 2 :(得分:0)

我尝试过与装饰器一起做出决定-奇怪的行为:我的水平recyclerview不会粘在屏幕边缘。查看我的决定-

ActionController::UnknownFormat: TaxInvoiceController#show is missing a template for this request format and variant.

request.formats: ["text/html"]
request.variant: []

您只需要设置OnScrollListener并在其回调中通过您的layout_manager和方法用点重新定义您的linearlayout

        recycler.setAdapter(recyclerViewHorizontalAdapter);
        recycler.setOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            int currentCompletelyVisibleLab = ((LinearLayoutManager)recyclerViewLayoutManager).findFirstCompletelyVisibleItemPosition();
            bottomDotsTransaction(currentCompletelyVisibleLab);
        }
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        }
    });
    addBottomDots();
    setLabsOnTouchListener(commercialLabsNames, availableTests);
}
//create empty linear layout below recyclerview and add dots to it
private void addBottomDots() {
    ImageView imageView;
    for (int i = 0; i < commercialLabsLogos.size(); i++) {
        imageView = new ImageView(getContext());
        imageView.setImageResource(R.drawable.empty_dot_4dp);
        imageView.setPadding(15, 15, 15, 15);
        dotsLinearLayout.addView(imageView);
    }
    bottomDotsTransaction(0);
}
private void bottomDotsTransaction(int pos) {
    for (int i = 0; i < dotsLinearLayout.getChildCount(); i++) {
        if (dotsLinearLayout.getChildAt(i) instanceof ImageView) {
            ((ImageView) dotsLinearLayout.getChildAt(i)).setImageResource(R.drawable.empty_dot_4dp);
        }
    }
    //Set the chosen dot on position
    ((ImageView) dotsLinearLayout.getChildAt(pos)).setImageResource(R.drawable.fill_dot_6dp);
}