Android Recyclerview水平牌组效果

Android Recyclerview水平牌组效果,android,android-layout,android-recyclerview,Android,Android Layout,Android Recyclerview,我正在尝试制作一个简单的纸牌游戏,在这个游戏中,我需要显示水平放置在桌面上的一副纸牌,用户可以通过单击它们来选择任意数量的纸牌。理想情况下,当你点击任何一张牌时,这张牌应该比其他牌高一点。加上卡片不是完全可见的,它们是部分可见的,就像。我已经创建了自定义的Recyclerview,并使用item decorator来更改卡的偏移量。然而,每当我改变偏移量时,牌组的第一张或最后一张牌会被其他牌完全重叠。如下图所示 如何正确显示上述效果,而不丢失第一张(或最后一张)卡?另外,当我们点击这些卡片时,

我正在尝试制作一个简单的纸牌游戏,在这个游戏中,我需要显示水平放置在桌面上的一副纸牌,用户可以通过单击它们来选择任意数量的纸牌。理想情况下,当你点击任何一张牌时,这张牌应该比其他牌高一点。加上卡片不是完全可见的,它们是部分可见的,就像。我已经创建了自定义的Recyclerview,并使用item decorator来更改卡的偏移量。然而,每当我改变偏移量时,牌组的第一张或最后一张牌会被其他牌完全重叠。如下图所示

如何正确显示上述效果,而不丢失第一张(或最后一张)卡?另外,当我们点击这些卡片时,如何提升它们?我尝试使用“setElevation()”,但没有效果。如果我能在没有任何第三方库的情况下实现这一点,那将非常好(不过我愿意接受建议)。我使用了以下代码

Game.java

public class Game extends AppCompatActivity {

    private List<Card> cards = new ArrayList<>();
    private RecyclerView.ItemDecoration decoration = new OverlapDecoration();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.game);
        RecyclerView marketDeck = (RecyclerView) findViewById(R.id.market_deck);


        Card item1 = new Card();
        item1.setImage(R.color.colorPrimary);
        Card item2 = new Card();
        item2.setImage(R.color.colorAccent);

        cards.add(item1);
        cards.add(item2);
        cards.add(item1);
        cards.add(item2);
        cards.add(item1);

        CardHolder cardHolder = new CardHolder(cards);
        marketDeck.setAdapter(cardHolder);
        marketDeck.setLayoutManager(new LinearLayoutManager(getBaseContext(), LinearLayoutManager.HORIZONTAL, false));
        marketDeck.addItemDecoration(decoration);

        cardHolder.setOnCardClick(new CardHolder.onCardClick() {
            @Override
            public void onClick(View v) {
                v.setElevation(10);
            }
        });


    }

    private class OverlapDecoration extends RecyclerView.ItemDecoration {

        //Following code from : http://stackoverflow.com/questions/27633454/how-to-overlap-items-in-linearlayoutmanager-recyclerview-like-stacking-cards
        private final static int overlap = -100;

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

            final int itemPosition = parent.getChildAdapterPosition(view);
            if (itemPosition == RecyclerView.NO_POSITION) {
                return;
            }
            outRect.set(overlap, 0, 0, 0);
        }
    }

}
公共类游戏扩展AppCompative活动{
私有列表卡=新的ArrayList();
private RecyclerView.ItemDepartment装饰=新的重叠装饰();
@凌驾
创建时受保护的void(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.game);
RecyclerView marketDeck=(RecyclerView)findViewById(R.id.market_deck);
卡片项目1=新卡片();
项目1.设置图像(R.color.colorPrimary);
卡片项目2=新卡片();
项目2.设置图像(R.color.colorAccent);
增加(第1项);
增加(第2项);
增加(第1项);
增加(第2项);
增加(第1项);
持卡人持卡人=新持卡人(卡);
marketDeck.setAdapter(持卡人);
setLayoutManager(新的LinearLayoutManager(getBaseContext(),LinearLayoutManager.HORIZONTAL,false));
marketDeck.附加装饰(装饰);
持卡人.setOnCardClick(新持卡人.onCardClick(){
@凌驾
公共void onClick(视图v){
v、 海拔高度(10);
}
});
}
私有类OverlappeDecoration扩展了RecyclerView.ItemDecoration{
//以下代码来自:http://stackoverflow.com/questions/27633454/how-to-overlap-items-in-linearlayoutmanager-recyclerview-like-stacking-cards
私有最终静态整数重叠=-100;
@凌驾
public void getItemOffsets(Rect outRect、View View、RecyclerView父级、RecyclerView.State){
super.getItemOffset(outRect、view、parent、state);
final int itemPosition=parent.getChildAdapterPosition(视图);
if(itemPosition==RecyclerView.NO_位置){
返回;
}
outRect.set(重叠,0,0,0);
}
}
}
candler.java

public class CardHolder extends RecyclerView.Adapter<CardHolder.CardView> {

    private List<Card> cards;

    private onCardClick cardClick;

    public CardHolder(List<Card> cards) {
        this.cards = cards;
    }

    @Override
    public CardView onCreateViewHolder(ViewGroup parent, int viewType) {
        return new CardView(LayoutInflater.from(parent.getContext()).inflate(R.layout.card, parent, false));
    }

    @Override
    public void onBindViewHolder(CardView holder, int position) {
        Card card = cards.get(position);
        holder.icon.setImageResource(card.getImage());

    }

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

    class CardView extends RecyclerView.ViewHolder {
        ImageView icon;

        CardView(final View itemView) {
            super(itemView);
            icon = (ImageView) itemView.findViewById(R.id.card_icon);
            icon.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    cardClick.onClick(v);
                }
            });
        }
    }

    void setOnCardClick(onCardClick click) {
        cardClick = click;
    }

    public interface onCardClick {
        void onClick(View v);
    }


}
公共类持卡人扩展RecyclerView.Adapter{
私人名单卡;
私有onCardClick cardClick;
公共持卡人(名单卡){
这个。卡片=卡片;
}
@凌驾
public CardView onCreateViewHolder(视图组父级,int-viewType){
返回新的CardView(LayoutFlater.from(parent.getContext())。充气(R.layout.card,parent,false));
}
@凌驾
BindViewHolder上的公共无效(CardView holder,内部位置){
卡片=卡片。获取(位置);
holder.icon.setImageResource(card.getImage());
}
@凌驾
public int getItemCount(){
返回卡。大小();
}
类CardView扩展了RecyclerView.ViewHolder{
图像视图图标;
CardView(最终视图项目视图){
超级(项目视图);
icon=(ImageView)itemView.findViewById(R.id.card_图标);
icon.setOnClickListener(新视图.OnClickListener(){
@凌驾
公共void onClick(视图v){
cardClick.onClick(v);
}
});
}
}
void设置onCardClick(onCardClick){
点击=点击;
}
点击公共界面{
void onClick(视图v);
}
}
Card.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5sp">

    <ImageView
        android:id="@+id/card_icon"
        style="@style/CardTheme"
        android:contentDescription="@null"
        app:srcCompat="@color/colorPrimary" />
</LinearLayout>

game.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.company.someapp.Game">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/market_deck"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>


注意:我保留了recyclerview width为“wrap\u content”,因为卡片的数量将是可变的。

通过调整第一个元素的边距(如下所示)使其正常工作

private class OverlapDecoration extends RecyclerView.ItemDecoration {

        //Following code from : http://stackoverflow.com/questions/27633454/how-to-overlap-items-in-linearlayoutmanager-recyclerview-like-stacking-cards
        private final static int overlap = -100;

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

             final int itemPosition = parent.getChildAdapterPosition(view);
        if (itemPosition == 0) {
            outRect.set(0, 0, 0, 0);
        } else {
            outRect.set(overlap, 0, 0, 0);
        }
        }
    }