2. 程式人生 > >android如何給整個檢視view圓角顯示

android如何給整個檢視view圓角顯示

阿新 • • 發佈：2019-01-25

關於如何給一個view設定圓角，有哪些方法呢？
1.給該view設定一個圓角的背景，這是最常見的用法。如以下程式碼：

round_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="40dp" />
    <solid android:color="#33ff0000" />
</shape
 
>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

這是給view設定40dp的圓角

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv_list_1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_margin="20dp"
        android:background="@drawable/round_bg" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

效果如圖：

這種方式，正常情況下是沒有問題的，可是如果想實現無縫的圓角顯示，例如，它裡面的一個列表，緊貼著邊緣，即padding為0，會發現，圓角的那部分割槽域，還是有子view在顯示的，並沒有完全的實現真正的圓角，因為只是外層的背景圓角了而已。
那有什麼辦法讓子view也圓角顯示呢？下面說下第二種方法。

2.通過程式碼設定圓角，如下：

/**
     * 設定檢視裁剪的圓角半徑
     * @param radius
     */
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public static void setClipViewCornerRadius(View view, final int radius){

        if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP){
            //不支援5.0版本以下的系統
            return
 
;
        }

        if(view == null) return;

        if(radius <= 0){
            return;
        }

        /*view.setOutlineProvider(new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRoundRect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom(), radius);
            }
        });*/
        view.setOutlineProvider(new ViewOutlineProvider() {

            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRoundRect(0, 0, view.getWidth(),   view.getHeight(), radius);
            }
        });
        view.setClipToOutline(true);

    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

這是5.0版本之後新增的設定view邊緣的方法，不支援5.0以下版本。

那有沒更合適的方法呢，所幸，5.0版本之後，增加了新的元件，CardView,它可以設定圓角，陰影等。

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        app:cardBackgroundColor="#33ff0000"
        app:cardCornerRadius="30dp">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_list_2"
            android:layout_width="150dp"
            android:layout_height="150dp" />
    </android.support.v7.widget.CardView>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

CardView提供了相容版本，當5.0版本以上時，子view被圓角了, 那麼5.0版本以上時，支援嗎？經測試是不支援的，但是系統給它增加padding時子 view完全顯示在佈局裡面，不會超出圓角部分，算是適配的方法，這樣比上一種方法，更加合適了一點。

View#draw方法，提供了一個最基本的繪製機制，子類通常不需要重寫這個方法。我們可以通過檢視其原始碼，在View的draw裡面，它通常需要做以下幾件事情：

1，繪製自己的背景，如果有的話，因為背景始終都在最後面，所以要先畫。

2，如果需要的話，儲存canvas的layer來準備繪製漸變效果，比如說有alpha動畫等。

3，繪製View的內容，其實就是呼叫onDraw方法，讓子類可以繪製自己的內容。

4，繪製自己的child，具體怎麼繪製孩子，ViewGroup會去重寫相應的方法。基類的View只是把呼叫這繪製child的方法，當然這個方法在View裡面，應該是什麼都不做。

5，如果需要的話，畫漸變效果並還原儲存的canvas層。

6，繪製其他的元素，比如scrollbar等。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

通常，View裡面要做這些事情，而且順序不能改變。
注意第4點，繪製子view的方法，這樣的話，如果在繪製子view之前，要是給canvas設定圓角的path，是不是就可以呢。

/**
 * 圓角的RelativeLayout
 *
 */

public class RoundRectLayout extends RelativeLayout {

    private Path mPath;
    private int mRadius;

    private int mWidth;
    private int mHeight;
    private int mLastRadius;

    public static final int MODE_NONE = 0;
    public static final int MODE_ALL = 1;
    public static final int MODE_LEFT = 2;
    public static final int MODE_TOP = 3;
    public static final int MODE_RIGHT = 4;
    public static final int MODE_BOTTOM = 5;

    private int mRoundMode = MODE_ALL;

    public RoundRectLayout(Context context) {
        super(context);

        init();
    }

    public RoundRectLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        init();
    }

    private void init(){

        setBackgroundDrawable(new ColorDrawable(0x33ff0000));

        mPath = new Path();
        mPath.setFillType(Path.FillType.EVEN_ODD);

        setCornerRadius(ViewUtil.dp2px(getContext(), 30));
    }

    /**
     * 設定是否圓角裁邊
     * @param roundMode
     */
    public void setRoundMode(int roundMode){
        mRoundMode = roundMode;
    }

    /**
     * 設定圓角半徑
     * @param radius
     */
    public void setCornerRadius(int radius){
        mRadius = radius;
    }

    private void checkPathChanged(){

        if(getWidth() == mWidth && getHeight() == mHeight && mLastRadius == mRadius){
            return;
        }

        mWidth = getWidth();
        mHeight = getHeight();
        mLastRadius = mRadius;

        mPath.reset();

        switch (mRoundMode){
            case MODE_ALL:
                mPath.addRoundRect(new RectF(0, 0, mWidth, mHeight), mRadius, mRadius, Path.Direction.CW);
                break;
            case MODE_LEFT:
                mPath.addRoundRect(new RectF(0, 0, mWidth, mHeight),
                        new float[]{mRadius, mRadius, 0, 0, 0, 0, mRadius, mRadius},
                        Path.Direction.CW);
                break;
            case MODE_TOP:
                mPath.addRoundRect(new RectF(0, 0, mWidth, mHeight),
                        new float[]{mRadius, mRadius, mRadius, mRadius, 0, 0, 0, 0},
                        Path.Direction.CW);
                break;
            case MODE_RIGHT:
                mPath.addRoundRect(new RectF(0, 0, mWidth, mHeight),
                        new float[]{0, 0, mRadius, mRadius, mRadius, mRadius, 0, 0},
                        Path.Direction.CW);
                break;
            case MODE_BOTTOM:
                mPath.addRoundRect(new RectF(0, 0, mWidth, mHeight),
                        new float[]{0, 0, 0, 0, mRadius, mRadius, mRadius, mRadius},
                        Path.Direction.CW);
                break;
        }

    }

    @Override
    public void draw(Canvas canvas) {

        if(mRoundMode != MODE_NONE){
            int saveCount = canvas.save();

            checkPathChanged();

            canvas.clipPath(mPath);
            super.draw(canvas);

            canvas.restoreToCount(saveCount);
        }else {
            super.draw(canvas);
        }


    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121

這裡，複寫draw方法，在super.draw方法之前，給當前canvas設定path，這個path設定為圓角的方形。
然後在這個view包裹在自 view外，

<round.llh.com.roundtotalview.RoundRectLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_list_4"
            android:layout_width="150dp"
            android:layout_height="150dp" />
</round.llh.com.roundtotalview.RoundRectLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

這樣經測試，5.0以上和以下版本效果都是可以的，當然消耗也是存在的，每次繪製之前，都要canvas.clipPath(mPath);，在複雜的view或者動畫中，有可能不流暢，所有請謹慎使用。

以上四種方法各有利弊，大家可以選擇自己合適的方式來實現圓角。

原文連結：https://blog.csdn.net/hesong1120/article/details/52005895

相關推薦

android如何給整個檢視view圓角顯示

關於如何給一個view設定圓角，有哪些方法呢？ 1.給該view設定一個圓角的背景，這是最常見的用法。如以下程式碼：round_bg.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns

[Xcode10 實際操作]二、檢視與手勢-(5)給影象檢視新增圓角效果

本文將演示給矩形圖片新增圓角效果 1 import UIKit 2 3 class ViewController: UIViewController { 4 5 override func viewDidLoad() { 6 super.viewDid

android給自定義view新增XML屬性

1.在value下新建檔案(檔名隨便)，把需要的名稱和型別放進去 <?xml version="1.0" encoding="utf-8"?> <resources>

android: RoundCornerImageView 圖片檢視 倒圓角

需求：固定大小的ImageView，但是大小不固定的ImageBitmap，想要使用這個大小不一的ImageBitmap填充滿這個ImageView，從而讓整個檢視看起來整齊 這個可以直接在layout.xml這樣實現的 <ImageView android:id="

Swift 給檢視新增邊框，給影象檢視新增圓角效果,給影象檢視新增陰影效果

// MARK:給檢視新增邊框，給影象檢視新增圓角效果,給影象檢視新增陰影效果     private func addLayer(){         let img = UIImage(named: "image")         let imgView =

Android 如何動態新增 View 並顯示在指定位置。

引子 最近，在做產品的需求的時候，遇到 PM 要求在某個按鈕上新增一個新手引導動畫，引導使用者去點選。作為 RD，我嘩啦啦的就寫好相關邏輯了。自測完成後，提測，PM Review 效果。 看完後，PM 提了個問題，這個動畫效果範圍能不能再大一點？PM 解釋到按鈕本身大小不是很大，會導致引導效果不夠明顯，也會導

mono for android Listview 裡面按鈕 view Button click 註冊方法 並且傳值給其他Activity 主要是context

需求：為Listview的Item裡面的按鈕Button新增一個事件，單擊按鈕時通過事件傳值並跳轉到新的頁面。 環境：mono 效果：    佈局程式碼    主佈局 1 <?xml version="1.0" encoding="utf-8"?> 2

Xamarin.Android ImageView 圖片圓角顯示

第一步：在 values 資料夾下新增 Attrs.xml 檔案 <?xml version="1.0" encoding="utf-8" ?> <resources> <declare-styleable name="RoundImageView">

ImageView的Scaletype決定了圖片在View上顯示時的樣子，如進行何種比例的縮放，及顯示圖片的整體還是部分，等等。 設定的方式包括： 1. 在layout xml中定義Android:s

ImageView的Scaletype決定了圖片在View上顯示時的樣子，如進行何種比例的縮放，及顯示圖片的整體還是部分，等等。 設定的方式包括： 1. 在layout xml中定義Android:scaleType="CENTER" 2. 或在程式碼中呼叫i

自定義View實現 android圓形統計圖及百分比顯示

兄弟們  廢話不多說，直接上程式碼了： package com.zz.kotlintest.view; import android.content.Context; import android.content.res.Resources; import andr

Android開發之給控制元件設定圓角邊框

先上效果圖： 具體步驟： 1.在drawable資料夾下新建一個xml檔案。 2.在裡面填上以下內容： <?xml version="1.0" encoding="utf-8"?> <!--自定義的控制元件圓角背景--> <shape xm

android 給view添加陰影

布局 corn xmlns ati auto out schema port support 1、方法一： 使用 CardView 布局 <android.support.v7.widget.CardView xmlns:android="http://s

Android給View設定動畫沒有效果

這兩天在第三方類庫中的程式碼，需要在原來的xml中新增自己的佈局，然後播放動畫，將佈局寫好後，include到第三方的xml佈局中，然後用屬性動畫開始播放，結果無論怎麼樣都沒效果，用補間動畫也是沒有效果。但是要是播放，第三方當前佈局的某一個控制元件動畫，就有效果

Android 設定TextView或者view其他檢視的圖示

/** * 設定TextView右側圖示 * * @param textView */ public static void setTextViewRightDrawable(TextView textView, int icon) { Drawable dr

Android RecyclerView中用fresco展示圓角圖片,點選檢視詳情(或原生解析)

package com.example.earl.lianxilianxi; import android.content.Context; import android.content.Intent; import android.net.Uri; import android.support.v7.wi

eclipse rcp顯示/隱藏檢視(view)

/**   * 顯示檢視   * @param id 檢視ID   */   public static void showView(String id){  if(id == null || id.trim().equals("")){  return;  }  try

Android自定義檢視四：定製onMeasure強制顯示為方形

這個系列是老外寫的，乾貨！翻譯出來一起學習。如有不妥，不吝賜教！ 上一篇開發之後的效果如上圖。不過看著這張圖，需要注意的不是我們自定義檢視展示了什麼，而是這個檢視的大小和位置。你會看到這個折線圖有一個特定的大小（size）。這個size是怎麼定的呢？現

Android 給類及方法自動添加註釋 高亮顯示選中詞

修改作者、日期註釋格式：開啟Windows->Preferences->Java->Code Style->Code Templates 裡面的types 是為當前類新增頭部註釋。在頁面上alt＋shift+J即可生成methods 生成的是方法的

Android中自定義檢視View

標籤： 前言 好長時間沒寫blog了，心裡感覺有點空蕩蕩的，今天有時間就來寫一個關於自定義檢視的的blog吧。關於這篇blog，網上已經有很多案例了，其實沒什麼難度的。但是我們在開發的過程中有時候會用到一些自定義的View以達到我們所需要的效果。其實網上的很多

Android--›圓角圖片,圓角任意View,圓角父佈局Layout(任意形狀的View且超簡潔實現)

相信大家對圓角圖片已經非常熟悉了,但是圓角任意View,和圓角父佈局,甚至是任意形狀的View,肯定還是比較陌生的. 今天就揭開她的面紗. //通常情況下,圓角圖片是這樣的... public static Bitmap getRoundedCornerBit