ViewPager中的CollapsingToolbarLayout

时间:2016-12-30 20:05:13

标签: android layout

我正在使用加载不同页面的ViewPager。这些应由CollapsingToolbarLayout

组成
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

一旦充气,布局应如下:

它允许浏览页面,每个页面的工具栏中都有一张可以单独折叠的图片。这可能吗?

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@color/background"
    android:transitionName="@string/transition_session_background">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll"
            android:minHeight="1px"
            android:fitsSystemWindows="true"
            android:background="@null"
            app:titleEnabled="false">



                <ImageView
                    android:id="@+id/photo"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:transitionName="@string/transition_session_image" />



        </android.support.design.widget.CollapsingToolbarLayout>



            <include layout="@layout/toolbar" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:clipToPadding="false">


    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

2 个答案:

答案 0 :(得分:0)

  

它应允许浏览页面,每页都有一张图片   它的工具栏可以单独折叠。这可能吗?

不,不幸的是,工具栏对于viewpager的每个页面都有自己的状态是不可能的。理由很简单,因为viewpager是一个视图层次相同的视图,因为viewpager,viewpager和toolbar可以独立工作。

虽然,您可以拥有一个应用程序,每次在viewpager中更改页面时,工具栏仍然会折叠或展开。 要实现此设置,请在页面更改侦听器

上设置viewpager
// Attach the page change listener inside the activity
vpPager.addOnPageChangeListener(new OnPageChangeListener() {

    // This method will be invoked when a new page becomes selected.
    @Override
    public void onPageSelected(int position) {
        appBarLayout.setExpanded(true);//or false as you wish
    }


}); 

使用Support Library v23,您可以在onPageSelected()重写方法中调用appBarLayout.setExpanded(true / false)。

答案 1 :(得分:0)

您可以将 function divsub(){ var firstname= document.getElementById('first_name').value; var lastname= document.getElementById('lastname').value; var username= document.getElementById('username').value; var email= document.getElementById('email').value; var emailconfirm= document.getElementById('confirmemail').value; var pass= document.getElementById('pass_id').value; var passconfrim= document.getElementById('confirmpassword').value; var phone= document.getElementById('phone').value; var datastring = 'first_name='+firstname+'&lastname='+lastname+'&username='+username+'&email='+email+'&confirmemail='+emailconfirm+'&pass_id='+pass+'&confirmpassword='+passconfrim+'&phone='+phone; $.ajax({ type:"POST", url:"regestration.php", data:datastring, cache:false, success:function(html){ if(html === "you have sucessfuly regestered!check your email to activated your account.") { var ffirstname= document.getElementById('first_name').value; var eemail= document.getElementById('email').value; location.href = "rregsuccess.php?first_name="+ffirstname+"&email"+eemail; } else{ $('#resto').html(html); // window.location.href = "regsuccess.php"; } } }); return false; } Collapsing toolbarviewpager

一起使用
Tablayout

这里有一个很好的实现示例: http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/