Android CardView:你需要知道的一些事

CardView是一個(gè)視圖容器替蔬,繼承自FrameLayout,CardView像一張卡片相嵌,有陰影和圓角腿时,這些屬性也可以添加到其他視圖組中况脆。
CardView提供的可定制性包括CornerRadius,Elevation批糟,MaxElevation格了,ContentPadding,CompatPadding跃赚,PreventCornerOverlap和專(zhuān)用CardBackgroundColor笆搓,可以使用下面的代碼片段看一下效果:

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="0dp"
        app:cardMaxElevation="1dp"
        app:cardElevation="0.7dp"
        app:contentPadding="10dp"
        app:contentPaddingBottom="0dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true"
        android:id="@+id/cardView">

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="180dp"
                android:scaleType="centerCrop"
                android:id="@+id/img"
                android:src="@drawable/joshua_sortino"
                android:contentDescription="CardImageViewDesc" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/img"
                android:layout_marginLeft="5dp"
                android:layout_marginStart="5dp"
                android:fontFamily="sans-serif"
                android:gravity="center_vertical"
                android:text="Joshua Sortino - Via Unsplash"
                android:textSize="18sp" />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_favorite_border"
                android:layout_below="@id/img"
                android:layout_marginRight="5dp"
                android:layout_marginEnd="5dp"
                android:contentDescription="FavButtonDesc" />

        </RelativeLayout>

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

添加CardView到項(xiàng)目中

添加如下的依賴(lài)項(xiàng)到build.gradle文件中

compile 'com.android.support:cardview-v7:26.0.0'

如果使用的是AndroidStudio 3.0以及以上,需要添加下面這個(gè)依賴(lài)項(xiàng)

implementation 'com.android.support:cardview-v7:26.0.0'

CardView 設(shè)置背景顏色

app:cardBackgroundColor="@android:color/white"

cardView.setCardBackgroundColor(Color.WHITE);

卡片圓角半徑

app:cardCornerRadius="0dp"

cardView.setRadius(0);

Card Elevation

卡片高度只是將卡片在z軸上的視圖提升到與所處傳值相同的高度纬傲,以前版本中是通過(guò)陰影來(lái)實(shí)現(xiàn)該效果满败,為內(nèi)容的邊添加padding

maxCardElevation + (1 - cos45) * cornerRadius

上下使用:

maxCardElevation * 1.5 + (1 - cos45) * cornerRadius

然后將陰影應(yīng)用于該空間,如果沒(méi)有手動(dòng)設(shè)置的話叹括,MaxCardElevation屬性將等于CardElevation算墨。

app:cardElevation="0.7dp"
app:cardMaxElevation="1dp"
cardView.setCardElevation(2.1f);
cardView.setMaxCardElevation(3f);

卡片內(nèi)容padding

如前所述,正常的CardView的padding用來(lái)創(chuàng)建繪制陰影的空間汁雷,因此我們使用content padding在邊和子視圖之間增加填充净嘀。

app:contentPadding="10dp"
app:contentPaddingBottom="0dp"

cardView.setContentPadding(30, 30, 30, 0);

卡片使用兼容填充

一個(gè)與填充有關(guān)的屬性,由于CardViews在Lollipop之前使用填充來(lái)繪制陰影侠讯,因此內(nèi)容區(qū)域在Lollipop之前和之后的平臺(tái)上會(huì)發(fā)生變化挖藏,為了確保所有平臺(tái)上的內(nèi)容區(qū)域保護(hù)不變,使用了兼容的Padding厢漩,他只是在Lollipop和之后的版本添加內(nèi)部填充膜眠。

app:cardUseCompatPadding="true"

cardView.setUseCompatPadding(true);

CardPreventCornerOverlap 避免角重疊

app:cardPreventCornerOverlap="true"

cardView.setPreventCornerOverlap(true);

用Java代碼代替上面的xml的代碼:

CardView cardView = (CardView) findViewById(R.id.cardView);
cardView.setUseCompatPadding(true);
cardView.setContentPadding(30, 30, 30, 0);
cardView.setPreventCornerOverlap(true);
cardView.setCardBackgroundColor(Color.WHITE);
cardView.setCardElevation(2.1f);
cardView.setRadius(0);
cardView.setMaxCardElevation(3f);
cardView.setCardElevation(dpToPx(0.7f));
和下面的效果一樣
cardView.setCardElevation(2.1f);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市溜嗜,隨后出現(xiàn)的幾起案子宵膨,更是在濱河造成了極大的恐慌,老刑警劉巖炸宵,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辟躏,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡土全,警方通過(guò)查閱死者的電腦和手機(jī)捎琐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)裹匙,“玉大人瑞凑,你說(shuō)我怎么就攤上這事』眉” “怎么了拨黔?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我篱蝇,道長(zhǎng)贺待,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任零截,我火速辦了婚禮麸塞,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘涧衙。我一直安慰自己哪工,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布弧哎。 她就那樣靜靜地躺著雁比,像睡著了一般。 火紅的嫁衣襯著肌膚如雪撤嫩。 梳的紋絲不亂的頭發(fā)上偎捎,一...
    開(kāi)封第一講書(shū)人閱讀 52,328評(píng)論 1 310
  • 那天,我揣著相機(jī)與錄音序攘,去河邊找鬼茴她。 笑死,一個(gè)胖子當(dāng)著我的面吹牛程奠,可吹牛的內(nèi)容都是我干的丈牢。 我是一名探鬼主播,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼瞄沙,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼己沛!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起帕识,我...
    開(kāi)封第一講書(shū)人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤泛粹,失蹤者是張志新(化名)和其女友劉穎遂铡,沒(méi)想到半個(gè)月后肮疗,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡扒接,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年伪货,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钾怔。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡碱呼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宗侦,到底是詐尸還是另有隱情愚臀,我是刑警寧澤,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布矾利,位于F島的核電站姑裂,受9級(jí)特大地震影響馋袜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜舶斧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一欣鳖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧茴厉,春花似錦泽台、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至嗜闻,卻和暖如春胰坟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背泞辐。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工笔横, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人咐吼。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓吹缔,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親锯茄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子厢塘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • CardView 擴(kuò)展 FrameLayout 類(lèi)并讓您能夠顯示卡片內(nèi)的信息,這些信息在整個(gè)平臺(tái)中擁有一致的呈現(xiàn)方...
    輕云時(shí)解被占用了閱讀 6,867評(píng)論 4 22
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,791評(píng)論 22 665
  • Material Design中有一種很個(gè)性的設(shè)計(jì)概念:卡片式設(shè)計(jì)(Cards)肌幽,Cards擁有自己獨(dú)特的UI特征...
    小莊bb閱讀 3,003評(píng)論 1 4
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,297評(píng)論 25 707
  • 昨天晚上草草地讀了一下在知乎上備受推薦的數(shù)據(jù)分析入門(mén)書(shū)《利用Python進(jìn)行數(shù)據(jù)分析》喂急。這本書(shū)寫(xiě)的的確不錯(cuò)格嘁,從頭介...
    George_Lee閱讀 448評(píng)論 0 0