Xamarin.forms: [향상] Android: TabbedPage: 하단 탭 바

관련 #1400

안녕하세요, 방금 이 문제에 대한 풀 리퀘스트를 열었습니다. 구현에 대해 몇 가지 질문이 있지만 이것은 시작점입니다.
매핑은 충분히 명확했습니다.

이 끌어오기 요청이 Xamarin Forms에 병합되기를 정말 기대합니다. ETA 같은 것이 있습니까? Android의 하단에 탭 페이지가 있는 실행 가능한 솔루션을 찾지 못했습니다.

@mikescandy 이에 대한 업데이트가 있습니까?

마지막으로, 나는 이것을 너무 오랫동안 찾고 있습니다!
정말 고맙습니다!

이 개선 사항은 언제 출시됩니까?

+1
야간 빌드에서 얻을 수 있습니까? cc @PureWeen @davidortinau

어떻게 작동합니까? Forms 앱의 XAML에서도 (TabbedPage의 속성으로) 설정할 수 있습니까?

@netonjm "UseBottomNavigation" https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.TabbedPageR0at

그러나 세부 사항(아이콘 및 색상)은 확실하지 않습니다.

나야 :-)

죄송합니다

@niels9001 여기에서 아이콘 등을 설정하는 모든 옵션을 볼 수 있습니다.

https://github.com/xamarin/Xamarin.Forms/blob/67d2be4cd224678a350f258b888c568ac8898a8f/Xamarin.Forms.Core/PlatformConfiguration/AndroidSpecific/TabbedPage.cs

따라서 XAML에서 "UseBottomNavigation"을 설정하면 Android 및 iOS의 하단에 탭 표시줄이 표시됩니다(이미 TabbedPage에서와 같이), 그렇죠?

대단하다 :D! 이 개선 사항이 이미 최신 시험판 NuGet 패키지의 일부입니까? 그렇지 않은 경우 ETA가 있습니까?

@niels9001 및 @PureWeen xamarin 양식 3.1.0.506097 업그레이드 버전 2를 설치했습니다. 지금 작동하는 것 같지만 아직 사용할 수 없다고 생각하는 것이 맞습니까?

카드(닫힌 열 등)가 여기 https://github.com/xamarin/Xamarin.Forms/projects/2#card -8921124에서 야간에 병합되는 과정을 설명할 수 있는 사람이 있습니까?

또한 이 게시판은 어떤 관련이 있습니까? https://github.com/xamarin/Xamarin.Forms/projects/6

감사 해요!

ok 풀 리퀘스트를 거쳐 xamarin.forms에서 작동하도록 이 작업을 완료했습니다.

private Xamarin.Forms.TabbedPage __bottomBarPage;
        private INavigationService __navigationService;
        private Page __currentPage;

        public BottomTabBarPageBuilder(INavigationService navigationService)
        {
            __navigationService = navigationService;
            __bottomBarPage = new Xamarin.Forms.TabbedPage();
            __bottomBarPage.BarTextColor = (Color)App.Current.Resources["tile2"]; // Setting Color of selected Text and Icon
            __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
            // You can only define the color for the active icon if you set the Bottombar to fixed mode
            //__bottomBarPage.Navigation..FixedMode = true;
        }|

내 코드는 신경 쓰지 않지만 주요 부분은 __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); 입니다. 이것이 올바른 방법입니까?

네 맞습니다. 플랫폼에 따라 다르므로 컨트롤이 렌더링되기 전에 설정해야 합니다.

야 이거 고정모드 지원하냐?! 나는 그것을 설정할 방법을 찾을 수 없습니다

@maherzaidoune 아직 아닙니다.
초기 구현을 위해 조금 살펴보았지만 다음 버전을 위해 남겨두기로 결정했습니다.

명확하게 하기 위해 당신이 이것에 대해 말하는 것 맞습니까?
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android

좀 당황스럽네요. ToolBarPlacement는 어디에 설정해야 합니까?

`네임스페이스 Test.Mobile.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
공개 부분 클래스 TestPage: Xamarin.Forms.TabbedPage
{

    public Test()
    {
        InitializeComponent();

        On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

    }`

이와 같이?

@PureWeen On<Android>().SetElevation(); 은(는) 어떻게 작동합니까? 일부 float 값으로 설정하려고 했지만 효과가 없습니다. 페이지 콘텐츠와 하단 표시줄을 구분하기 위해 그림자를 만들고 싶었습니다.

@niels9001 네

그게 당신에게 효과가 있습니까?

@PureWeen 아니요, MainPage.xaml.g.cs에서 이 오류가 발생합니다(MasterDetail 보기이고 TabbedPage는 그 세부 부분에 있음).

처리되지 않은 예외:
System.TypeLoadException: 토큰 0100008e(typeref, 클래스/어셈블리 Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null에서)를 사용하여 형식을 확인할 수 없습니다.

나는 놀랐다. 멋진. @PureWeen 감사합니다.

@PureWeen 배지 구현에 도움이 될 수 있는지 알려주세요.

@niels9001 오류는 일반적으로 라이브러리와 동기화되지 않은 항목이 있음을 의미합니다. 모든 obj/bin 폴더를 삭제하고 동일한 버전의 Xam Forms가 모든 곳에 설치되어 있는지 확인할 수 있습니까?

https://forums.xamarin.com/discussion/83410/could-not-resolve-type-with-token-01000012

@PureWeen 감사합니다 :) 효과가

전체 막대의 배경색을 어떻게 설정합니까? 또는 드롭 섀도우를 활성화하시겠습니까?

하단 TabbedPage의 하위 페이지(탭)가 NavigationPage이면 해당 페이지와 해당 콘텐츠(ScrollView가 있는 ContentPage)가 탭 표시줄 아래에 렌더링됩니다. (3.1-pre3)

잘 하셨어요!
그런데 왜 5명의 아이들이 최대인가요? 더 추가하려고하면 충돌합니다.

5는 Android에서 최대 항목 수로 설정됩니다.
https://android.googlesource.com/platform/frameworks/support.git/+/master/design/src/android/support/design/internal/BottomNavigationMenu.java 참조

알 겠어요. 감사합니다!
그거 슬프다 :/

네, 저는 사용자를 도울 수 있는 최선의 방법을 찾기 위해 이리저리 돌아다녔습니다. GetMaxCount가 있는 경우 호출할 수 있습니다. 지금은 아래쪽 탭에 대해 5를 반환하고 위쪽 탭에 대해 최대 int를 반환합니다. 더 유용한 오류 메시지를 전달할 수 있는지 살펴보겠습니다 :-)

@bdgza

신고해 주셔서 감사합니다. 나는 이것에 대한 문제를 만들었습니다
https://github.com/xamarin/Xamarin.Forms/issues/2993

@PureWeen BarBackgroundColor가 Android의 하단에 배치될 때 막대의 배경색을 변경하는 데 작동하지 않는 것 같습니까?

@niels9001 우연히 복제품 이 있나요?

나는 테스트했고 나를 위해 작동합니다.

이봐, 페이지를 전환할 때 그 애니메이션을 비활성화할 수 있습니까? 아이콘 애니메이션이 아니라 전환 애니메이션을 의미합니다.

편집: 또한 최신 변경 사항을 원하면 야간 빌드를 사용해야 합니까 아니면 시험판을 사용해야 합니까? pre4가 현재 빌드보다 최신인 것처럼 보이기 때문입니다.

@dstarec 3.2용 새로운 nightly가 myget에 올라왔습니다.

현재는 없지만 귀하가 요청한 것은 이것에 대한 것입니다
https://github.com/xamarin/Xamarin.Forms/issues/2948
오른쪽?

@PureWeen
네, 그런 것 같습니다

@PureWeen
Shift 모드를 비활성화하려면 어떻게 해야 합니까?

여기에서 James의 코드를 가져왔습니다. https://montemagno.com/remove-shifting-bottomnavigationview-android/

Android용 사용자 지정 렌더러를 추가했지만 하단 탐색 뷰의 ID를 모르기 때문에 이렇게 부를 수 없습니다.

var bottomNavigation = FindViewById(Resource.Id.bottom_navigation);
bottomNavigation.SetShiftMode(거짓, 거짓);

편집하다:
지금까지 내가 할 수 있었던 유일한 방법은 ViewGroup의 보기를 재귀적으로 반복하여 BottomNavigationView를 찾는 것입니다.

변속 모드 제거를 위한 솔루션이 있습니까?

@LynoDesu @amrkamal1993 은 다음 릴리스에서
https://github.com/xamarin/Xamarin.Forms/issues/3083

@amrkamal1993 사용자 지정 렌더러를 사용하여 이 문제를 해결했습니다. 나중에 집에 있을 때 코드를 게시하겠습니다.

@sun_ssssssss @ssssssssss ㅠ
여기에서 요지를 참조하십시오.
https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

@LynoDesu 비활성화 시프트 모드를 어떻게 구현할 수 있습니까? 나는 당신의 코드를 사용했지만 아무것도 변경되지 않았습니다

어떻게 구현했습니까? 내 코드를 사용하면 TabbedPage 대신 사용자 정의 컨트롤인 BottomNavTabPage를 사용해야 합니다.

<?xml version="1.0" encoding="utf-8" ?> <controls:BottomNavTabPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:MyProject.App.Views;assembly=MyProjects.App" xmlns:controls="clr-namespace:MyProject.App.Controls;assembly=MyProjects.App" x:Class="MyProject.App.Views.MainTabPage" Title=""> <views:NewsFeed></views:NewsFeed> <views:Rewards></views:Rewards> <views:Nominations></views:Nominations> <views:Notifications></views:Notifications> </controls:BottomNavTabPage>

하단 탭에 배지 텍스트를 추가하려면 어떻게 해야 합니까?

@LynoDesu thx 드디어 작동합니다!! ^_^

@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
이것은 당신을 도울 수 있습니다 :)

@amrkamal1993 : 감사합니다. 하지만 이 플러그인을 사용해 봅니다. 하단 바를 사용할 때 배지 텍스트를 추가하지 않습니다.

@nhdanh 탭은 여전히 ​​새 기능과 함께 작동해야 하는 상단 탭과 동일합니다. 하단 탭 배치

@amrkamal1993 On으로 설정했을 때().SetToolbarPlacement(ToolbarPlacement.Bottom). 배지 텍스트를 렌더링하지 않습니다. 이 설정 하단을 제거합니다. 그것은 배지 텍스트를 표시합니다

배지 텍스트에 대한 다른 정보가 있습니까?

@LynoDesu 굉장합니다! 귀하의 솔루션이 제 하루를 만드는 데 도움이 되었습니다! 감사 해요!

Xamarin.Forms를 최신 버전으로 업데이트하려고 했으며 TabbedPage 클래스에서 ToolbarPlacement를 설정하려고 하면 이 오류가 발생합니다.

처리되지 않은 예외:

System.TypeLoadException: 토큰이 01000029인 유형을 확인할 수 없습니다(typeref, 클래스/어셈블리 Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null에서) 발생

내가 뭘 잘못하고 있는지 모르겠지만 이 오류는 너겟 패키지 버전과 관련이 있다고 생각합니다. 해결하려면 어떻게 해야 합니까?

@aalbendin 오래된 것이거나 올바른 라이브러리를 구축하지 못하는 경우 발생합니다. 모든 bin/obj 폴더를 삭제한 다음 프로젝트를 다시 빌드하는 것이 좋습니다. 그러면 문제가 해결됩니다.

상위 사용자가 동일한 문제를 겪고 있었고 이를 해결했습니다.

https://github.com/xamarin/Xamarin.Forms/issues/1675#issuecomment -395211876

안정적인 3.1.0.583944 버전에서 사용할 수 있습니까? 나는 On을 추가했다

TabbedNavigationBar를 숨기려는 다른 사람이 있습니까? VisibiltyStates.Gone 를 BottomNavigationView 설정하면 Android에서 문제가 발생합니다. 보기가 완전히 닫히지 않습니다.

@15mgm15 그 문제는 반쯤 관련되어 있습니다.
https://github.com/xamarin/Xamarin.Forms/issues/3055

콘텐츠를 표시하는 ViewPager는 콘텐츠가 뒤에 숨겨지지 않도록 하단 탐색 모음의 높이를 고려합니다. 해당 콘텐츠를 다시 사용하려면 뷰페이지를 다시 레이아웃해야 하지만 현재로서는 해당 가시성과 변경 사항을 감시하는 것이 없습니다.

당신의 사용 사례는 무엇입니까? 대신 하단 탐색 모음을 숨기지 않고 전체 화면에 오버레이되도록 스택에 모달 페이지를 푸시할 수 있습니까?

@PureWeen 답변 감사합니다! 불행히도 모달 페이지를 사용하면 클라이언트 디자인이 손상되므로 솔루션을 찾아야 합니다.

@15mgm15 상단 탐색 모음을 사용하면 동일한 작업을 수행합니까? 아니면 하단 탐색 모음에서만 발생합니까?

@PureWeen 사실 좋은 점은 제가 확인해서 알려드리겠습니다.

예상대로 정상 TAV 바 모든 작업을 사용하여 @PureWeen TabLayout 의 TabbedPageRenderer 숨겨 지거나 우리가 기쁘게로했다한다. 하지만 레이아웃 매개변수에서 높이를 0으로 설정하려고 시도했는데 실제로 작동했습니다!

BottomNavigationView _bottomBar;
...
if (_extendedTabbedPage.BottomTabBarHidden) { _layoutParams.Height = 0; _bottomBar.LayoutParameters = _layoutParams; } else { _layoutParams.Height = _bottomBarHeight; _bottomBar.LayoutParameters = _layoutParams; }

이야~ 잘 들었습니다!! https://github.com/xamarin/Xamarin.Forms/issues/3055 가 수정되면 거친 부분이 조금 부드러워지기를

@cassionandi 여전히 문제가 있습니까? 생성자에서 탐색 모음 위치를 설정하거나 XAML을 사용하는 경우 문제가 발생하지 않아야 합니다.

레이블을 설정하지 않고 아이콘만 설정하면 아이콘이 세로로 가운데 정렬되지 않습니다. 라벨이 없는 것처럼 이상해 보입니다.

이것은 예상된 동작입니까? 아이콘이 중앙에 있으면 좋을 것입니다(예: Android의 Outlook 앱).

뭔가 빠진 것 같아요. Xamarin Forms를 업데이트하여 3.1.0.583944를 릴리스했지만 On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); 행에 두 개의 오류가 발생합니다.

ToolbarPlacement'라는 이름은 현재 컨텍스트에 존재하지 않습니다.

그리고

오류 CS1061: 'IPlatformElementConfiguration'는 'SetToolbarPlacement'에 대한 정의를 포함하지 않으며 'IPlatformElementConfiguration 유형의 첫 번째 인수를 허용하는 확장 메서드 'SetToolbarPlacement'가 없습니다.'를 찾을 수 있었다

어떤 제안?

@bverp

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific

?

누군가 OnTabReselected 이벤트를 에 배지 를 BottomNavigationView 를

https://gist.github.com/15mgm15/76914bf623e33676252864ac1898e7f9

@bverp VS를 닫고 obj 및 bin 폴더를 삭제하고 프로젝트를 다시 시작합니다. 적어도 저에게는 효과가 있었습니다.

@ niels9001 저에게 @bverp 작동
https://github.com/15mgm15/XamarinFormsBottomTabbedPage

나는 약간의 일을하고 있습니다. 누군가 도울 시간이 있습니까?
이 링크의 두 옵션을 포함하여 Android에서 하단 탭을 얻기 위해 여러 가지를 시도했습니다. 내가 무엇을 하든 내 솔루션이 업데이트를 인식하지 못합니다.
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
양식 버전 3.1.0.637273이 있습니다(최근 5개 릴리스/프리릴리즈도 시도했습니다).
나는 bin/obj 디렉토리를 청소, 구축, 재구축, 삭제했습니다 - 내가 무엇을 하든 이 업데이트를 전혀 볼 수 없는 것 같습니다.

예를 들어 이것은 내 현재 XAML입니다.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ProjName"
             x:Class="ProjName.MainPage"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="Black"
            android:TabbedPage.BarSelectedItemColor="Red">
    <local:LoginPage Title="Favorites" Icon="ic_favorites.png" />
    <local:LoginPage Title="Friends" Icon="ic_friends.png" />
    <local:LoginPage Title="Nearby" Icon="ic_nearby.png" />
    <local:LoginPage Title="Recents" Icon="ic_recents.png" />
    <local:RegistrationPage Title="Restaurants" Icon="ic_restaurants.png" />
</TabbedPage>

결과는

'ToolbarPlacement'에 대한 속성, 바인딩 가능한 속성 또는 이벤트가 없거나 값과 속성 간에 유형이 일치하지 않습니다.

프로그래밍 방식으로 수행하는 유사한 문제 - 단순히 해당 업데이트를 인식하지 못합니다.

저는 Windows VS에서 테스트를 위해 8.1 Android를 사용하고 있으며 .net 프로젝트가 아닌 공유 프로젝트입니다. 누군가 내가 무엇을 놓치고 있는지 말해 줄 수 있다면 매우 기쁠 것입니다.

@pureween?

@taramasalata 는 모든 프로젝트가 최신 버전의 3.1.0을 사용하고 있는지 확인합니다. 뭔가 일치하지 않습니다.

여기에서 내 샘플 프로젝트를 확인할 수도 있습니다. https://github.com/davidortinau/TheLittleThingsPlayground

또한 공유 프로젝트에서 하단 탭을 오류 없이 수행할 수 있음을 확인했습니다. 프로젝트:
앱25.zip

@davidortinau 도와주셔서 감사합니다. 나는 8 가지 솔루션에서 이것의 변형을 시도했습니다. 모든 프로젝트를 3.1.0으로 업데이트하고 모든 것을 세 번 확인했습니다. 각 항목에 대해 "업데이트" 탭을 반복적으로 확인했는데 모두 최신 상태입니다. 다른 시도를 할 수 없습니다. 오전에 샘플 프로젝트를 시도하고 다시 연락드리겠습니다. VS를 다시 설치해야 할 수도 있습니다.

app25는 'ToolbarPlacement'에 대해 속성, 바인딩 가능한 속성 또는 이벤트를 찾을 수 없거나 값과 속성 간에 유형이 일치하지 않는 오류로 빌드되지 않습니다.

당신은 Windows 또는 Mac에 있습니까?

VS를 완전히 다시 설치하려고 합니다. 이제 다른 시도를 할 수 없습니다.

아니요. App25를 실행하여 새로 설치하면 기쁨이 없습니다. 너무 답답합니다.
오류: 위치 6:13. 'ToolbarPlacement'에 대한 속성, 바인딩 가능한 속성 또는 이벤트가 없거나 값과 속성 간에 유형이 일치하지 않습니다.

Xamarin.Forms 외에 이에 필요한 패키지가 있습니까?

흠 빌드 도구 체인의 무언가가 옳지 않습니다 @taramasalata
메시지를 보기 위해 빌드 출력을 verbose로 설정하시겠습니까? Android SDK를 확인하여 최신 빌드 도구가 있는지 확인하세요? 4.7.1 sdk를 설치하면 해결되는지 확인하십시오. 캐시된 모든 Xamarin.forms 너겟 삭제
c:사용자.누겟

ILSpy 또는 dotpeek과 같은 것을 사용하여 디버그 디렉토리의 dll을 보고 버전을 확인하거나 해당 값을 찾을 수 있는지 확인하십시오.

XAML 대신 코드 기반 접근 방식을 시도하시겠습니까?

@pureween 감사합니다. 코드 기반과 xaml을 모두 시도했습니다. 또한 VS를 다시 설치하고 "미리보기" 버전도 시도했습니다. 내 제거/재설치가 .nuget 파일을 삭제하지 않았을 가능성이 높습니다. 이제 모든 제안을 시도하겠습니다.

Android의 모든 것을 다시 설치하면 이제 작동합니다. 모두 감사합니다!

빠른 질문 Android 8.1 이상에서만 실행될 것이라고 생각하는 것이 맞습니까?

안녕하세요 @taramasalata입니다. 비슷한 문제가 있었고 다음 단계를 사용하여 해결되었습니다.

• 내 앱의 모든 "bin" 및 "obj" 폴더 삭제
• "해결책 정리"를 클릭하십시오.
• 비주얼 스튜디오 다시 시작
• "솔루션 재구축"을 클릭하십시오.

@taramasalata 야이 !!!! API 15 이상의 모든 기기에서 실행되어야 합니다.

이것을 구축할 때 API 15, 19, 23, 27에 대해 테스트했습니다.

19호와 15호에서 틴트 컬러를 작업하는 것은 정말 재미있었습니다.

@taramasalata 예, using Xamarin.Forms.PlatformConfiguration.AndroidSpecific 하고 VS를 다시 시작하고 솔루션을 청소한 후 작동했습니다.

상단에 사용 시 6명의 어린이와 함께 사용할 수 있습니다. 가 바닥에 있을 때 5입니다.
"Java.Lang.IllegalArgumentException:"

@marcelinhovt 네, 그건 안드로이드 제한 사항입니다.

Android의 BottomNavBar는 5개 항목만 지원하며 실제로 이 문제를 해결할 수 있는 방법은 없습니다.

@PureWeen 오...몰랐어요. 감사합니다... 확장할 렌더링을 작성하려고 합니다.

@marcelinhovt 그래서 내 말은 기본적으로 Android의 BottomNavigationBar가 5개 이상의 항목을 지원하지 않는다는 것입니다. 그것은 우리의 디자인에 의해 부과된 제한이 아닙니다

하단 탭 바에서 고도를 설정하는 방법이 있습니까?

탭이 5개뿐인 경우에도 Android 제한에 새로운 문제가 있습니다. 앱이 충돌합니다.

@amrkamal1993 재현과 새 문제를 만들 수 있다면 문제를 해결할 수 있기를 바랍니다.

@PureWeen PureWeen 감사합니다. 도구 모음에 제목 아이콘을 추가하면 예외가 발생합니다. 하단 탭과 도구 모음이 있는데 처리되지 않는 문제입니다.

@amrkamal1993 하단 탭에 대한 모든 테스트 코드는 아이콘을 사용합니다.

충돌을 재현할 수 있는지 확인하기 위해 테스트할 수 있는 재현 또는 코드를 게시할 수 있습니까?