CardView在API 21以下的圓角效果處理

CardView是Android5.0(API 21)加入的新控件抡笼,當然衷旅,在API 21以下也能用呀枢,在build.gradle的依賴里加入下邊一行就可以用了

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

項目中要做一個卡片瀏覽的程序,卡片需要有5dp的圓角庭再,圓角效果CardView自帶屬性就可以支持,加上app:cardCornerRadius屬性就好了牺堰,如下:

<android.support.v7.widget.CardView
  xmlns:android="http://schemas.android.com/apk/res/android"  
  xmlns:app="http://schemas.android.com/apk/res-auto"    
  android:layout_width="match_parent"    
  android:layout_height="wrap_content"    
  app:cardUseCompatPadding="true"    
  app:cardCornerRadius="5dp">
  ...
</android.support.v7.widget.CardView>

在API 21以上(包括)的機器實現了很完美的圓角效果拄轻,效果如下:

但是在API 21以下的機器出現了問題,以下是API 19的實現效果:

初步一看伟葫,雖然加上了圓角屬性恨搓,但是圖片邊上是方的。將左下角和左上角放大仔細看下:

可以看到筏养,CardView本身是圓角效果了斧抱,但是里邊的內容卻還是方的,并且出現了多余的白邊渐溶。
再仔細查看CardView的文檔辉浦,發(fā)現其有一個屬性cardPreventCornerOverlap

<!-- Add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners. --> 
<!-- 在v20和之前的版本中添加內邊距,這個屬性是為了防止卡片內容和邊角的重疊 -->
 <attr name="cardPreventCornerOverlap" format="boolean" />

cardPreventCornerOverlap默認為true掌猛,意思是阻止API 20或者之前的CardView的corner和內部元素重疊盏浙。沒有重疊就產生了上邊的效果,多了一條白邊荔茬。于是在xml布局文件里增加CardView的屬性app:cardPreventCornerOverlap="false"废膘,左下角和左上角效果如下:

可以看到,CardView里的元素已經和CardView重疊了慕蔚,但是元素本身沒有圓角丐黄,所以頂點伸出去了。到這里思路就很簡單了孔飒,將里邊的元素單獨做圓角處理灌闺。

drawable下新建shape_radius.xml文件,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="@color/f2f2f2"></solid>
</shape>

在CardView里的元素LinearLayout加上backgroud屬性

<LinearLayout android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="@drawable/shape_radius" >
    <ImageView    
      android:id="@+id/iv_header"    
      android:layout_width="match_parent"    
      android:layout_height="wrap_content"    
      android:layout_gravity="center_horizontal"    
      android:adjustViewBounds="true"    
      android:scaleType="fitCenter"    
      android:src="@drawable/ic_person_default"/>
</LinearLayout>

左下角正常坏瞄,左上角依然

圖片還需要單獨做圓角處理桂对,這里需要的效果是,圖片的上邊兩個角需要圓角鸠匀,下邊兩個角需要直角蕉斜。
自定義UpRoundImageView類,繼承自ImageView,專門做圓角的繪制宅此,代碼如下:

public class UpRoundImageView extends ImageView {

    private float mRadus = 5 * SystemUtils.getDensity(CampusApplication.getCampusApplicationContext());
    
    /*圓角的半徑机错,依次為左上角xy半徑,右上角父腕,右下角弱匪,左下角*/
    private float[] rids = {mRadus, mRadus, mRadus, mRadus, 0.0f,0.0f,0.0f,0.0f};

    public UpRoundImageView(Context context) {
        super(context);
    }

    public UpRoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public UpRoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    /**
     * 畫圖
     * @param canvas
     */
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        int w = this.getWidth();
        int h = this.getHeight();
        /*向路徑中添加圓角矩形。radii數組定義圓角矩形的四個圓角的x,y半徑璧亮。radii長度必須為8*/
        path.addRoundRect(new RectF(0,0,w,h),rids,Path.Direction.CW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    }
}

將ImageView替換成UpRoundImageView萧诫, 這樣就實現了全部圓角效果。
另外杜顺,可以在CardView加上app:cardElevation="3dp"屬性财搁,這個屬性加上后可以在CardView后形成一個陰影,有卡片浮上來的感覺躬络,更符合Material Design風格尖奔。 xml中CardView的屬性設置為

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardUseCompatPadding="true"
    app:cardCornerRadius="5dp"
    app:cardPreventCornerOverlap="false"
    app:cardElevation="3dp">
    ...
</android.support.v7.widget.CardView>

最后實現效果在各個平臺一致:

api 19實現效果


api 19實現效果

api 22實現效果


api 22實現效果
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市穷当,隨后出現的幾起案子提茁,更是在濱河造成了極大的恐慌,老刑警劉巖馁菜,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茴扁,死亡現場離奇詭異,居然都是意外死亡汪疮,警方通過查閱死者的電腦和手機峭火,發(fā)現死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來智嚷,“玉大人卖丸,你說我怎么就攤上這事≌档溃” “怎么了稍浆?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長猜嘱。 經常有香客問我衅枫,道長,這世上最難降的妖魔是什么朗伶? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任弦撩,我火速辦了婚禮,結果婚禮上论皆,老公的妹妹穿的比我還像新娘益楼。我一直安慰自己歧斟,他們只是感情好,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布偏形。 她就那樣靜靜地躺著,像睡著了一般觉鼻。 火紅的嫁衣襯著肌膚如雪俊扭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天坠陈,我揣著相機與錄音萨惑,去河邊找鬼。 笑死仇矾,一個胖子當著我的面吹牛庸蔼,可吹牛的內容都是我干的。 我是一名探鬼主播贮匕,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼姐仅,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了刻盐?” 一聲冷哼從身側響起掏膏,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎敦锌,沒想到半個月后馒疹,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡乙墙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年颖变,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片听想。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡腥刹,死狀恐怖,靈堂內的尸體忽然破棺而出哗魂,到底是詐尸還是另有隱情肛走,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布录别,位于F島的核電站朽色,受9級特大地震影響,放射性物質發(fā)生泄漏组题。R本人自食惡果不足惜葫男,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望崔列。 院中可真熱鬧梢褐,春花似錦旺遮、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至鱼响,卻和暖如春鸣剪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背丈积。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工筐骇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人江滨。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓铛纬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親唬滑。 傳聞我的和親對象是個殘疾皇子告唆,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,771評論 25 707
  • 發(fā)現 關注 消息 iOS 第三方庫、插件间雀、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,064評論 4 62
  • 轉載注明出處:http://www.reibang.com/p/818e1284158d 1. 概述 Androi...
    王三的貓阿德閱讀 10,360評論 10 49
  • 伽藍寺悔详,一位衣衫青素的僧人閉著眼睛虔誠的敲打著木魚∪切灰蒙蒙的天空飄著細細的小雨茄螃,老僧人緩緩的睜開眼睛,看著絲絲細雨...
    唐半仙閱讀 366評論 5 9
  • 一连锯、NSDate 1.NSDate對象用來表示一個具體的時間點归苍。 2.NSDate是一個類簇,我們所使用的NSDa...
    hAo_JS閱讀 1,090評論 0 1