使用SlidingUpPanel库在底部保持视图

时间:2016-06-02 22:22:49

标签: java android android-layout

我在Media Player个应用中使用SlidingUpPanel library

在幻灯片中,我有媒体控件,我想在顶部显示曲目的艺术作品。我遇到的问题是我希望媒体控件始终位于屏幕的底部(即使用户拖动面板,这意味着我必须使用onPanelSlide ()方法)。也许像一个视差效果(不确定这是否是正确的名称)。这就是我现在所拥有的:

折叠/展开/拖动:
enter image description here enter image description here enter image description here

正如您所看到的,当我拖动面板时,控件会粘在顶部。我希望它能粘在屏幕的底部,并在其上方展示艺术作品。

我在考虑CoordinatorLayout,但我不知道它是如何运作的!

我的代码:

  

activity.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="92dp"
        sothree:umanoShadowHeight="4dp">

        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <include layout="@layout/details_slide_bar" />
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>

</RelativeLayout>
  

details_slide_bar.xml

<LinearLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_gravity="bottom"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/ivArtworkBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:visibility="gone"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="92dp"
        android:orientation="horizontal"
        android:id="@+id/lDetailsBar">

        /!-- Content of the detalBar !-->
    </RelativeLayout>
</LinearLayout>

目前,我只是检查面板的状态并相应地调整图稿的visibility

  

The Main Activity (MyListActivity.java)

必须有另一种方式!

5 个答案:

答案 0 :(得分:5)

首先,在onCreate of your activity

function checkLecturer() {
    var lecturerFullname = $('#lecturerFullname').val();
    var compVal = $('#supervisorID').val();

    if(compVal.localeCompare(lecturerFullname) === 0) {
         alert('same thing');
    } else {
        // do something
    }
}

$(document).ready(function() {
    // add the event listender
    $('#lecturerFullname').on('change', checkLecturer); 
})

然后将面板状态设置为已折叠。

mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);

如果您的滑动面板不可见,那么

 mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
 mLayout.setEnableDragViewTouchEvents(false);
 mLayout.setDragView(null);
 mLayout.setEnabled(false);
 mLayout.setClickable(false);

此处mLayout.setPanelHeight(your panel height); 值必须为整数。甚至你可以动态地像your panel height;

那样做

答案 1 :(得分:3)

我明白了!大脑在最近几天没有工作,我想大声笑。这只是简单的数学!

private SlidingUpPanelLayout slidingLayout;

@Ovverride
public void onCreate(Bundle bundle) {
    slidingLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);

}

@Override
public void onPanelSlide(View panel, float slideOffset) {
    if (lDetails != null) {
        if (!varsInitialized) {
            relativeParams = (RelativeLayout.LayoutParams) lDetails.getLayoutParams();
            varsInitialized = true;
        }
        int adjustedMargin = slidingLayout.getHeight() - slidingLayout.getPanelHeight() - panel.getTop();
        relativeParams.setMargins(0, adjustedMargin, 0, 0);  // left, top, right, bottom
        lDetails.setLayoutParams(relativeParams);
    }
}

答案 2 :(得分:2)

嗯,这是非常具体的实施。也许你可以这样做

var derp = function(){
  return newEl(head, 'div', someAttributes, someText);
};

function loop(num, content) {
  for(var i = 0; i < num; i++)  {
    content(); // <== call function derp here
    console.log('derp');
  }
}

loop(3, derp);

答案 3 :(得分:2)

尝试将您的listview和details_slide_bar包装在RelativeLayout中,并更改onPanelExpanded和onPaanelCollapsed中的LayoutParams。以下是我使用该库的一些项目的示例。

<强> activity_main.xml中

<android.support.v4.widget.DrawerLayout
        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/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.nerdability.android.ArticleListActivity">


    <com.sothree.slidinguppanel.SlidingUpPanelLayout
            xmlns:sothree="http://schemas.android.com/apk/res-auto"
            android:id="@+id/sliding_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom"
            sothree:umanoPanelHeight="?attr/actionBarSize"
            sothree:umanoShadowHeight="4dp"
            sothree:umanoDragView="@+id/dragView">
        <!-- MAIN CONTENT -->
        <RelativeLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="0dp"
                android:divider="?android:attr/dividerHorizontal"
                android:orientation="horizontal"
                android:showDividers="middle">
            <LinearLayout
                    android:id="@+id/toolbarContainer"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:minHeight="?attr/actionBarSize">
                <include layout="@layout/toolbar"/>
            </LinearLayout>
            <LinearLayout
                    android:layout_below="@id/toolbarContainer"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="0dp"
                    android:layout_marginStart="0dp"
                    android:divider="?android:attr/dividerHorizontal"
                    android:baselineAligned="false"
                    android:orientation="horizontal"
                    android:showDividers="middle"
                    tools:context=".ArticleListActivity" >
                <FrameLayout
                        android:id="@+id/article_list"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"/>


            </LinearLayout>

        </RelativeLayout>

        <!-- SLIDING LAYOUT -->
        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:clickable="false"
                android:focusable="true"
                android:id="@+id/dragView">
                <ImageView
                    android:id="@+id/img"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="25dp"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"/>

            <LinearLayout
                    android:id="@+id/toolbar_view"
                    android:layout_alignParentTop="true"
                    android:layout_width="match_parent"
                    android:background="@color/holo_blue_light"
                    android:layout_height="?attr/actionBarSize"
                    android:orientation="horizontal">
                <TextView
                        android:layout_width="wrap_content"
                        android:ellipsize="end"
                        android:layout_gravity="center_vertical"
                        android:layout_height="wrap_content"
                        android:textSize="25sp"
                        android:textColor="@color/white"
                        android:paddingLeft="20dp"
                        android:text="@string/app_name"/>
            </LinearLayout>
            <include
                    android:id="@+id/player_view"
                    android:layout_alignParentTop="true"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    layout="@layout/player" />
        </RelativeLayout>

    </com.sothree.slidinguppanel.SlidingUpPanelLayout>
</android.support.v4.widget.DrawerLayout>

<强> MainActivity.Java

mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        mLayout.setPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            View playerView = (View) findViewById(R.id.player_view);
            View toolbarView = (View) findViewById(R.id.toolbar_view);

            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i(TAG, "onPanelSlide, offset " + slideOffset);
            }

            @Override
            public void onPanelExpanded(View panel) {
                Log.i(TAG, "onPanelExpanded");
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) playerView.getLayoutParams();
                lp.removeRule(RelativeLayout.ALIGN_PARENT_TOP);
                lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
                playerView.setLayoutParams(lp);
                playerView.bringToFront();

            }

            @Override
            public void onPanelCollapsed(View panel) {
                Log.i(TAG, "onPanelCollapsed");
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) playerView.getLayoutParams();
                lp.removeRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
                lp.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);

                playerView.setLayoutParams(lp);
                playerView.bringToFront();
            }

            @Override
            public void onPanelAnchored(View panel) {
                    Log.i(TAG, "onPanelAnchored");
                }
            @Override
            public void onPanelHidden(View panel) {
                    Log.i(TAG, "onPanelHidden");
                }
        });

答案 4 :(得分:1)

我认为你应该尝试相对布局。 如果你有一个填充整个屏幕的相对布局,你应该能够使用android:layout_alignParentBottom将按钮移动到屏幕的底部。 首先在你的布局文件中,用android:layout_above。

定位上面其余的布局

创建HEADER和FOOTER,这是一个例子

[布局XML]