다음을 통해 공유

Xamarin.Forms SearchBar

  • 아티클

검색 Xamarin.FormsSearchBar 을 시작하는 데 사용되는 사용자 입력 컨트롤입니다. 컨트롤은 SearchBar 자리 표시자 텍스트, 쿼리 입력, 검색 실행 및 취소를 지원합니다. 다음 스크린샷은 다음과 같은 SearchBar 결과가 표시된 쿼리를 ListView보여줍니다.

iOS 및 Android의 SearchBar 스크린샷

SearchBar 클래스는 다음 속성을 정의합니다.

  • CancelButtonColor 는 취소 단추의 색을 정의하는 Color />입니다.
  • double 형식의 CharacterSpacing은 SearchBar 텍스트를 구성하는 문자 사이의 간격입니다.
  • FontAttributesFontAttributes 은 글꼴이 굵게, 기울임을 나타내는지 또는 둘 다 아닌 SearchBar 지를 결정하는 열거형 값입니다.
  • FontFamily 는 .에서 사용하는 글꼴 패밀리를 결정하는 string /a0>입니다 SearchBar.
  • FontSizeNamedSize 는 열거형 값 또는 플랫폼 전체의 double 특정 글꼴 크기를 나타내는 값일 수 있습니다.
  • HorizontalTextAlignment 는 TextAlignment 쿼리 텍스트의 가로 맞춤을 정의하는 열거형 값입니다.
  • VerticalTextAlignment 는 TextAlignment 쿼리 텍스트의 세로 맞춤을 정의하는 열거형 값입니다.
  • Placeholder 는 자리 표시자 텍스트(예: "검색...")를 정의하는 string />입니다.
  • PlaceholderColor 자리 표시자 텍스트의 색을 정의하는 Color />입니다.
  • SearchCommand 는 ICommand viewmodel에 정의된 명령에 손가락 탭 또는 클릭과 같은 사용자 작업을 바인딩할 수 있도록 하는 것입니다.
  • SearchCommandParameter 은 object 에 전달되어야 하는 매개 변수를 지정하는 입니다 SearchCommand.
  • Text 는 .에 쿼리 텍스트를 포함하는 string />입니다 SearchBar.
  • TextColor 는 쿼리 텍스트 색을 정의하는 Color />입니다.
  • TextTransform 는 TextTransform 텍스트의 대/소문자를 결정하는 값입니다 SearchBar .

이러한 속성은 개체에 의해 BindableProperty 지원됩니다. 즉 SearchBar , 사용자 지정하고 데이터 바인딩의 대상이 될 수 있습니다. 글꼴 속성을 SearchBar 지정하는 것은 다른 Xamarin.Forms 텍스트 컨트롤의 텍스트 사용자 지정과 일치합니다. 자세한 내용은 .의 글꼴을 Xamarin.Forms참조하세요.

A는 SearchBar XAML에서 인스턴스화할 수 있습니다. 선택적 Placeholder 속성은 쿼리 입력 상자에서 힌트 텍스트를 정의하도록 설정할 수 있습니다. 기본값 Placeholder 은 빈 문자열이므로 자리 표시자가 설정되지 않은 경우 표시되지 않습니다. 다음 예제에서는 선택적 Placeholder 속성 집합을 사용하여 SearchBar XAML에서 인스턴스화하는 방법을 보여줍니다.

<SearchBar Placeholder="Search items..." />

코드에서 A SearchBar 를 만들 수도 있습니다.

SearchBar searchBar = new SearchBar{ Placeholder = "Search items..." };

SearchBar 모양 속성

컨트롤은 SearchBar 컨트롤의 모양을 사용자 지정하는 많은 속성을 정의합니다. 다음 예제에서는 여러 속성이 SearchBar 지정된 XAML에서 인스턴스화하는 방법을 보여줍니다.

<SearchBar Placeholder="Search items..."
           CancelButtonColor="Orange"
           PlaceholderColor="Orange"
           TextColor="Orange"
           TextTransform="Lowercase"
           HorizontalTextAlignment="Center"
           FontSize="Medium"
           FontAttributes="Italic" />

코드에서 개체를 SearchBar 만들 때 이러한 속성을 지정할 수도 있습니다.

SearchBar searchBar = new SearchBar
{
    Placeholder = "Search items...",
    PlaceholderColor = Color.Orange,
    TextColor = Color.Orange,
    TextTransform = TextTransform.Lowercase,
    HorizontalTextAlignment = TextAlignment.Center,
    FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(SearchBar)),
    FontAttributes = FontAttributes.Italic
};

다음 스크린샷은 결과 컨트롤을 보여줍니다.SearchBar

iOS 및 Android의 사용자 지정된 SearchBar 스크린샷

참고 항목

iOS에서 클래스는 재정의 SearchBarRenderer 가능한 UpdateCancelButton 메서드를 포함합니다. 이 메서드는 취소 단추가 나타나는 시기를 제어하고 사용자 지정 렌더러에서 재정의할 수 있습니다. 사용자 지정 렌더러에 대한 자세한 내용은 사용자 지정 렌더러를 참조 Xamarin.Forms 하세요.

이벤트 처리기를 사용하여 검색 수행

다음 이벤트 중 하나에 이벤트 처리기를 연결하여 컨트롤을 사용하여 SearchBar 검색을 실행할 수 있습니다.

  • SearchButtonPressed 는 사용자가 검색 단추를 클릭하거나 Enter 키를 누를 때 호출됩니다.
  • TextChanged 는 쿼리 상자의 텍스트가 변경될 때마다 호출됩니다.

다음 예제에서는 XAML에서 이벤트에 연결된 TextChanged 이벤트 처리기를 보여 하며 검색 결과를 표시하는 데 사용합니다 ListView .

<SearchBar TextChanged="OnTextChanged" />
<ListView x:Name="searchResults" >

이벤트 처리기는 코드에서 만든 이벤트 처리기에 SearchBar 연결할 수도 있습니다.

SearchBar searchBar = new SearchBar {/*...*/};
searchBar.TextChanged += OnTextChanged;

TextChanged 코드 숨김 파일의 이벤트 처리기는 XAML 또는 코드를 통해 생성되든 SearchBar 관계없이 동일합니다.

void OnTextChanged(object sender, EventArgs e)
{
    SearchBar searchBar = (SearchBar)sender;
    searchResults.ItemsSource = DataService.GetSearchResults(searchBar.Text);
}

이전 예제에서는 DataService 쿼리와 GetSearchResults 일치하는 항목을 반환할 수 있는 메서드가 있는 클래스가 있음을 의미합니다. SearchBar 컨트롤의 Text 속성 값이 메서드에 GetSearchResults 전달되고 결과는 컨트롤의 ItemsSource 속성을 업데이트 ListView 하는 데 사용됩니다. 전체적인 효과는 검색 결과가 컨트롤에 표시된다는 것입니다 ListView .

샘플 애플리케이션은 검색 기능을 테스트하는 데 사용할 수 있는 클래스 구현을 제공합니다 DataService .

viewmodel을 사용하여 검색 수행

구현에 속성 및 SearchCommandParameter 속성을 바인딩 SearchCommand 하여 이벤트 처리기 없이 검색을 ICommand 실행할 수 있습니다. 샘플 프로젝트는 MVVM(Model-View-ViewModel) 패턴을 사용하여 이러한 구현을 보여 줍니다. MVVM을 사용한 데이터 바인딩에 대한 자세한 내용은 MVVM을 사용한 데이터 바인딩을 참조 하세요.

샘플 애플리케이션의 viewmodel에는 다음 코드가 포함되어 있습니다.

public class SearchViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public ICommand PerformSearch => new Command<string>((string query) =>
    {
        SearchResults = DataService.GetSearchResults(query);
    });

    private List<string> searchResults = DataService.Fruits;
    public List<string> SearchResults
    {
        get
        {
            return searchResults;
        }
        set
        {
            searchResults = value;
            NotifyPropertyChanged();
        }
    }
}

참고 항목

viewmodel은 검색을 수행할 수 있는 클래스가 DataService 있다고 가정합니다. 예제 데이터를 포함한 클래스는 DataService 샘플 애플리케이션에서 사용할 수 있습니다.

다음 XAML에서는 검색 결과를 표시하는 컨트롤을 사용하여 예제 viewmodel에 ListView 바인딩 SearchBar 하는 방법을 보여 있습니다.

<ContentPage ...>
    <ContentPage.BindingContext>
        <viewmodels:SearchViewModel />
    </ContentPage.BindingContext>
    <StackLayout ...>
        <SearchBar x:Name="searchBar"
                   ...
                   SearchCommand="{Binding PerformSearch}"
                   SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"/>
        <ListView x:Name="searchResults"
                  ...
                  ItemsSource="{Binding SearchResults}" />
    </StackLayout>
</ContentPage>

다음은 클래스의 BindingContext 인스턴스로 설정하는 예제입니다 SearchViewModel . viewmodel의 SearchCommand 속성에 PerformSearch ICommand 속성을 바인딩하고 속성을 속성에 SearchBar Text SearchCommandParameter 바인딩합니다. 속성은 ListView.ItemsSource viewmodel의 SearchResults 속성에 바인딩됩니다.

인터페이스 및 바인딩에 ICommand 대한 자세한 내용은 데이터 바인딩 및 ICommand 인터페이스를 참조 Xamarin.Forms 하세요.