9. 統計模組（二）之統計詳情

安卓開發 · 發表 2018-12-13 12:20:25

摘要：上一節對歡迎模組進行了綜述(可參見3. 首頁模組進行了解)，接下來將從統計模組開始詳細介紹：統計模組（一）之統計統計模組（二）之統計詳情知識點使用第三方圖表庫HelloCharts 學會使用餅狀圖、折線圖或柱狀圖統...

上一節對歡迎模組進行了綜述(可參見3. 首頁模組進行了解)，接下來將從統計模組開始詳細介紹：

ofollow,noindex">統計模組（一）之統計
統計模組（二）之統計詳情

知識點

使用第三方圖表庫HelloCharts
學會使用餅狀圖、折線圖或柱狀圖

統計詳情

任務綜述：

“統計詳情”介面主要使用第三方圖表庫HelloCharts，通過餅狀圖、折線圖以及柱狀圖展示該學科的市場資薪比例，本模組以Java學科和Android學科為例進行演示。

“Android統計”詳情介面

任務分析：

“Android統計”詳情介面主要以餅狀圖的形式展示Android薪資的佔比情況，介面效果如圖所示。

“Android統計”詳情介面

任務實施：

（1）建立“Android統計”詳情介面。在activity包中建立AndroidCountActivity，並將佈局檔名指定為activity_android_count。

（2）引入第三方庫hello-library。在“Android統計”詳情介面中，餅狀圖是通過引入第三方庫完成的。在AS中，選擇File/New/Import Module，把第三方庫hellocharts-library匯入專案，選中專案，右擊選擇Open Module Settings/Dependencies/+/Module Dependency，把hellocharts-library庫匯入主專案，hellocharts-library庫的詳情如圖所示。

image.png

（3）放置介面控制元件。在佈局檔案中，放置一個TextView控制元件用於顯示資訊的文字；一個PieChartView控制元件用於顯示餅狀圖。

activity_android_count.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<include layout="@layout/main_title_bar" />
<TextView
android:id="@+id/tv_intro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="20dp"
android:textColor="@android:color/black"
android:textSize="14sp" />
<lecho.lib.hellocharts.view.PieChartView
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"/>
</LinearLayout>

“Android統計”詳情介面邏輯程式碼

任務分析：

“Android統計”詳情介面主要展示一個薪資佔比的餅狀圖，該餅狀圖是通過HelloCharts庫中的PieChartView控制元件實現的。

任務實施：

（1）獲取介面控制元件。在AndroidCountActivity中建立介面控制元件的初始化方法init()，用於獲取“Android統計”詳情介面所要用到的控制元件。

（2）設定餅狀圖中的文字。在AndroidCountActivity中建立一個toggleLabels()方法，用於設定餅狀圖中的文字效果。

（3）設定餅狀圖中的扇形。由於餅狀圖中有4個顏色和文字不同的扇形，因此需要在AndroidCountActivity中建立一個generateData()方法設定這些屬性。

AndroidCountActivity.java

public class AndroidCountActivity extends AppCompatActivity {
private TextView tv_main_title, tv_back, tv_intro;
private RelativeLayout rl_title_bar;
private SwipeBackLayout layout;
private PieChartView chart;
private PieChartData data;
private boolean hasLabels = false;
private boolean hasLabelsOutside = false;
private boolean isExploded = false;
private boolean hasLabelForSelected = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
layout = (SwipeBackLayout) LayoutInflater.from(this).inflate(
R.layout.base, null);
layout.attachToActivity(this);
setContentView(R.layout.activity_android_count);
init();
}
private void init() {
tv_main_title = (TextView) findViewById(R.id.tv_main_title);
tv_main_title.setText("Android統計");
rl_title_bar = (RelativeLayout) findViewById(R.id.title_bar);
rl_title_bar.setBackgroundColor(getResources().getColor(R.color.
rdTextColorPress));
tv_back = (TextView) findViewById(R.id.tv_back);
tv_back.setVisibility(View.VISIBLE);
tv_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
AndroidCountActivity.this.finish();
}
});
tv_intro = (TextView) findViewById(R.id.tv_intro);
tv_intro.setText(getResources().getString(R.string.android_count_text));
chart = (PieChartView) findViewById(R.id.chart);
toggleLabels();
chart.startDataAnimation();
}
private void generateData() {
int numValues = 4; //設定餅狀圖扇形的數量
List<SliceValue> values = new ArrayList<SliceValue>();
for (int i = 0; i < numValues; ++i) {
switch (i+1) {
case 1: //餅狀圖中的第一個扇形
SliceValue sliceValue1 = new SliceValue(i + 1, ChartUtils.COLOR_GREEN);
sliceValue1.setTarget(4);//扇形的大小
sliceValue1.setLabel("月薪8-15k");//扇形中的文字
values.add(sliceValue1);
break;
case 2: //餅狀圖中的第二個扇形
SliceValue sliceValue2 = new SliceValue(i + 1,ChartUtils.COLOR_VIOLET);
sliceValue2.setTarget(3);
sliceValue2.setLabel("月薪15-20k");
values.add(sliceValue2);
break;
case 3: //餅狀圖中的第三個扇形
SliceValue sliceValue3 = new SliceValue(i + 1,ChartUtils.COLOR_BLUE);
sliceValue3.setTarget(2);
sliceValue3.setLabel("月薪20-30k");
values.add(sliceValue3);
break;
case 4: //餅狀圖中的第四個扇形
SliceValue sliceValue4 = new SliceValue(i + 1,ChartUtils.COLOR_ORANGE);
sliceValue4.setTarget(1);
sliceValue4.setLabel("月薪30k+");
values.add(sliceValue4);
break;
}
}
data = new PieChartData(values);
data.setHasLabels(hasLabels);
data.setHasLabelsOnlyForSelected(hasLabelForSelected);
data.setHasLabelsOutside(hasLabelsOutside);
if (isExploded) {
data.setSlicesSpacing(24);
}
chart.setPieChartData(data);
}
private void toggleLabels() {
hasLabels = !hasLabels;
if (hasLabels) {
hasLabelForSelected = false;
chart.setValueSelectionEnabled(hasLabelForSelected);
if (hasLabelsOutside) {
chart.setCircleFillRatio(0.7f);
} else {
chart.setCircleFillRatio(1.0f);
}
}
generateData();
}
}

（4）修改strings.xml檔案。由於“Android統計”詳情介面中的一個文字介紹資訊相對較長，因此為了方便，可以把該文字寫在res/values資料夾的strings.xml檔案中。

<string name="android_count_text">黑馬程式員Android+物聯網課程全面升級, 以下是薪資的高低所佔的比例餅狀圖：</string>

（5）修改CountFragment.java檔案。由於點選“統計”介面的9個學科按鈕中的第一個按鈕（Android按鈕）會跳轉到“Android統計”詳情介面，因此需要找到CountFragment，在該檔案的addBuilder()方法中的註釋“//跳轉到Android統計詳情介面”語句下方新增如下程式碼：

Intent android = new Intent(getActivity(), AndroidCountActivity.class);
startActivity(android);

（6）修改清單檔案。由於“Android統計”詳情介面向右側滑可以關閉該介面，因此需要給該介面新增透明主題的樣式，在清單檔案AndroidCountActivity對應的activity標籤中新增如下程式碼：

android:theme="@style/AppTheme.TransparentActivity"

“Java統計”詳情介面

任務分析：

“Java統計”詳情介面主要是以柱狀圖和折線圖的形式展示JavaEE工程師不同的工作經驗對應的薪資情況。

“Java統計”詳情介面

任務實施：

（1）建立“Java統計”詳情介面。在activity包中建立一個JavaCountActivity，並把佈局檔名指定為activity_java_count。

（2）放置介面控制元件。

1個TextView控制元件用於顯示介紹資訊的文字；

一個LineChartView控制元件用於顯示折線圖；

一個ColumnChartView控制元件用於顯示柱狀圖。

activity_java_count.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<include layout="@layout/main_title_bar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_intro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="14sp" />
<lecho.lib.hellocharts.view.LineChartView
android:id="@+id/chart_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="@android:color/darker_gray" />
<lecho.lib.hellocharts.view.ColumnChartView
android:id="@+id/chart_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

“Java統計”詳情介面邏輯程式碼

任務分析：

“Java統計”詳情介面主要展示了JavaEE工程師不同的工作經驗所對應的薪資情況圖，在該圖中用到的柱狀圖與折線圖分別是通過HelloCharts庫中的ColumnChartView和LineChartView實現的。

任務實施：

（1）獲取介面控制元件。在JavaCountActivity中建立介面控制元件的初始化方法init()，用於獲取“Java統計”詳情介面所要用到的控制元件。

（2）設定柱狀圖。在JavaCountActivity中建立一個generateColumnData()方法，用於設定柱狀圖中每個條形圖的值、顏色以及橫座標的值。

（3）設定折線圖。在JavaCountActivity中建立generateInitialLineData()和generateLineData()方法，分別用於初始化折線圖與設定折線圖上每個點的值。

JavaCountActivity.java

public class JavaCountActivity extends AppCompatActivity {
private TextView tv_main_title, tv_back;
private RelativeLayout rl_title_bar;
private SwipeBackLayout layout;
public final static String[] years = new String[]{"應屆生", "1-2年", "2-3年", "3-5 年", "5-8年", "8-10年", "10年"};
private LineChartView chartTop;
private ColumnChartView chartBottom;
private LineChartData lineData;
private ColumnChartData columnData;
private int[] columnY = {0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000,
90000, 100000};
private TextView tv_intro;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
layout = (SwipeBackLayout) LayoutInflater.from(this).inflate(
R.layout.base, null);
layout.attachToActivity(this);
setContentView(R.layout.activity_java_count);
init();
}
private void init() {
tv_main_title = (TextView) findViewById(R.id.tv_main_title);
tv_main_title.setText("Java統計");
rl_title_bar = (RelativeLayout) findViewById(R.id.title_bar);
rl_title_bar.setBackgroundColor(getResources().getColor(R.color.
rdTextColorPress));
tv_intro = (TextView) findViewById(R.id.tv_intro);
tv_intro.setText(getResources().getString(R.string.java_count_text));
tv_back = (TextView) findViewById(R.id.tv_back);
tv_back.setVisibility(View.VISIBLE);
tv_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
JavaCountActivity.this.finish();
}
});
chartTop = (LineChartView) findViewById(R.id.chart_top);
generateInitialLineData();
chartBottom = (ColumnChartView) findViewById(R.id.chart_bottom);
generateColumnData();
}
private void generateColumnData() {
int numColumns = years.length;
List<AxisValue> axisValues = new ArrayList<AxisValue>();
List<AxisValue> axisYValues = new ArrayList<AxisValue>();
List<Column> columns = new ArrayList<Column>();
List<SubcolumnValue> values;
for (int k = 0; k < columnY.length; k++) {
axisYValues.add(new AxisValue(k).setValue(columnY[k]));
}
for (int i = 0; i < numColumns; ++i) {
values = new ArrayList<SubcolumnValue>();
switch (i) { //設定柱狀圖中的每個條形圖的值與顏色
case 0:
values.add(new SubcolumnValue((float) 6000, ChartUtils.COLOR_GREEN));
break;
case 1:
values.add(new SubcolumnValue((float) 13000, ChartUtils.
COLOR_ORANGE));
break;
case 2:
values.add(new SubcolumnValue((float) 20000, ChartUtils.COLOR_BLUE));
break;
case 3:
values.add(new SubcolumnValue((float) 26000, ChartUtils.COLOR_RED));
break;
case 4:
values.add(new SubcolumnValue((float) 35000, ChartUtils.
COLOR_VIOLET));
break;
case 5:
values.add(new SubcolumnValue((float) 50000, ChartUtils.
COLOR_ORANGE));
break;
case 6:
values.add(new SubcolumnValue((float) 100000, ChartUtils.COLOR_BLUE));
break;
}
axisValues.add(new AxisValue(i).setLabel(years[i]));
columns.add(new Column(values).setHasLabelsOnlyForSelected(true));
}
columnData = new ColumnChartData(columns);
columnData.setAxisXBottom(new Axis(axisValues).setHasLines(true));
columnData.setAxisYLeft(new Axis(axisYValues).setHasLines(true).
setMaxLabelChars(6));
chartBottom.setColumnChartData(columnData);
//這個設定會保證柱狀圖在點選年數的條目時條目會亮起來
chartBottom.setValueSelectionEnabled(true);
chartBottom.setZoomType(ZoomType.HORIZONTAL);
}
private void generateInitialLineData() {
int numValues = 7;
List<AxisValue> axisValues = new ArrayList<AxisValue>();
List<PointValue> values = new ArrayList<PointValue>();
for (int i = 0; i < numValues; ++i) {
values.add(new PointValue(i, 0));
axisValues.add(new AxisValue(i).setLabel(years[i]));
}
Line line = new Line(values);
line.setColor(ChartUtils.COLOR_GREEN).setCubic(true);
List<Line> lines = new ArrayList<Line>();
lines.add(line);
lineData = new LineChartData(lines);
lineData.setAxisXBottom(new Axis(axisValues).setHasLines(true));
lineData.setAxisYLeft(new Axis().setHasLines(true).setMaxLabelChars(6));
chartTop.setLineChartData(lineData);
chartTop.setViewportCalculationEnabled(false);
Viewport v = new Viewport(0, 100000, 6, 0);
chartTop.setMaximumViewport(v);
chartTop.setCurrentViewport(v);
chartTop.setZoomType(ZoomType.HORIZONTAL);
generateLineData();
}
private void generateLineData() {
Line line = lineData.getLines().get(0);
for (int i = 0; i < line.getValues().size(); i++) {
PointValue value = line.getValues().get(i);
switch (i) {//設定折線圖上的每個點的值
case 0:
value.setTarget(value.getX(), (float) 6000);
break;
case 1:
value.setTarget(value.getX(), (float) 13000);
break;
case 2:
value.setTarget(value.getX(), (float) 20000);
break;
case 3:
value.setTarget(value.getX(), (float) 26000);
break;
case 4:
value.setTarget(value.getX(), (float) 35000);
break;
case 5:
value.setTarget(value.getX(), (float) 50000);
break;
case 6:
value.setTarget(value.getX(), (float) 100000);
break;
}
}
chartTop.startDataAnimation(300);
}
}

（4）修改strings.xml檔案。由於“Java統計”詳情介面中有一個文字介紹資訊相對較長，因此為了方便，可以把文字寫在res/values資料夾中strings.xml檔案中。

<string name="java_count_text">以下是JavaEE工程師不同工作經驗對應的不同薪資情況,具體如折線圖與柱狀圖所示:</string>

（5）修改CountFragment.java檔案。由於點選“統計”介面的9個學科按鈕中的第二個按鈕（Java按鈕）會跳轉到“Java統計”詳情介面，因此需要找到CountFragment.java檔案，在該檔案的addBuilder()方法中的註釋“//跳轉到Java統計詳情介面”下方新增如下程式碼：

Intent java = new Intent(getActivity(), JavaCountActivity.class);
startActivity(java);

（6）修改清單檔案。由於“Java統計”詳情介面向右滑動會關閉該介面，因此需要給該介面新增透明主題的樣式，在清單檔案的JavaCountActivity對應的activity標籤中新增如下程式碼：

android:theme="@style/AppTheme.TransparentActivity"

9. 統計模組（二）之統計詳情

知識點

統計詳情

activity_android_count.xml

AndroidCountActivity.java

activity_java_count.xml

JavaCountActivity.java

您可能也會喜歡…