(Android Step by Step) KIS OpenAPI 시세창 디자인 바꿔보기

이번 포스트에서는 시세창 디자인을 좀 더 보기 좋고 가독성 있게 바꿔보는 예제입니다. 사실 UI 디자인은 좀 어렵고, 시간이 드는 작업이긴 하지만, 디자인이 App의 Quility를 높여 주기 때문에 시간을 투자할 필요가 있습니다.

As-Is	To-Be

 

 

1. list_item Layout 변경

 

RecyclerView의 실제 Data를 담는 list_item Layout을 지난번에는 빠르게 보기 위해서 TableLayout을 사용했는데, 이번에는  TextView 및 ImageView를 포함한 CardView를 만들어 줍니다. 

CardView Layout 안에서는 아래 코드처럼 margin을 이용하여 2열 배치 및 정렬을 해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="3dp"
    app:cardElevation="3dp"
    android:padding="1dp">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="54dp">

        <TextView
            android:id="@+id/stockName"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="StockName"
            android:textStyle="bold"
            android:textSize="18sp"
            android:layout_marginTop="2dp"
            android:layout_marginLeft="4dp"/>

        <TextView
            android:id="@+id/currentPrice"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="현재가"
            android:layout_marginLeft="150dp"
            android:textSize="16sp"
            android:textStyle="bold"
            android:layout_marginTop="2dp"/>

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="290dp"
            app:srcCompat="@drawable/ic_arrow_up"
            tools:layout_editor_absoluteX="141dp"
            android:layout_marginTop="2dp"/>
        <TextView
            android:id="@+id/changePrice"
            android:layout_width="90dp"
            android:layout_height="wrap_content"
            android:text="대비"
            android:textStyle="bold"
            android:layout_marginLeft="300dp"
            android:textSize="16sp"
            android:gravity="right"
            android:layout_marginTop="2dp"/>
        <TextView
            android:id="@+id/volume"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="거래량"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="150dp"
            android:textSize="13sp"
            android:gravity="right"/>
        <TextView
            android:id="@+id/changePercent"
            android:layout_width="90dp"
            android:layout_height="wrap_content"
            android:text="Percent"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="300dp"
            android:textSize="13sp"
            android:gravity="right"
            android:textColor="@color/red"/>
    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

2. Icon 및 Text Color 자동 변경

 

이전 포스트에서 Icon 만드는 방법에 대해서는 자세하게 설명해드렸으니, 시세창에 상승, 하락, 상한가, 하한가 Icon을 만들어서 ImageView에 넣습니다.

 

Adapter ViewHolder에 ImageView를 Mapping해 줍니다.

 

public class ViewHolder extends RecyclerView.ViewHolder {

    TextView stockName;
    TextView currentPrice;
    TextView changePrice;
    TextView changePercent;
    TextView volume;
    ImageView imageView;
    public ViewHolder(@NonNull View itemView) {
        super(itemView);
        stockName = itemView.findViewById(R.id.stockName);
        currentPrice = itemView.findViewById(R.id.currentPrice);
        changePrice = itemView.findViewById(R.id.changePrice);
        changePercent = itemView.findViewById(R.id.changePercent);
        volume = itemView.findViewById(R.id.volume);
        imageView = itemView.findViewById(R.id.imageView);
    }
}

 

Adapter Bind에서 상한가라면 화살표 아이콘, 상승이면 상방 세모 아이콘으로 바꿔 줍니다. 아울러 상승인 경우 현재가, 전일비, 등락율(%) Text Color를 빨간색으로 바꿔줍니다.

Float chPercent = Float.parseFloat(stockList.get(position).getPrdy_ctrt());
if (chPercent == 0) {
    holder.changePercent.setTextColor(Color.parseColor("#FF000000"));
    holder.changePrice.setTextColor(Color.parseColor("#FF000000"));
    holder.currentPrice.setTextColor(Color.parseColor("#FF000000"));
}
else if (chPercent > 0) {
    holder.changePercent.setTextColor(Color.parseColor("#F44336"));
    holder.changePrice.setTextColor(Color.parseColor("#F44336"));
    holder.currentPrice.setTextColor(Color.parseColor("#F44336"));
    if (chPercent > 29.5) {
        holder.imageView.setImageResource(R.drawable.ic_arrow_top);
    }
}
else if (chPercent < 0) {
    holder.changePercent.setTextColor(Color.parseColor("#365FF4"));
    holder.changePrice.setTextColor(Color.parseColor("#365FF4"));
    holder.currentPrice.setTextColor(Color.parseColor("#365FF4"));
}