目錄

• 前言
• shape繪制

• 矩形
• 橢圓
• 線
• 環

• 用shape繪制SeekBar
• 最后

---

前言

在沒有UI設計師的時候, 或者是想簡單看下效果的時候, 用shape進行快速繪制是極好的! 官方文檔.

---

shape繪制

一共有四種shape: rectangle, oval, line, ring.

矩形

我們一個一個來看, 首先是矩形:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!-- 尺寸 --><sizeandroid:width="160dp"android:height="80dp" /><!-- 顏色 --><!--<solid android:color="@color/colorPrimary" />--><!-- 內間距 --><paddingandroid:bottom="8dp"android:left="8dp"android:right="8dp"android:top="8dp" /><!-- 漸變 --><gradientandroid:angle="45"android:endColor="@color/colorPrimary"android:startColor="@color/colorAccent"android:type="linear" /><!-- 圓角 --><!--<corners android:radius="200dp" />--><!-- 圓角單獨設置 --><cornersandroid:bottomLeftRadius="0dp"android:bottomRightRadius="0dp"android:topLeftRadius="40dp"android:topRightRadius="40dp" /><!-- 描邊 --><strokeandroid:width="2dp"android:color="#666"android:dashGap="4dp"android:dashWidth="4dp" />
</shape>
復制代碼

• 漸變gradient是會覆蓋顏色的, 如果你想要純色, 直接設置顏色值即可, 就是設置solid中的color.
• 順帶一提, solid只有color一個參數.
• 如果你沒有漸變gradient, 也不寫solid, 那么將會是空心的.
• 漸變gradient的type參數有3個:

• linear 線性漸變
• sweep 掃描漸變
• radial 放射漸變, 需要配合參數gradientRadius

• 圓角corners可以直接設置radius, 也可以一個一個指定.
• 描邊stroke的話不寫dashGap, dashWidth就會是實線, dashWidth代表虛線寬度, dashGap代表虛線間隔.
• 內間距padding和尺寸size就不提了, 大家都懂的.

橢圓

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!-- 尺寸 --><sizeandroid:width="160dp"android:height="80dp" /><!-- 顏色 --><!--<solid android:color="@color/colorPrimary" />--><!-- 內間距 --><paddingandroid:bottom="8dp"android:left="8dp"android:right="8dp"android:top="8dp" /><!-- 漸變 --><gradientandroid:centerColor="@color/colorPrimary"android:endColor="@color/colorPrimaryDark"android:startColor="@color/colorAccent"android:type="sweep" /><!-- 描邊 --><strokeandroid:width="1dp"android:color="#333" />
</shape>
復制代碼

• 漸變是最多可以設置三種顏色, 意思一看便知了:

• startColor
• centerColor
• endColor

• 一般橢圓都會用來繪制實心的小圓點.

線

線就很簡單了:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line"><!-- 描邊 --><strokeandroid:width="8dp"android:color="@color/colorPrimary"android:dashGap="8dp"android:dashWidth="6dp" />
</shape>
復制代碼

環

最后來看環, 它有些特有屬性:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadiusRatio="4"android:shape="ring"android:thicknessRatio="100"android:useLevel="false"><!-- 尺寸 --><sizeandroid:width="200dp"android:height="200dp" /><!-- 漸變 --><gradientandroid:angle="0"android:centerColor="@color/colorPrimaryDark"android:endColor="@color/colorPrimary"android:startColor="@color/colorAccent"android:type="sweep" /><!-- 描邊 --><strokeandroid:width="1dp"android:color="#777"android:dashGap="4dp"android:dashWidth="4dp" />
</shape>
復制代碼

• thicknessRatio 指的是環厚度百分比, 默認是9, 比如說這里寬度是200dp, thicknessRatio是100, 環厚度就是200dp / 100 = 2dp. 當然, 你可以直接用thickness設置厚度.
• innerRadiusRatio 是內環百分比, 默認是3, 就是指用寬度 / 百分比得到的值就是內環半徑. 同樣可以用innerRadius直接設置.

---

用shape繪制SeekBar

我知道有很多非常好看的自定義進度條, 但是我寫這個SeekBar是想補充下shape的使用, 用非常少量的代碼實現自定義進度條. 來看看效果圖:

• 實現

<SeekBarandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="@dimen/eight_dp"android:max="200"android:maxHeight="@dimen/eight_dp"android:minHeight="@dimen/eight_dp"android:progressDrawable="@drawable/layout_progress"android:thumb="@drawable/shape_circle" />
復制代碼

簡單解釋下幾個要點屬性:

• max代表進度條最大的值.
• maxHeight, minHeight可以設置進度條寬度, 我喜歡稍微寬一點的.
• thumb設置滑塊, 可以是圖片, 可以是shape寫的設置.
• progressDrawable代表進度條的外觀, 可以是圖片, 可以是shape寫的設置.

再來看看滑塊和進度條外觀具體代碼, 進度條可以設置背景, 進度, 和第二進度. 滑塊的話, 你想畫成什么樣都行.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:id="@android:id/background"><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@android:color/darker_gray" /></shape></item><item android:id="@android:id/secondaryProgress"><clip><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@color/colorAccent" /></shape></clip></item><item android:id="@android:id/progress"><clip><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@android:color/holo_blue_light" /></shape></clip></item>
</layer-list>
復制代碼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="@android:color/holo_blue_light" /><strokeandroid:width="@dimen/one_dp"android:color="@android:color/holo_blue_light" /><sizeandroid:width="@dimen/sixteen_dp"android:height="@dimen/sixteen_dp" />
</shape>
復制代碼

java部分的話, 用Handler實例postDelayed方法讓進度條跑起來就可以看到效果了. 這里設定50ms發一次消息.

findViewById(R.id.cv_start).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (mRunnable == null) {mRunnable = new MyRunnable();mHandler.postDelayed(mRunnable, 0);}}
});findViewById(R.id.cv_stop).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mHandler.removeCallbacks(mRunnable);mRunnable = null;}
});
復制代碼

private class MyRunnable implements Runnable {@Overridepublic void run() {int progress = mSbTest.getProgress();mTvProgress.setText(String.valueOf(progress));mSbTest.setProgress(++progress);mSbTest.setSecondaryProgress(progress + 10);int progress2 = mSbTest2.getProgress();mTvProgress2.setText(String.valueOf(progress2));mSbTest2.setProgress(++progress2);mSbTest2.setSecondaryProgress(progress2 + 20);mHandler.postDelayed(this, 50);}
}
復制代碼

---

最后

我個人還是偏向用shape繪制的, 圖片一出理不好就是內存溢出啊, 形變啊, 還要注意分辨率, 真心頭大. 喜歡記得點贊哦, 暗中關注我也是可以的~

---