個人博客地址： 斯科特安的時間
CurveView 是一個輕量級、可高度定制化的折線圖項目。
效果演示
| 顯示全部 | 滾動支持 |
|---|---|
 顯示全部
|
 滾動支持
|
特點
- 支持樣式定制
- 使用 adapter 方式集成數(shù)據(jù)，用法簡單，極易理解
- 支持點上 8 個方向同時添加文字
- 支持顯示全部長度或手動拖動
用法
1. 導(dǎo)入依賴
在項目build.gradle中添加:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
添加依賴
dependencies {
compile 'com.github.auv1107:CurveView:a0e576c041'
}
2. 添加 CurveView
<com.sctdroid.app.uikit.CurveView
android:id="@+id/curve_view"
android:layout_width="match_parent"
android:layout_height="150dp"
app:backgroundColor="#16b7df"
app:corner="1px"
app:contentPaddingStart="40dp"
app:contentPaddingEnd="40dp"
app:contentPaddingBottom="20dp"
app:contentPaddingTop="20dp"
app:strokeWidth="1px"
app:showXLine="false"
app:showXText="true"
app:contentColor="@android:color/white"
app:dotTextColor="@android:color/white"
app:dotTextSize="8sp"
app:axisTextSize="9sp"
app:axisTextColor="@android:color/white"
app:dotTextGravity="center_horizontal|bottom"
app:showAll="true"
app:unitWidth="100dp"
/>
屬性說明
| 屬性 | 類型 | 說明 |
|---|---|---|
| backgroundColor | color | 背景色，暫只支持顏色背景 |
| corner | dimension | 折線平滑度，0 為尖銳的折線，越大越平滑 |
| contentPaddingStart | dimension | 左(開始點)內(nèi)容邊距 |
| contentPaddingEnd | dimension | 右(結(jié)束點)內(nèi)容邊距 |
| contentPaddingBottom | dimension | 下內(nèi)容邊距 |
| contentPaddingTop | dimension | 上內(nèi)容邊距 |
| strokeWidth | dimension | 折線寬度 |
| showXLine | boolean | 是否繪制 x 軸 |
| showXText | String | 是否顯示 x 軸文字 |
| contentColor | color | 折線和坐標(biāo)軸顏色 |
| dotTextColor | color | 點標(biāo)記文字顏色 |
| dotTextSize | dimension | 點標(biāo)記文字尺寸 |
| axisTextSize | dimension | 坐標(biāo)軸文字尺寸 |
| axisTextColor | color | 坐標(biāo)軸文字顏色 |
| showAll | boolean | 是否顯示所有點。true，顯示所有點。false，每格寬度由 unitWidth 指定，支持手指拖動 |
| unitWidth | dimension | x 軸上相鄰兩點寬度，僅在 showAll 為 false 時有效 |
3. 添加 Adapter
CurveView curveView = (CurveView) findViewById(R.id.curve_view);
curveView.setAdapter(new CurveView.Adapter() {
String text = "吾生也有涯，而知也無涯";
/**
* @return 點的數(shù)量
*/
@Override
public int getCount() {
return 7;
}
/**
* level 是 y 軸高度，在 minLevel 和 maxLevel 之間
* @param position
* @return 返回當(dāng)前 position 的 level
*/
@Override
public int getLevel(int position) {
return (int) (15 + (Math.random() * 20));
}
/**
* @return y 軸下限
*/
@Override
public int getMinLevel() {
return 15;
}
/**
* @return y 軸上限
*/
@Override
public int getMaxLevel() {
return 35;
}
/**
* 設(shè)置點上的文字，每個mark是一個，可同時設(shè)置點的 8 個方向的文字
* 注意: Gravity 應(yīng)使用 CurveView.Gravity 類
*
* @param position
* @return
*/
@Override
public Set<CurveView.Mark> onCreateMarks(int position) {
Set<CurveView.Mark> marks = new HashSet<CurveView.Mark>();
CurveView.Mark mark = new CurveView.Mark(getLevel(position) + "°", Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 20, 0, 0);
CurveView.Mark mark1 = new CurveView.Mark(getLevel(position) + "°", Gravity.START | Gravity.CENTER_HORIZONTAL, 0, 0, 0, 20);
marks.add(mark);
marks.add(mark1);
return marks;
}
/**
* 獲取第 i 個點 x 軸上的文字
* @param i
* @return
*/
@Override
public String getXAxisText(int i) {
return text.substring(i, i + 1);
}
});
項目地址: 輕量級、可高度定制化的折線圖]
2017.6.15
斯科特安
