【问题标题】:How do I make the Android Cardview appear like Android now? (align bottom)如何让 Android Cardview 现在看起来像 Android? (对齐底部)
【发布时间】:2015-07-07 04:38:47
【问题描述】:

我正在尝试制作一个 android 视图,其中顶部有图像,底部有文本,类似于 Android now 卡片。

我在使用“命令”按钮并将它们对齐所有文本下方时遇到问题,最好用 HR 线分隔。

这是我一直在使用的代码,但无法让它看起来像 android Now cards -

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="2dp"
    card_view:contentPadding="10dp">

    <LinearLayout
        android:id="@+id/card_view_inner_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp">

            <TextView
                android:textColor="#0000FF"
                android:id="@+id/personaTextView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_toLeftOf="@+id/image_view"
                android:layout_toStartOf="@+id/image_view"
                android:textAppearance="?android:textAppearanceLarge"
                android:text="Some text here" />

            <TextView
                android:textColor="#00FFFF"
                android:id="@+id/personaTextView2"
                android:layout_below="@+id/personaTextView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true" 
                android:layout_toLeftOf="@+id/image_view"
                android:layout_toStartOf="@+id/image_view"
                android:text="Some text here" />

            <ImageView
                android:id="@+id/image_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:src="@android:drawable/btn_radio" />

        </RelativeLayout>

        <View    
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="@android:color/darker_gray" />

        <RelativeLayout         android:layout_width="wrap_content"
                android:layout_height="wrap_content"  >

            <Button
                android:id="@+id/cardAction1"
                android:textColor="#00FFFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Action 1"
                android:layout_toLeftOf="@+id/cardAction2"
                style="?android:attr/borderlessButtonStyle"
            />

            <Button
                android:id="@+id/cardAction2"
                android:textColor="#00FFFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Action 2"
                style="?android:attr/borderlessButtonStyle"
            />

         </RelativeLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

我(现在)遇到的问题是我无法让操作按钮工作

【问题讨论】:

  • 你能更精确一点吗? 2个按钮不起作用是什么?您的意思是它们不可见或未触发任何操作?
  • @jj86 谢谢,我能够让它工作...花了一点摆弄嵌套布局,但它可以工作

标签: android xamarin android-cardview


【解决方案1】:

您必须在视图中添加一个像这样的平面按钮(请参阅this link):

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Your text"
    style="?android:attr/borderlessButtonStyle"
/>

那么,当然,由你来设计你的View。

【讨论】:

    【解决方案2】:

    这样的?

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="2dp"
        card_view:contentPadding="10dp">
    
        <LinearLayout
            android:id="@+id/card_view_inner_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp">
    
                <TextView
                    android:id="@+id/text_view1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_toLeftOf="@+id/image_view"
                    android:layout_toStartOf="@+id/image_view"
                    android:textAppearance="?android:textAppearanceLarge"
                    android:text="Some text here" />
    
                <TextView
                    android:id="@+id/text_view2"
                    android:layout_below="@+id/text_view1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_toLeftOf="@+id/image_view"
                    android:layout_toStartOf="@+id/image_view"
                    android:text="Some text here" />
    
                <ImageView
                    android:id="@+id/image_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true"
                    android:src="@android:drawable/btn_radio" />
    
            </RelativeLayout>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@android:color/darker_gray" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="Some random text" />
    
        </LinearLayout>
    </android.support.v7.widget.CardView>
    

    【讨论】:

    • 水平线上的巧妙技巧。我在某处读到线性布局会导致问题(性能降低),这是真的吗?
    • LinearLayout 如果层次结构非常深(LinearLayout inside LinearLayout inside LinearLayout 等等),可能会导致性能下降。使用RelativeLayout 可以解决这个问题并减少层次结构。但是 LinearLayouts 很简单,所以这里就足够了,不需要使用 RelativeLayout 来代替它,因为你有 3 个项目,一个在下面。我可以将所有项目放在 RelativeLayout 中,但我决定将顶部(行上)分开,因为文本可以高于图像,反之亦然。
    • 如果你想添加Button,你可以把它而不是TextView放在水平线下面,就像@JJ86回答的那样——style="?android:attr/borderlessButtonStyle"会给你扁平的按钮。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-11-06
    • 2021-05-01
    • 1970-01-01
    • 2015-02-28
    • 2016-07-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多