Detect Click/Tap in Empty Area

6 posts, 0 answers
  1. Nathanael
    Nathanael avatar
    6 posts
    Member since:
    May 2016

    Posted 26 Jul Link to this post

    Since there is no source to the actual underlying control, I can't really look myself...
    Is there anyway to detect a click in the empty space if there is few or no items in the listview?   
  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 26 Jul Link to this post

    Hello,

    Thank you for contacting us,

    I reviewed your scenario and found possible solution. For Android you could add two tap gestures one for the main Layout and another for inner ListView, In this case you will know, which layout  have been taped. For iOS I was unable to find easy way to do that, because when you set tap event to the ListView and its parent Layout and tap on some of the ListView items, both events will be fired in the same time. However some possible workaround is to set global value, which could help you to find, when the ListView have been taped in iOS.
    In regard to that you could review my sample project, where you could review my suggestion.

    main-page.xml
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
      <StackLayout backgroundColor="green" id="stack">
        <ListView  id="lv" backgroundColor="red" items="{{ source }}">
            <ListView.itemTemplate>
                <Label text="{{title}}" textWrap="true" />
                 
            </ListView.itemTemplate>
        </ListView>
         
      </StackLayout>
    </Page>

    main-page.ts
    import { EventData } from "data/observable";
    import { Page } from "ui/page";
    import {ObservableArray} from "data/observable-array";
    import {isAndroid, isIOS} from "platform";
    import {ListView} from "ui/list-view";
    import {GestureTypes, GestureEventData} from "ui/gestures";
    import {StackLayout} from "ui/layouts/stack-layout"
     
    var status = "";
    export function navigatingTo(args: EventData) {
        var page = <Page>args.object;
        var listview:ListView  =<ListView>page.getViewById("lv");
        var stacklayout:StackLayout =<StackLayout>page.getViewById("stack");
        var textfield = page.getViewById("etxtf");
        var newArray= new ObservableArray();
        for(var i=0; i<4; i++){
            newArray.push({"title":"Title "+i});
        }
     
        if(isAndroid){
            stacklayout.on("tap", function(args){
                console.log("empty space tap");
            });
     
            listview.on("tap", function(args){
                console.log("listview tap");
            });
        }
        if(isIOS){
            stacklayout.on(GestureTypes.tap, function(args:GestureEventData){
                console.log(args.view);
                if(status == "inListView"){
                    console.log("in the ListView");
                    status="";
                }
                else{
                    console.log("empty space")
                }
                 
            });
            listview.on("tap", function(args:any){
                status="inListView"
            });
        }
        page.bindingContext = {source : newArray};
    }


    I hope this is applicable for you.

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Nathanael
    Nathanael avatar
    6 posts
    Member since:
    May 2016

    Posted 26 Jul in reply to nikolay.tsonev Link to this post

    Sorry, I guess I should have put "RadListView" I assumed it was what everyone would be talking about in the UI of NS/ListView group.  ;-)

     

    If you have:

    <Page xmlns:lv="nativescript-telerik-ui/listview"  tap="stackClick">
    <StackLayout id="mainPanel" tap="stackClick">

        <lv:RadListView id="lines" itemSwipe="true" class="rlv" tap="stackClick"
                        itemTap="groupClick"
                        itemSwipeProgressStarted="itemSwipeProgressStarted"
                        itemSwipeProgressEnded="itemSwipeProgressEnded">
        <lv:RadListView.listViewLayout>
          <lv:ListViewGridLayout scrollDirection="Vertical" spanCount="1"/>
        </lv:RadListView.listViewLayout>
        <lv:RadListView.itemTemplate>
    <!-- Normal Layout -->
        </lv:RadListView.itemTemplate>
            <lv:RadListView.itemSwipeTemplate>
    <!--- Swipe Layout -->
    </lv:RadListView.itemSwipeTemplate>
        </lv:RadListView>
      </StackLayout>
      </Page>

     

    I'm currently testing on Android...

    The code for "stackClick" is a simple exports.stackClick = function() { console.log("I'm clicked");  }

    So in this specific instance the Radlistview takes up the entire screen, tapping anywhere on the screen does NOT give me a "I'm clicked" output, even though it has been assigned at all three layers of the app; the RadListView seems to eat the tap even in its empty area.

  4. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 28 Jul Link to this post

    Hello Nathanael,

    This seems to be the expected behavior as the native RecyclerView (which RadListView utilizes for Android) always handles the touch event and never lets it bubble up to the parent element. Can you please provide some more details what your scenario is so that we can think of a way of helping you?

    Thanks!

    Regards,
    Deyan
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Nathanael
    Nathanael avatar
    6 posts
    Member since:
    May 2016

    Posted 28 Jul in reply to Deyan Link to this post

    It might be "expected" default; behavior; but if I can get access to the underlying native control -- then things like http://stackoverflow.com/questions/27703779/detect-click-on-recyclerview-outside-of-items

    can come into play  (or you can even add this functionality built into the RLV).  ;-)

    I basically need to detect if I'm clicking outside of a valid item so if the list view is only say two entries; I want to detect clicks in the empty area to run some additional functionality....

  6. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 01 Aug Link to this post

    Hello Nathanael,

    Thanks for writing back.

    Here's a simple snippet (sourced from the StackOverflow discussion you have mentioned) that implements the behavior:

    export function onPageLoaded(args) {
        var page = args.object;
        page.bindingContext = new viewModel.ViewModel();
        if (applicationModule.android) {
            var radListView = page.getViewById("radListView");
            var nativeView = radListView.android.getChildAt(0);
            console.log("ListView: " + radListView.android.getChildAt(0));
     
     
            nativeView.setOnTouchListener(new android.view.View.OnTouchListener({
                onTouch: function (v, event) {
                    if (event.getAction() == android.view.MotionEvent.ACTION_DOWN
                        && nativeView.findChildViewUnder(event.getX(), event.getY()) == null) {
                            console.log("TOUCH OUTSIDE ITEMS");
                        return true;
                    }
                    return false;
                }
     
            }));
        }
    }

    I have tested it on my side and it works as expected.

    Let me know in case you have any further questions.

    Regards,
    Deyan
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top