구현할 내용
- 13. json 데이터로 ListView 생성하기에서 개별 ListView를 클릭하면 생성되는 페이지 구현
- json 파일 안에 있는 정보로 ProgressBar 생성
- 커스텀 ProgressBar: 둥근 모서리, 그라데이션
1. 커스텀 progressbar
- res 폴더의 drawable에 xml 파일 생성
- 이름은 상관없으나 예시 파일명은 progressbar_happy.xml
- gradient으로 색을 2개 지정
- corners radius로 모서리의 둥근 정도를 지정
<?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="10dp" />
<solid android:color="#D5D5D5" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="10dp" />
<solid android:color="#B2CCFF" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="10dp" />
<gradient
android:endColor="#B5081B"
android:startColor="#FA87AA"/>
</shape>
</clip>
</item>
</layer-list>2. activity_result_detail.xml
- 화면 디자인
- 기타 코드 모두 생략하고 결과 부분만 작성
- 감싸고 있는 LinearLayout의 @drawable/round_backgroud는 둥근 모서리의 흰배경을 따로 만든 xml이다. 생략 가능
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_margin="10dp"
android:background="@drawable/round_backgroud">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="긍정" />
<ProgressBar
android:id="@+id/happy"
android:max="100"
android:progress="50"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:progressDrawable="@drawable/progressbar_happy"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"/>
<TextView
android:id="@+id/happypercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00%"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="분노" />
<ProgressBar
android:id="@+id/angry"
android:max="100"
android:progress="50"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:progressDrawable="@drawable/progressbar_angry"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"/>
<TextView
android:id="@+id/angrypercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00%"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="공포" />
<ProgressBar
android:id="@+id/fear"
android:max="100"
android:progress="50"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:progressDrawable="@drawable/progressbar_fear"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"/>
<TextView
android:id="@+id/fearpercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00%"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="슬픔" />
<ProgressBar
android:id="@+id/sad"
android:max="100"
android:progress="50"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:progressDrawable="@drawable/progressbar_sad"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"/>
<TextView
android:id="@+id/sadpercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00%"/>
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/keyword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#키워드 #키워드 #키워드"
android:textStyle="bold"
android:textColor="@color/green"
android:textAlignment="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"/>
<TextView
android:id="@+id/summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="여기에 요약"
android:textAlignment="center"
android:paddingBottom="10dp"
/>
</LinearLayout>3. ResultDetailActivity.java
- RecordListActivity로부터 jsonObject의 정보를 받아옴
public class ResultDetailActivity extends AppCompatActivity {
jsonModel model;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_result_detail);
getSelectresult();
setValues();
}
// jsonObject를 받아온다
private void getSelectresult(){
Intent intent = getIntent();
model = (jsonModel) intent.getSerializableExtra("model");
}
// json value 값을 읽어오고 TextView에 기록
private void setValues(){
DecimalFormat df = new DecimalFormat("00.0");
TextView phoneNum = findViewById(R.id.phoneNum);
phoneNum.setText(model.getInfo().getNumber());
ProgressBar happyBar = findViewById(R.id.happy);
ProgressBar angryBar = findViewById(R.id.angry);
ProgressBar fearBar = findViewById(R.id.fear);
ProgressBar sadBar = findViewById(R.id.sad);
happyBar.setProgress((int) (model.getRatio().getPositive() * 100));
angryBar.setProgress((int) (model.getRatio().getAngry() * 100));
fearBar.setProgress((int) (model.getRatio().getFear() * 100));
sadBar.setProgress((int) (model.getRatio().getSad() * 100));
TextView happypercent = findViewById(R.id.happypercent);
TextView angrypercent = findViewById(R.id.angrypercent);
TextView fearpercent = findViewById(R.id.fearpercent);
TextView sadpercent = findViewById(R.id.sadpercent);
happypercent.setText(String.valueOf(df.format(model.getRatio().getPositive()*100)) + "%");
angrypercent.setText(String.valueOf(df.format(model.getRatio().getAngry()*100)) + "%");
fearpercent.setText(String.valueOf(df.format(model.getRatio().getFear()*100)) + "%");
sadpercent.setText(String.valueOf(df.format(model.getRatio().getSad()*100)) + "%");
TextView keyword = findViewById(R.id.keyword);
keyword.setText(model.getKeyword());
TextView summary = findViewById(R.id.summary);
summary.setText(model.getSummary());
}
}4. RecordListActivity.java
- OnCreate 맨 마지막에 아래 코드 추가
- jsonModel은 json 파일 형태를 나타내는 클래스 (따로 생성)
getNumber, setDate 등이 저장됨
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
jsonModel model = (jsonModel) adapterView.getItemAtPosition(i);
Intent intent = new Intent(RecordListActivity.this, ResultDetailActivity.class);
intent.putExtra("model", model);
startActivity(intent);
}
});