Android - 自定義極坐標(biāo)布局的那個(gè)人肯定沒(méi)學(xué)過(guò) ConstraintLayout

極坐標(biāo)系相對(duì)于笛卡爾坐標(biāo)系衍慎,使用角度和半徑來(lái)指定點(diǎn)的位置转唉。通過(guò)三角函數(shù)公式,兩者可以互相轉(zhuǎn)換稳捆,本質(zhì)上并沒(méi)有區(qū)別赠法。

那么使用極坐標(biāo)布局的意義在哪里呢?既然是使用角度和半徑的乔夯,如果基于角度和半徑可以方便地做出一些效果砖织,那就能提高開(kāi)發(fā)的效率,使代碼更加簡(jiǎn)潔末荐。

ConstraintLayout 中對(duì)極坐標(biāo)的支持非常直接侧纯,ConstraintLayout 的核心思維就是靠關(guān)系,在極坐標(biāo)布局中甲脏,就是作為圓心的 View 與其他 View 之間通過(guò)半徑和角度產(chǎn)生的關(guān)系眶熬。

使用方法

作為圓心的 View 不用設(shè)置任何極坐標(biāo)相關(guān)屬性。除非它相對(duì)于另一個(gè)圓心以極坐標(biāo)布局块请。

圍繞這個(gè)圓心的其他 View 需要設(shè)置 3 個(gè) LayoutParams 屬性:

  • layout_constraintCircle 指定圓心 View 的 id
  • layout_constraintCircleAngle 指定角度娜氏,單位是度°。官方文檔中說(shuō)是 0 - 360 度墩新,實(shí)際上可以設(shè)置大于 360 度的值贸弥。0 度的方向是豎直向上,順時(shí)針角度增大海渊,和鐘表的數(shù)字刻度一樣绵疲。用 ConstraintLayout 畫(huà)個(gè)表盤(pán)很方便有木有。
  • layout_constraintCircleRadius 指定半徑切省,dimension最岗。

代碼示例

<Button
    android:id="@+id/button_center"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Center"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#900000"
    app:layout_constraintCircle="@id/button_center"
    app:layout_constraintCircleAngle="0"
    app:layout_constraintCircleRadius="100dp"
    app:srcCompat="@android:drawable/ic_menu_camera" />

做個(gè)動(dòng)畫(huà)

屬性動(dòng)畫(huà),轉(zhuǎn)個(gè)圈圈朝捆。

private void animate() {
    // 代碼里角度可以用負(fù)值般渡。
    PropertyValuesHolder holderAngle = PropertyValuesHolder.ofFloat("angle", 0, -90, -180, -270);
    PropertyValuesHolder holderRadius = PropertyValuesHolder.ofInt("radius", 0, 100, 200, 300);
    ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(circleAdapter, holderAngle, holderRadius);
    animator.setDuration(2000);
    animator.start();
}
// 沒(méi)有屬性可以直接設(shè)置角度和半徑,自定義一個(gè)對(duì)象來(lái) adapt 這兩個(gè)屬性。
private static class CircleAdapter {
    private View view;
    public CircleAdapter(View view) {
        this.view = view;
    }
    public float getAngle() {
        ViewGroup.LayoutParams lp = view.getLayoutParams();
        if (lp instanceof ConstraintLayout.LayoutParams) {
            return ((ConstraintLayout.LayoutParams) lp).circleAngle;
        }
        return 0;
    }
    public void setAngle(float angle) {
        ViewGroup.LayoutParams lp = view.getLayoutParams();
        if (lp instanceof ConstraintLayout.LayoutParams) {
            ((ConstraintLayout.LayoutParams) lp).circleAngle = angle;
            view.requestLayout();
        }
    }
    public int getRadius() {
        ViewGroup.LayoutParams lp = view.getLayoutParams();
        if (lp instanceof ConstraintLayout.LayoutParams) {
            return ((ConstraintLayout.LayoutParams) lp).circleRadius;
        }
        return 0;
    }
    public void setRadius(int radius) {
        ViewGroup.LayoutParams lp = view.getLayoutParams();
        if (lp instanceof ConstraintLayout.LayoutParams) {
            ((ConstraintLayout.LayoutParams) lp).circleRadius = radius;
            view.requestLayout();
        }
    }
}
畫(huà)質(zhì)有點(diǎn)渣……

題圖:Pixabay License

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末驯用,一起剝皮案震驚了整個(gè)濱河市脸秽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蝴乔,老刑警劉巖记餐,帶你破解...
    沈念sama閱讀 219,490評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異薇正,居然都是意外死亡片酝,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)挖腰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)雕沿,“玉大人,你說(shuō)我怎么就攤上這事猴仑∩舐郑” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,830評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵辽俗,是天一觀的道長(zhǎng)疾渣。 經(jīng)常有香客問(wèn)我,道長(zhǎng)崖飘,這世上最難降的妖魔是什么榴捡? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,957評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮朱浴,結(jié)果婚禮上薄疚,老公的妹妹穿的比我還像新娘。我一直安慰自己赊琳,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6 393
  • 文/花漫 我一把揭開(kāi)白布砰碴。 她就那樣靜靜地躺著躏筏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪呈枉。 梳的紋絲不亂的頭發(fā)上趁尼,一...
    開(kāi)封第一講書(shū)人閱讀 51,754評(píng)論 1 307
  • 那天,我揣著相機(jī)與錄音猖辫,去河邊找鬼酥泞。 笑死,一個(gè)胖子當(dāng)著我的面吹牛啃憎,可吹牛的內(nèi)容都是我干的芝囤。 我是一名探鬼主播,決...
    沈念sama閱讀 40,464評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼悯姊!你這毒婦竟也來(lái)了羡藐?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤悯许,失蹤者是張志新(化名)和其女友劉穎仆嗦,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體先壕,經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瘩扼,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了垃僚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片集绰。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖冈在,靈堂內(nèi)的尸體忽然破棺而出倒慧,到底是詐尸還是另有隱情,我是刑警寧澤包券,帶...
    沈念sama閱讀 35,819評(píng)論 5 346
  • 正文 年R本政府宣布纫谅,位于F島的核電站,受9級(jí)特大地震影響溅固,放射性物質(zhì)發(fā)生泄漏付秕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3 331
  • 文/蒙蒙 一侍郭、第九天 我趴在偏房一處隱蔽的房頂上張望询吴。 院中可真熱鬧,春花似錦亮元、人聲如沸猛计。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,023評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)奉瘤。三九已至,卻和暖如春煮甥,著一層夾襖步出監(jiān)牢的瞬間盗温,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,149評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工成肘, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卖局,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3 373
  • 正文 我出身青樓双霍,卻偏偏與公主長(zhǎng)得像砚偶,于是被迫代替她去往敵國(guó)和親批销。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2 355

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

  • ConstraintLayout 布局繼承自 ViewGroup蟹演,它可以很靈活的指定控件的位置和大小风钻。 注意:Co...
    walker不抽煙閱讀 922評(píng)論 0 0
  • ConstraintLayout ConstraintLayout是一個(gè)允許您以靈活的方式定位和調(diào)整小部件的Vie...
    ayvytr閱讀 635評(píng)論 0 0
  • 文中內(nèi)容主要是介紹如何通過(guò)拖拽模式實(shí)現(xiàn)view界面,所以相關(guān)屬性請(qǐng)自行打開(kāi)text模式查看 本文基于https:/...
    CnPeng閱讀 14,687評(píng)論 1 7
  • *本篇文章已授權(quán)微信公眾號(hào) guolin_blog (郭霖)獨(dú)家發(fā)布 本文是基于constraint-layout...
    zhangshua閱讀 95,252評(píng)論 42 124
  • 傳統(tǒng)布局缺陷 ![]這里寫(xiě)圖片描述 在這樣場(chǎng)景下發(fā)現(xiàn)最多的時(shí)候用到四層線性布局,共嵌套了五層酒请,即使使用Relati...
    kinsomy閱讀 722評(píng)論 1 1