如何使用cardslib准确地自定义卡片?

3

我在文件cardslib_item_card_view中声明了一张卡片:

<it.gmariotti.cardslib.library.view.CardViewNative     
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card="http://schemas.android.com/apk/res-auto"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  card_view:cardCornerRadius="4dp"
  style="@style/native_recyclerview_card.base"
  android:id="@+id/carddemo"
  android:layout_width="match_parent" android:layout_height="wrap_content">

并在 onCreate() 方法中设置为内容视图:
public class CardMariotti extends ActionBarActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.cardslib_item_card_view);
        //Create a Card
        Card card = new Card(this);
        CardViewNative cardView = (CardViewNative) this.findViewById(R.id.carddemo);
        cardView.setCard(card);

        card.setOnClickListener(new Card.OnCardClickListener() {
            @Override
            public void onClick(Card card, View view) {
                Toast.makeText(CardMariotti.this, "Clickable card", Toast.LENGTH_LONG).show();
            }
        });
}

现在,我想使用自己的布局来进行定制,包含一个狭窄的页眉和一些信息,如下所示:
<RelativeLayout  android:id="@+id/cardlayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="?android:selectableItemBackground"    
    android:clickable="true">

    <!-- layout containing 3 TextView -->
</RelativeLayout> 

这样的过程有什么标准程序吗?我已经尝试了很多调整,例如:
  • 创建第二个名为cardslib_item_layout.xml的xml文件,并在Card的构造函数中引用它: Card card = new Card(this, R.layout.cardslib_item_layout); 然后设置setContentView(R.layout.cardslib_item_card_view)
  • 将布局附加在卡片中,然后设置setContentView(R.layout.cardslib_item_card_view)
这样做的话,cardslib_item_card_view
<it.gmariotti.cardslib.library.view.CardViewNative     
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:card="http://schemas.android.com/apk/res-auto" 
      xmlns:card_view="http://schemas.android.com/apk/res-auto"
      card_view:cardCornerRadius="4dp"
      android:id="@+id/carddemo"
      android:layout_width="match_parent" android:layout_height="wrap_content">

      <RelativeLayout>
          <!-- my layout containing a header and some TextViews -->
      </RelativeLayout>
</it.gmariotti.cardslib.library.view.CardViewNative>

在两个测试中,我遇到了以下问题:
  • 整体结果完全扭曲
  • 最重要的是,RelativeLayout被放置在卡片的上方,使得对卡片进行任何操作都变得不可能(例如,在卡片本身上设置Card.OnCardClickListener将无法工作,因为用户将点击RelativeLayout而不是卡片本身)

尝试1: enter image description here 尝试2: enter image description here

规范的程序是什么?

编辑2:答案

@Msk提供的贡献对我非常有效,尽管后来我发现通过使用原始的cardslib的Card类也可以在不创建扩展Card类的新类DeviceCard的情况下获得相同的结果。

我能够通过在cardslib_item_layout.xml文件中进行一些微小而琐碎的更改(之前我忽略了这一点)来调整我的布局(标题和卡片的其余部分重叠,如屏幕截图所示)。同时,我还可以通过应用Mariotti在this问题的答案来消除自动附加到每个卡片的虚拟填充。

1个回答

2

尝试这个
您可以为cards-lib定义自己的布局。

创建您自己的自定义XML:

以下是一个示例custom_layout.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:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="8dp"
    android:paddingRight="6dp"
    android:paddingTop="7dp"
    android:paddingBottom="7dp"
    android:id="@+id/parentView">


    <TextView
        android:id="@+id/name"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="27"
        android:paddingRight="8dp"
        android:paddingLeft="8dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:text=""
        android:layout_gravity="center"
        android:editable="false"
       />

</LinearLayout>

在您的JAVA代码中创建一个用于所需自定义卡片的类:
    import it.gmariotti.cardslib.library.internal.Card;
    import it.gmariotti.cardslib.library.internal.ViewToClickToExpand;

public class DeviceCard extends Card {

        private String IP;
        private String MAC;
        private String name;
        private Boolean reachable;
        private Boolean editable;
        Boolean markedFlag;

        public DeviceCard(Context context) {
            this(context, R.layout.custom_layout);
        }

        public DeviceCard(Context context,String param1,...,Type paramn) {

            this(context, R.layout.device_card);
            this.name = param1;
        }



        public DeviceCard(Context context, int innerLayout) {
            super(context, innerLayout);
            init();
            Log.d("myTag", "Init called");
        }


        private void init(){


        }

        @Override
        public void setupInnerViewElements(ViewGroup parent, final View view)          {
            Log.i("myTag","setupInnerView");

            final TextView nameBox = (TextView)view.findViewById(R.id.name);
          //edit name if required

        }
    }

现在在您的JAVA代码中,当您需要使用卡片列表时:
DeviceCard card = new DeviceCard(this, name);

这种方法一直对我有效。

我不确定发生了什么,但布局看起来就像我的第一个截图,RelativeLayout被挤压在一个较小的矩形中!我相信我已经按照您告诉我的做了,但可能我对您的示例有所误解? - Cris
1
你不需要重复做之前已经完成的事情。完全删除它们并检查一次。 - Msk
经过稍微调整我的内部布局(=总体结构保持一致),它现在可以工作了;但是还有更多的问题!内部布局似乎永远无法与CardRecyclerView卡片的布局对齐。这意味着它看起来好像我在所有方向上都添加了一些填充,但实际上并没有!你知道为什么吗?如果需要,我可以发布更多细节! - Cris
是的,这是因为定义的基础卡片布局有一些填充。你可能主要在底部得到更多的填充?对的。现在发布一个新的图像,展示你现在得到了什么。也许我可以提供更多帮助;-) - Msk
我已经找到了解决隐藏填充问题的方法,通过按照这里所描述的方式覆盖尺寸值:http://stackoverflow.com/questions/29134528/cardslib-unwanted-12dp-margin-on-all-cards感谢您的帮助。 - Cris

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接