Android自定義分割線

每個App都會用到分割線锌俱,一個兩邊頂?shù)筋^的分割線只需要使用<View>配合background屬性就能夠輕松實現(xiàn)晤郑。
常見的分割線形式還有如下這種兩端或者一端留出一定空白距離的分割線。



實現(xiàn)這種效果有很多解決方案,我能想到的有三種:

第一種造寝,也是最簡單的一種實現(xiàn)方式是:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/divider_height"
    android:background="@android:color/white"
    android:paddingLeft="@dimen/divider_padding"
    android:paddingRight="@dimen/divider_padding">
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:background="@android:color/white"/>
</LinearLayout>

這種實現(xiàn)方式會引起不必要的overdraw磕洪,因為容器的背景繪制了一次,然后分割線再繪制了一次诫龙。

第二種析显,可以用三個不同background的<View>來避免overdraw

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/divider_height"
    android:orientation="horizontal">
    <View
        android:layout_width="@dimen/divider_padding"
        android:layout_height="match_parent" 
        android:background="@android:color/white"/>
    <View
        android:layout_width="@dimen/divider_padding"
        android:layout_height="match_parent" 
        android:layout_weight="1.0"
        android:background="@color/divider_color"/>
    <View
        android:layout_width="@dimen/divider_padding"
        android:layout_height="match_parent" 
        android:background="@android:color/white"/>
</LinearLayout>    

這個方案解決了overdraw問題,但也并非完美签赃,因為為了實現(xiàn)分割線增加了一層嵌套谷异。那么接下來就引出了本篇想要記錄的重點

第三種,自定義View繪制分割線

這樣最終分割線的布局代碼非常簡練:

<Divider
    android:layout_width="match_parent"
    android:layout_height="@dimen/divider_height"
    custom:dividerLineColor="@color/divider_color"
    custom:dividerPaddingLeft="@dimen/divider_padding"
    custom:dividerPaddingRight="@dimen/divider_padding" />

具體自定義View的細節(jié)不做詳細記錄锦聊,這里只記錄一下在canvas上畫線的重點代碼

@Override
protected void onDraw(Canvas canvas){
    Paint paint = new Paint();
    // canvas的寬度和高度
    int lineWidth = getWidth();
    int lineHeight = getHeight();
    // 設(shè)置線的粗細為canvas的高度
    paint.setStrokeWidth(lineHeight);  
    // 畫左端的白線歹嘹,假設(shè)兩端留白長度是30
    paint.setColor(Color.WHITE); 
    canvas.drawLine(0, lineHeight/2, 30, lineHeight/2, paint);
    // 畫中間的分割線
    paint.setColor(Color.BLACK); 
    canvas.drawLine(30, lineHeight/2, lineWidth-30, lineHeight/2, paint);
    // 畫右端的白線,假設(shè)兩端留白長度是30
    paint.setColor(Color.WHITE); 
    canvas.drawLine(lineWidth-30, lineHeight/2, lineWidth, lineHeight/2, paint);
}

上面代碼的關(guān)鍵是
1括丁、畫線方法:drawLine方法的前四個參數(shù)組成了兩組坐標荞下,參數(shù)和坐標的關(guān)系如下圖:



2伶选、上面的代碼中的startY和stopY都是lineHeight/2史飞,這代表了兩層含義
(1)畫的是一條水平的線
(2)分割線的寬度,是從中間往上下兩側(cè)擴散的
所以設(shè)置startY仰税、stopY為lineHeight/2之后构资,這條線就處于canvas的垂直中間位置,如果再設(shè)置線寬度為canvas的高度陨簇,那么這個時候line的高度就正好占滿了canvas的高度


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吐绵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子河绽,更是在濱河造成了極大的恐慌己单,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件耙饰,死亡現(xiàn)場離奇詭異纹笼,居然都是意外死亡,警方通過查閱死者的電腦和手機苟跪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門廷痘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人件已,你說我怎么就攤上這事笋额。” “怎么了篷扩?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵兄猩,是天一觀的道長。 經(jīng)常有香客問我,道長枢冤,這世上最難降的妖魔是什么援岩? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮掏导,結(jié)果婚禮上享怀,老公的妹妹穿的比我還像新娘。我一直安慰自己趟咆,他們只是感情好添瓷,可當我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著值纱,像睡著了一般鳞贷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上虐唠,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天搀愧,我揣著相機與錄音,去河邊找鬼疆偿。 笑死咱筛,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的杆故。 我是一名探鬼主播迅箩,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼处铛!你這毒婦竟也來了饲趋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤撤蟆,失蹤者是張志新(化名)和其女友劉穎奕塑,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體家肯,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡龄砰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了息楔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寝贡。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖值依,靈堂內(nèi)的尸體忽然破棺而出圃泡,到底是詐尸還是另有隱情,我是刑警寧澤愿险,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布颇蜡,位于F島的核電站价说,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏风秤。R本人自食惡果不足惜鳖目,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缤弦。 院中可真熱鬧领迈,春花似錦、人聲如沸碍沐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽累提。三九已至尘喝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間斋陪,已是汗流浹背朽褪。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留无虚,地道東北人缔赠。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像骑科,于是被迫代替她去往敵國和親橡淑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2 355

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