स्क्रॉल सूचीदृश्य

Question

पर एक्शनबार छुपाएं मेरे पास एक ऐप है जिसमें एक एक्शन बार और एक टैबव्यू है। टैबव्यू के अंदर एक सूचीदृश्य है। मैं जो चाहता हूं वह है जब उपयोगकर्ता सूची को स्क्रॉल कर रहा है और जब उपयोगकर्ता स्क्रॉल कर रहा है और इसे अच्छी तरह से करता है तो पॉप अप करने के लिए एक्शनबार है। उदाहरण के तौर पर एंड्रॉइड के लिए यूट्यूब ऐप यह कर रहा है।

मैंने इस कोड को https://gist.github.com/vakrilov/6edc783b49df1f5ffda5 पर आजमाया है, लेकिन जैसा कि मैंने बार को छुपाया है, स्क्रीन के नीचे एक सफेद जगह दिखाई देती है, इसलिए इस मामले में वास्तव में उपयोगी नहीं है। मैंने कोशिश की और इसे संशोधित और ऊंचाई बढ़ाने के लिए असफल के रूप में मैं पट्टी का उपयोग कर छिपाने:

var params = userList.android.getLayoutParams(); 
params.height = 500; 
userList.android.setLayoutParams(params); 
userList.android.requestLayout();  

इसके अलावा इस

var LayoutParams= android.view.ViewGroup.LayoutParams; 
var params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 

अंत में मैं बाहर बात काम करने का एक प्रकार के साथ आया था, लेकिन यह बहुत अचानक है छिपाने/प्रकट होने पर कोई एनीमेशन

var isChangingBar = false; 
var isBarHidden = false; 
userList.on("pan", function(args) { 
    var delta = args.deltaY; 
    console.log("deltaY: " + delta); 

    if (!isChangingBar) { 
     if (delta > 0 && isBarHidden === true) { 
     isChangingBar = true; 
     isBarHidden = false; 
     page.actionBarHidden = false; 
     isBarHidden = false; 
     setTimeout(function() { 
      isChangingBar = false; 
     }, 250); 
     } 
     else if (delta < 0 && isBarHidden === false) { 
     isChangingBar = true; 
     page.actionBarHidden = true; 
     isBarHidden = true; 
     setTimeout(function() { 
      isChangingBar = false; 
     }, 250); 
     } 
    } 
} 

कुछ विचार अगर कोई बेहतर तरीका है?

Answer 1

आप छिपाने/शो पर ActionBar एनीमेशन जोड़ सकते हैं:

declare const java: any; 
declare const android: any; 

export enum LayoutTransitionTypes { 
    CHANGE_APPEARING = 0, 
    CHANGE_DISAPPEARING, 
    APPEARING, 
    DISAPPEARING, 
    CHANGING 
} 

export function initPageActionBarVisibilityAnimations(page) { 
    if (!page.actionBar) { 
     return; 
    } 
    const actionBarH = page.actionBar.getMeasuredHeight(); 
    if (actionBarH < 1) { 
     return; 
    } 
    const lt = new android.animation.LayoutTransition(); 
    lt.setAnimator(LayoutTransitionTypes.APPEARING, (function() { 
     const a = new android.animation.ObjectAnimator(); 
     a.setPropertyName('translationY'); 
     a.setFloatValues([0.0]); 
     a.setDuration(lt.getDuration(2)); 
     return a; 
    })()); 
    lt.setAnimator(LayoutTransitionTypes.DISAPPEARING, (function() { 
     const a = new android.animation.ObjectAnimator(); 
     a.setPropertyName('translationY'); 
     a.setFloatValues([-actionBarH]); 
     a.setDuration(lt.getDuration(3)); 
     return a; 
    })()); 
    lt.setStartDelay(LayoutTransitionTypes.CHANGE_APPEARING, 0); 
    lt.setStartDelay(LayoutTransitionTypes.CHANGE_DISAPPEARING, 0); 
    lt.setStartDelay(LayoutTransitionTypes.APPEARING, 0); 
    lt.setStartDelay(LayoutTransitionTypes.DISAPPEARING, 0); 
    lt.setStartDelay(LayoutTransitionTypes.CHANGING, 0); 
    page.nativeView.setLayoutTransition(lt); 
} 

अब हम स्वचालित रूप से छिपाने के लिए स्क्रॉल पर/शो कार्रवाई बार पेज pan event उपयोग कर सकते हैं/नीचे घटनाओं ऊपर पैन। page.actionBarHidden का प्रत्येक परिवर्तन चिकनी एक्शनबार छुपा/शो संक्रमण शुरू करेगा।

export function onScrollPan(ev: PanGestureEventData) { 
    const actionBar = page.actionBar; 
    const scrollView: ScrollView = <ScrollView>page.getViewById('mainScrollView'); 
    const voffset = scrollView.verticalOffset; 
    const dh = 50; 
    if (page.actionBarHidden && ev.deltaY > dh * 5) { 
     initPageActionBarVisibilityAnimations(page); 
     page.actionBarHidden = false; 
    } else if (!page.actionBarHidden 
       && ev.deltaY < -dh 
       && voffset > 0 && voffset > 2 * actionBar.getMeasuredHeight()) { 
     initPageActionBarVisibilityAnimations(page); 
     page.actionBarHidden = true; 
    } 
}