工具栏,SwipeRefreshLayout和DrawerLayout

时间:2017-03-22 19:19:28

标签: android xml xamarin

我想创建一个布局,顶部有一个自定义工具栏,左侧抽屉带有一个主要内容,当您将其拉下时会刷新。 我已经尝试了几乎所有组合,但我无法弄明白。我错过了什么?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- OUR CUSTOM TOOLBAR -->
  <!-- app:theme determines textcolor on toolbar-->
  <!-- app:popupTheme sets theme for the pop-up button on the right-->
  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_height="wrap_content"
      android:layout_width="match_parent"
      android:minHeight="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

  <FrameLayout android:layout_weight="1"
               android:layout_height="0dp"
               android:layout_width="match_parent">

  <!-- REFRESH LAYOUT FOR WHEN THE USER PULLS DOWN -->
  <android.support.v4.widget.SwipeRefreshLayout
      android:id="@+id/swipeLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_below="@+id/toolbar">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
      <TextView
          android:text="Pull to refresh"
          android:textColor="#000000"
          android:layout_width="match_parent"
          android:layout_height="match_parent"

          />
    </ScrollView>
  </android.support.v4.widget.SwipeRefreshLayout>


  <!-- DRAWER LAYOUT -->
  <android.support.v4.widget.DrawerLayout
      android:id="@+id/drawerLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <!-- THE MAIN CONTENT VIEW -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"
        android:background="#F44248">
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="This is text inside Main content view"

          />
    </RelativeLayout>
    <!-- THE LEFT DRAWER -->
    <ListView
        android:id="@+id/leftDrawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="#818181"
        android:dividerHeight="1dp"
        android:background="#E3F2FD" />
  </android.support.v4.widget.DrawerLayout>
  </FrameLayout>


</LinearLayout>

这是代码隐藏的代码:

using Android.App;
using Android.OS;
using Android.Support.V7.App;

namespace Test
    {


        [Activity(Label = "Test", MainLauncher = true, Icon = "@drawable/icon", Theme ="@style/MyTheme")]
        public class MainActivity : AppCompatActivity
        {
        Android.Support.V7.Widget.Toolbar gToolbar;
        protected override void OnCreate(Bundle bundle)
            {
                base.OnCreate(bundle);

                // Set our view from the "main" layout resource
                SetContentView (Resource.Layout.Scroll);

            // Our custom toolbar
            gToolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(gToolbar);
            SupportActionBar.Title = "Menu";
        }
        }
    }

更新

这是它在我的屏幕上显示的方式。因此,即使我可以刷出抽屉,SwipeRefreshLayout也不会刷新页面。 enter image description here enter image description here

2 个答案:

答案 0 :(得分:1)

  

问题似乎是抽象布局与swiperrefreshlayout重叠,因此抽屉可以进入,但是swiperefreshlayout隐藏在抽屉布局后面。

你是对的,所以如果你希望SwipeRefreshLayout正常工作,你需要用DrawerLayout包裹SwipeRefreshLayout

<android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipeLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/toolbar">
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <!--THE MAIN CONTENT VIEW-->

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="20dp"
                android:background="#F44248">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="This is text inside Main content view" />
            </RelativeLayout>

    <!--THE LEFT DRAWER-->
        <ListView
            android:id="@+id/leftDrawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="#818181"
            android:dividerHeight="1dp"
            android:background="#E3F2FD" />
    </android.support.v4.widget.DrawerLayout>
</android.support.v4.widget.SwipeRefreshLayout>

你会得到这个:

enter image description here

或者,如果您只想刷新DrawerLayout的主要内容,可以使用SwipeRefreshlayout包装DrawerLayout的第一个子元素:

<android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <!--THE MAIN CONTENT VIEW-->
      <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="20dp"
                android:background="#F44248">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="This is text inside Main content view" />
            </RelativeLayout>
      </android.support.v4.widget.SwipeRefreshLayout>

    <!--THE LEFT DRAWER-->
        <ListView
            android:id="@+id/leftDrawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="#818181"
            android:dividerHeight="1dp"
            android:background="#E3F2FD" />
    </android.support.v4.widget.DrawerLayout>

你会得到这样的东西:

enter image description here

最后,不要忘记手动实现Refresh事件,因为控件不会自动刷新:

public class MainActivity : AppCompatActivity
{
    Android.Support.V7.Widget.Toolbar gToolbar;
    SwipeRefreshLayout refreshLayout;
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);

        // Our custom toolbar
        gToolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        refreshLayout = FindViewById<SwipeRefreshLayout>(Resource.Id.swipeLayout);
        refreshLayout.Enabled = true;
        refreshLayout.Refresh += RefreshLayout_Refresh;
        SupportActionBar.Title = "Menu";
    }

    private void RefreshLayout_Refresh(object sender, System.EventArgs e)
    {
        //refresh the controls manually here
    }
}

答案 1 :(得分:0)

在onCreate()方法中,您需要一个SwipeRefreshLayout的侦听器。您可以了解这些here

将此代码添加到onCreate()方法:

SwipeRefreshLayout swipeRefreshLayout = new SwipeRefreshLayout(this);
swipeRefreshLayout.setOnRefreshListener(new OnRefreshListener(){
    @Override
    public void onRefresh() {
        // What you want to do when you refresh your layout.
    }
});

希望这有帮助!