[카테고리:] 프로그래밍

작성일자

웹 페이지 스크롤 이벤트 관련 코드

먼저 웹 페이지에서 전체 내용을 다 보기 위해 스크롤 해야할 크기는 다음 코드로 얻을 수 있습니다.

let totalHeight = document.body.scrollHeight - window.innerHeight;

다음으로 지금 스크롤된 정도를 백분율 값으로 얻는 코드는 다음과 같습니다.

let scrollPercentage = (window.pageYOffset / totalHeight) * 100;
작성일자

휜 그림자를 가진 카드

표현하고자 하는 목표는 다음과 같습니다. 하단이 휜듯이 살짝 그림자가 들어간 카드입니다.

DOM 구조는 다음과 같습니다.


    

        

            
content

CSS는 다음과 같습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    position: relative;
    width: 300px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0, 0.1);
}

.card .shadow {
    position: relative;
    width: 100%;
    height: 100%;
}

.card .shadow div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #7f8c8d;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #fff;
    color: #fff;
    font-size: 3em;
}

.card .shadow::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 4%;
    width: 80%;
    height: 50%;
    background: #000;
    filter: blur(15px);
    opacity: 0.5;
    transform-origin: right;
    transform: skewY(-11deg);
    z-index: -1;
}

.card .shadow::before {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 4%;
    width: 80%;
    height: 50%;
    background: #000;
    filter: blur(15px);
    opacity: 0.5;
    transform-origin: left;
    transform: skewY(11deg);
}

filter는 IE에서 적용되지 않습니다. 대신 box-shadow를 사용하여 비슷하게 효과를 낼 수는 있습니다.

작성일자

C#에서 JSON 해석하기

.NET 5부터는 JSON을 해석하는 API가 기본적으로 제공되는 듯 하지만, 아직도 내 PC에는 .NET 5가 기본적으로 설치되어 있지 않으므로 다른 방안이 필요했고 Newtonsoft.Json이라는 매우 뛰어난 JSON 라이브러리가 있어 이를 사용하게 되었습니다.

설치는 간단이 Visual Studio의 Package Manager 기능을 통해 설치할 수 있으며 NuGet 사이트에서 제공하는 정보를 통해 쉽게 설치할 수 있습니다.

이제 다음과 같은 JSON을 해석해 봅시다. 이 JSON은 test.json이라는 파일이 저장되어 있습니다.

{
    "form0": {
        "metadata": {
            "title": "테스트"
        }
    },

    "form1": {
        "metadata": {
            "title": "연락처"
        }
    }
}

위에서 form0과 form1에 대한 정보를 얻어와야 하고, 각가게 대한 title 값을 얻어와야 합니다. 코드는 아래와 같습니다.

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

...

var strFormJson = Utility.ReadAllTextFromFile("test.json");
var jsonForm = JObject.Parse(strFormJson);
var iter = jsonForm.GetEnumerator();

while(iter.MoveNext())
{
    var keyValue = iter.Current;
    MessageBox.Show(keyValue.Key + " " + keyValue.Value["metadata"]["title"].ToString());
}

JSON에 대해 배열에 대한 처리는 JArray로 타입을 변환하면 됩니다. 코드의 예는 다음과 같습니다.

var jsonLayers = JObject.Parse(strLayersJson);
var arrayJsonLayers = jsonLayers["layers"] as JArray;
var iterLayers = arrayJsonLayers.GetEnumerator();

while(iterLayers.MoveNext())
{
    var value = iterLayers.Current;
    var layerName = value["name"].ToString();

    ...
}

시간이 좀더 흘려 .NET 5가 사용자의 PC에 기본적으로 설치되는 날이 오면 .NET 5에서 제공하는 JSON API를 사용하시기 바랍니다.

작성일자

Drawer Menu 항목의 우측에 커스텀 뷰(Custom View) 달기

Drawer Menu는 안드로이드의 표준화된 메뉴입니다. 이 UI는 단순히 메뉴로써의 기능 뿐만이 아니라 다양한 정보를 사용자에게 제공할 수 있습니다. 이를 위해 Drawable의 특정 메뉴 항목의 우측에 커스텀 뷰를 달게 되면, 이 커스텀 뷰의 내용을 변경함으로써 어떤 정보를 사용자에게 전달할 수 있게 됩니다. 이 글은 이처럼 Drawable의 특정 메뉴 항목에 커스텀 뷰를 추가하는 코드를 정리합니다.

Drawer Menu를 추가하기 위해서는 Activity의 Layout에서 기본적으로 com.google.android.material.navigation.NavigationView를 사용하게 됩니다. 이를 NavigationView를 통해 메뉴의 각 항목에 접근할 수 있고, 접근된 메뉴에 원하는 View를 지정할 수 있게 됩니다. 아래 코드처럼요.

navigationView = findViewById<NavigationView>(R.id.main_navigation_view)

    ...

navigationView.getMenu().getItem(4).setActionView(R.layout.drawer_menu_item_collecting_data_searched_items_count)

위의 코드는 5번째 메뉴에 대한 커스텀 뷰를 R.layout.drawer_menu_item_collecting_data_searched_items_count으로 지정하고 있습니다. R.layout.drawer_menu_item_collecting_data_searched_items_count에 대한 코드는 다음과 같습니다.

<?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:gravity="center_vertical"
    android:orientation="vertical" >

    <TextView
        android:background="@drawable/rounding_box"
        android:id="@+id/tvResultItemCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:textSize="@dimen/very_small_text_size"
        android:paddingVertical="2dp"
        android:paddingHorizontal="10dp"
        android:text="0" />

</LinearLayout>

위의 뷰를 좀더 시각적으로 안정감 있도록 배경을 rounding_box라는 Drawable로 지정하였는데요. rounding_box 코드는 다음과 같습니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/uiColor" />
    <padding
        android:left="45px"
        android:top="15px"
        android:right="45px"
        android:bottom="15px" />
    <corners android:radius="30px" />
</shape>

앞서 언급했던 것처럼 Drawer Menu의 항목에 대한 커스텀 뷰의 내용을 변경함으로써 정보를 사용자에게 전달한다고 했는데, 커스텀 뷰를 변경하는 코드의 예는 다음과 같습니다.

navigationView.getMenu().getItem(4).actionView.findViewById<TextView>(R.id.tvResultItemCount).text = "999"
작성일자

Kotlin에서 propery 정의

field를 통해 내부 변수에 접근해야 한다는 점에 유의해야 함.

var state: State? = null
set(value) {
    field?.leave()
    field = value
    field?.enter()
}
get() = field