C# 윈도우폼 로그인 창 프로그램, iOS 스타일 예제

C# 윈도우폼 로그인 창 프로그램, iOS 스타일 예제


C# - iOS Style의 로그인 창 윈도우폼입니다.



PSD 아이콘 -> PNG 이미지

기반이 되는 PSD 파일은 위의 링크에서 받으세요.


물론 Free 버전이라 마음대로 다운 받아 마음대로 편집해 사용할 수 있습니다.


LoginForm-iOS-Style-master[C# 프로그래밍] iOS 스타일 예제


그리고 원본 PSD 파일을 사용하기 위해선 폰트가 필요합니다.


PSD 파일을 열고 나서 폰트를 확인해 보세요. 구글에서도 쉽게 검색이 가능하니 금방 다운 받으실 수 있습니다.

PSD를 열면 아래처럼 아주 이쁜 화면을 볼 수 있습니다.


이 화면이 윈도우폼 로그인 창 시작화면이기도 합니다.


iOS Button - PSD[C# 프로그래밍] iOS 스타일 예제


첨부된 Sample.zip 파일을 열면 아래 그림처럼 하나하나 별도로 저장된 파일들을 확인하실 수 있습니다.


제가 일일이 잘라서 따로 저장한 거라 원하는 사이즈완 다를 수도 있어요.


이미지 파일은 C 드라이브에 복사한 뒤, "여기에 풀기" 정도를 선택해 주세요.


iOSButton - png[C# 프로그래밍] iOS 스타일 예제

프로젝트 구동 - C# 윈도우폼 로그인 창 프로그램

이어서, 프로젝트 파일을 열어보면 아래와 같은 실행 화면이 뜹니다.


현재 코딩된 내용에 따라, 아이디와 비밀번호 모두 8자리까지 입력할 수 있습니다.


iOS 스타일 - Login 폼[C# 프로그래밍] iOS 스타일 예제


아래 코드와 같이, 모든 Panel(그림)들은 소스 코드에서 배열로 관리합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
int pushedTextbox = -1// 0 ID, 1 PW
 
int arrIDIndex = -1;
int arrPWIndex = -1;
 
string inputID = "";
string inputPW = "";
 
Panel[] pbIDBox;
Panel[] pbPWBox;
Panel[] pbKeyBox;
 
string[] ilKey = new string[38];
string[] ilKeySel = new string[38];
cs


로그인 창 초기화 과정에선 리소스 참조보단 절대 경로를 참조합니다.


리소스 참조는 이미지가 많아질수록 윈도우폼에서 느려진다는 단점이 존재하기 때문이죠.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#region No Sel Image List - 38
ilKey[0= @"C:\Sample\Image\Login(iOS)\key-0.png";
ilKey[1= @"C:\Sample\Image\Login(iOS)\key-1.png";
ilKey[2= @"C:\Sample\Image\Login(iOS)\key-2.png";
ilKey[3= @"C:\Sample\Image\Login(iOS)\key-3.png";
ilKey[4= @"C:\Sample\Image\Login(iOS)\key-4.png";
ilKey[5= @"C:\Sample\Image\Login(iOS)\key-5.png";
ilKey[6= @"C:\Sample\Image\Login(iOS)\key-6.png";
ilKey[7= @"C:\Sample\Image\Login(iOS)\key-7.png";
ilKey[8= @"C:\Sample\Image\Login(iOS)\key-8.png";
ilKey[9= @"C:\Sample\Image\Login(iOS)\key-9.png";
ilKey[10= @"C:\Sample\Image\Login(iOS)\key-Q.png";
ilKey[11= @"C:\Sample\Image\Login(iOS)\key-W.png";
ilKey[12= @"C:\Sample\Image\Login(iOS)\key-E.png";
ilKey[13= @"C:\Sample\Image\Login(iOS)\key-R.png";
.....
.....
.....
cs


버튼들을 클릭하면 선택 이미지로 교체됩니다.

하얀 글씨가 파란색으로 변합니다. 이런 기능을 위해서 메모리 누수가 없도록 함수를 구성합니다. 아래 코드를 살펴보면, Dispose() 함수와 GC.Collect() 함수를 이용하고 있습니다. 반복적으로 자주 사용된다면, Dispose() 함수를 직접 불러오는 구성은 옳지 않습니다.


가비지 켈럭터도 강제로 호출하는 게 썩 옳은 방법도 아니죠. 간헐적으로 사용되는 코드에나 통용될 법합니다. 무엇보다, 이미지 그 자체를 저렇게 바로 사용하는 게 효율적이란 생각은 들지 않네요. 윈도우폼 때문에요.


이 부분에 대해선 제가 아직 확신은 안 섭니다. 더 좋은 구성 방법이 있다면 다른 분들이 댓글이나 트랙백을 남겨주셨으면 하네요.


아래 로그인 창 코드는 직접 구성한 제가 봐도 마음에 들진 않습니다.


1
2
3
4
5
6
7
private void RedrawPicture(ref Panel pbDispose, string btmDistribute)
{
    pbDispose.BackgroundImage.Dispose();
 
    pbDispose.BackgroundImage = Image.FromFile(btmDistribute);
    GC.Collect();
}
cs


실제 사용 시엔, Enter 버튼을 눌러 사용자 검증을 할 수 있습니다.


string.CompareTO() 함수를 이용해 단순 비교를 합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
bool IsRight = true;
 
switch (inputID) // 입력된 사용자 검증
{
    case "WHO":
        if (inputPW.CompareTo(""== 0)
        { }
        break;
 
    case "ARE":
        if (inputPW.CompareTo(""== 0)
        { }
        break;
 
    case "YOU":
        if (inputPW.CompareTo(""== 0)
         { }
        break;
 
    default:
        IsRight = false;
        break;
}
cs


마지막으로, C# 윈도우폼 로그인 창 프로그램 종료 시 메모리 해제를 해줍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
    int tmp = 0;
    for (tmp = 0; tmp < 8; tmp++)
    {
        pbIDBox[tmp].BackgroundImage.Dispose();
        pbPWBox[tmp].BackgroundImage.Dispose();
    }
 
    for (tmp = 0; tmp < 38; tmp++)
        pbKeyBox[tmp].BackgroundImage.Dispose();
 
    GC.Collect();
}
cs


처음엔 PictureBox를 사용해서 그림 파일을 띄웠지만, 어떤 이유에선지 에러가 종종 발생하더군요.


그래서 Panel로 교체하고 BackgroundImage에 그림 파일을 띄웠습니다.


C# 윈도우폼 로그인 창 프로그램, iOS 스타일 예제

댓글(0)

Designed by JB FACTORY