[XAMARIN] 멀티뷰 - StatckLayout

<Content> 안에는 한개의 자식만 넣을수 있음.

무슨말이냐면. <Lable Text="1" />를 한개만 넣었으면 <Lable Text="2" />를 넣는건 불가능함. 실행시키면 에러가 나면서 실행이 안됩니다.

이럴때 여러개를 화면에 표시하고 싶을 때 사용하는것이 멀티뷰(Multi View)입니다.

멀티뷰에는 아래와 같은 것들이 있습니다.

StatckLayout : 가로 혹은 세로로 Stack처럼 쌓는 구조 Grid : 엑셀처럼 행과 열을 가지는 구조 (XAMARIN에서는 GRID로 모든것을 다 표현 할 수 있음) AbsoluteLayout : 절대 좌표로 화면을 구성하는 것임. 거의 안씀 RelativeLayout : 상대적인 좌표로 화면을 구성하는것임.

오늘은 StatckLayout을 소개하도록 하겠습니다.

StatckLayout

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MultiVewTest" x:Class="MultiVewTest.MainPage">
    <ContentPage.Content>
        <StackLayout>
        <!-- Place new controls here -->
        <Label Text="111111" />
        <Label Text="222222" />
        <Label Text="333333" />
        <Label Text="444444" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

기본은 위에서 아래로 차례차례 쌓이는 형태임.

StatckLayout 기본값

 

이것을 가로 방향으로 쌓이게 할려면....StackLayout의 속성에 Orientation을 Horizontal로 설정해주면 된다.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MultiVewTest" x:Class="MultiVewTest.MainPage">
    <ContentPage.Content>
        <StackLayout Orientation="Horizontal">
        <!-- Place new controls here -->
        <Label Text="111111" />
        <Label Text="222222" />
        <Label Text="333333" />
        <Label Text="444444" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

 

이것들은 지금 흰색바탕이라서 이 영역이 어디까지인지 안보이고 있습니다. 이것들이 차지하고 있는것을 눈으로 확인하기 위해서는 배경색을 넣어주도록 하죠.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MultiVewTest" x:Class="MultiVewTest.MainPage" 
             BackgroundColor="Blue" Padding="10"
             >
    <ContentPage.Content>
        <StackLayout Orientation="Horizontal" BackgroundColor="Green" Spacing="20">
        <!-- Place new controls here -->
        <Label Text="111111" BackgroundColor="Red" />
        <Label Text="222222" BackgroundColor="Yellow" />
        <Label Text="333333" BackgroundColor="Maroon" />
        <Label Text="444444" BackgroundColor="#FF0000AA" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

지금 아래 그림을 보면 ContentPage의 배경색은 파란색입니다. 아까는 StatckLayout이 화면을 다 먹는 구조였는데 Padding="10" 옵션으로 왼쪽,위,오른쪽,아래에 모두 10이라는 여백을 주게 하여 파란색이 보이는것입니다.

StatckLayout의 녹색은 Label이 배경색을 지정하지 않았으면 모두 녹색으로 표시됐을겁니다. 하지만 각 label이 차지하는곳에 다른 배경색이 들어가 있으니 label과 label의 사이에만 녹색이 들어간것을 볼 수 있습니다. 이 사이 간격은 Spacing="20" 값으로 조절할 수 있습니다. 심지어 -값도 입력 가능합니다.

Lable의 배경색은 이미 지정된 색인 Red, Yellow 로 입력할 수 있고, RGB값으로 입력할 수 있습니다. 디자인적으로 색을 맞출려면 RGB값으로 입력하는게 더 정확하겠죠?? 형식은 이렇게 입력하면 됩니다. "# RR GG BB 투명도"

 

StackLayout에 Label을 계속 채우다 보면 스마트폰 화면을 넘어가는 Label이 나옵니다. 그러면 짤리는 부분이 나오는데 이때 스크롤해서 보는 방법이 있습니다. <StatckLayout>위에다가 <ScrollLayout>를 감싸주면 <StatckLayout>의 짤리는 부분을 스크롤해서 볼 수 있게 됩니다. 단순히 감싸주기만 했는데 이런 기능이 활성화 된다는게 놀랍네요.

 

Frame

Frame은 액자처럼 사각형 틀을 화면에 보여주는 역할을 한다. 아래 그림을 보면 무슨말인지 딱 알것이다. 그리고 Frame 태그 안에는 한개만  자식이 되므로 여러개를 넣어주었을때는 맨 마지막것만 표시된다. 여러개를 한꺼번에 보여주고 싶다면 위에서 배운 StackLayout을 넣어주면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MultiVewTest.MyPage1">
    <StackLayout Padding="10">
        <Frame HasShadow="true" Padding="10">
            <StackLayout>
                <Label Text="안방 조명" />
                <Label Text="켜짐" /> 
            </StackLayout>
        </Frame>
        
        <Frame HasShadow="true" Padding="10">
            <StackLayout>
                <Label Text="화장실 조명" />
                <Label Text="꺼짐" />
            </StackLayout>
        </Frame>
    </StackLayout>
</ContentPage>

 

BoxView

BoxView는 사격형 도형을 그릴때 사용한다. 하지만 실무에서는 주로 한줄 구분선으로 사용한다. 마치 <hr> 태그처럼 사용한다고 생각하면 이해가 쉬울거다. 

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MultiVewTest.MyPage1">
    <StackLayout Padding="10">
        <Label Text="안방" FontSize="Large" FontAttributes="Bold" />
        <Frame HasShadow="true" Padding="10">
            <StackLayout>
                <Label Text="안방 조명" />
                <Label Text="켜짐" /> 
            </StackLayout>
        </Frame>
        
        <Label Text="화장실" FontSize="Large" FontAttributes="Bold" />
        <Frame HasShadow="true" Padding="10">
            <StackLayout>
                <Label Text="화장실 조명" />
                <Label Text="꺼짐" />
            </StackLayout>
        </Frame>
        
        <BoxView Margin="5,0" HeightRequest="1" BackgroundColor="#2f000000" />
        <Label Text="copyright@ Verificationkr.tistory.com" HorizontalTextAlignment="Center" />
    </StackLayout>
</ContentPage>

 

파일 읽기

파일을 읽기위해서는 아래의 순서대로 준비작업을 해줘야한다.

1. Forms를 선택하고 오른쪽 버튼을 눌러서 docs라는 폴더를 만든다. (폴더명은 임의로 정해줘도 됨) 2. 파일추가 해서 readme.txt라는 텍스트 파일을 만들고 임의의 내용을 적어준다. 3. 추가한 readme.txt 를 오른쪽 버튼을 눌러서 빌드작업 -> EmbeddedResource 로 변경한다.

이제 파일을 사용하기 위해서는 아래와 같이 코딩을 해준다. 여기서는 LoadFile()  이라는 메소드를 만들었다. readme.txt파일을 불러와서 빈줄이 나올때까지 한줄씩 읽어서 lblReadme.Text에다가 넣어주는 코딩이다.

private void LoadFile()
{
	Assembly assembly = GetType().GetTypeInfo().Assembly;

	// 네임스페이스명.폴더명.파일명
	string file = "MultiVewTest.docs.readme.txt";

	using (Stream stream = assembly.GetManifestResourceStream(file))
	{
		using (StreamReader reader = new StreamReader(stream))
		{
			string line;


			while((line = reader.ReadLine()) != null)
            {
				this.lblReadme.Text += line + "\n";
			}
		}
	} 
}

readme.txt 파일의 내용은 내가 임의로 넣어 보았다.

1. [연결버튼]을 눌러주세요. 2. 연결이 될때까지 기다려주세요. 3. 이제 시작해주세요.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MultiVewTest.MyPage1">
    <StackLayout Padding="10">
        <Label Text="안방" FontSize="Large" FontAttributes="Bold" />
        <Frame HasShadow="true" Padding="10">
            <StackLayout>
                <Label Text="안방 조명" />
                <Label Text="켜짐" /> 
            </StackLayout>
        </Frame>
        
        <Label Text="화장실" FontSize="Large" FontAttributes="Bold" />
        <Frame HasShadow="true" Padding="10">
            <StackLayout>
                <Label Text="화장실 조명" />
                <Label Text="꺼짐" />
            </StackLayout>
        </Frame>
        <BoxView Margin="5,0" HeightRequest="1" BackgroundColor="#2f000000" />
        <Label x:Name="lblReadme" />
        <BoxView Margin="5,0" HeightRequest="1" BackgroundColor="#2f000000" />
        <Label Text="copyright@ Verificationkr.tistory.com" HorizontalTextAlignment="Center" />
    </StackLayout>
</ContentPage>

화장실 밑에 텍스트 파일을 읽어서 화면에 표시하는 코딩이 완성되었다.ㅎㅎ

여기서 한발 더 나아가서 텍스트의 폰트 사이즈를 readme.txt에서 읽어서 바꾸게 한다면? 괜찮지 않을까?

readme.txt 파일에 fs:20 이라는 것을 추가해보자.

fs20: 1. [연결버튼]을 눌러주세요. 2. 연결이 될때까지 기다려주세요. 3. 이제 시작해주세요.

그리고 cs파일에 아래 내용을 추가한다.

using System;
using System.Collections.Generic;
using System.IO;
using System.Reflection;
using Xamarin.Forms;

namespace MultiVewTest
{
    public partial class MyPage1 : ContentPage
    {
        public MyPage1()
        {
            InitializeComponent();
            LoadFile();
        }

        // 파일 읽어 오기
        private void LoadFile()
        {
            Assembly assembly = GetType().GetTypeInfo().Assembly;

            // 네임스페이스명.폴더명.파일명
            string file = "MultiVewTest.docs.readme.txt";

            using (Stream stream = assembly.GetManifestResourceStream(file))
            {
                using (StreamReader reader = new StreamReader(stream))
                {
                    string line;


                    while((line = reader.ReadLine()) != null)
                    {

                        // 폰트 사이즈를 텍스트 파일에서 불러오기
                        if (line.Length >= 2 && line.Substring(0, 2) == "fs")
                        {
                            double fontSize;
                            fontSize = Convert.ToDouble(line.Substring(2, 2));
                            this.lblReadme.FontSize = fontSize;
                            line = line.Substring(5);
                        }

                        this.lblReadme.Text += line + "\n";
                    }
                }
            } 

        }
    }
}

fs라는 것이 있는 라인이라면 fontSize를 그 값으로 지정하는 코드를 추가하였다.

이처럼 앱의 설정같은것을 파일에 저장하면 읽어올때 적용까지 할 수 있으니 유용하게 사용할 수 있을것 같다.

 

오늘은 멀티뷰 중에서도 StatckLayout, Frame, BoxView, 파일 읽어오기를 해보았다. XAML도 어느정도 익숙해지는것 같은 느낌이 든다.ㅎㅎ