可拖动的滑动面板和Menu的实现（SlidingUpPanelLayout）

最新推荐文章于 2021-05-28 12:20:47 发布

杨天福911

最新推荐文章于 2021-05-28 12:20:47 发布

阅读量8.3k

点赞数

分类专栏： Android 文章标签： menu 可拖动滑动面板

本文链接：https://blog.csdn.net/ytfunnysite/article/details/74989395

版权

Android 专栏收录该内容

179 篇文章 3 订阅

订阅专栏

布局文件：

一、该控件的使用方式：

（1）在你moudle的gradle中引用：
repositories {
mavenCentral()
}
compile ‘com.sothree.slidinguppanel:library:3.3.1’

（2）使用com.sothree.slidinguppanel.SlidingUpPanelLayout作为活动布局的根元素。

（3）这个元素必须把gravity 设置为top 或bottom

（4）确保你有两个子元素第一个是main layout 第二个是你要滑到上面的托盘 layout

（5）main layout 必须把宽和高设置为 match_parent

（6）滑到上面的layout必须把宽设置为 match_parent，而高或者为 match_parent 或者为最大的任意高度

<?xml version="1.0" encoding="utf-8"?>
<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:gravity="bottom"
    android:id="@+id/sliding_layout"
    sothree:umanoPanelHeight="68dp"
    sothree:umanoShadowHeight="4dp">
    <!-- MAIN CONTENT -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <android.support.v7.widget.Toolbar
            xmlns:sothree="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/main_toolbar"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            sothree:theme="@style/ActionBar"
            android:layout_width="match_parent"/>
        <TextView
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"
            android:gravity="center"
            android:text="Main Content"
            android:clickable="true"
            android:focusable="false"
            android:focusableInTouchMode="true"
            android:textSize="16sp" />

    </RelativeLayout>

    <!-- SLIDING LAYOUT -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|top"
        android:background="#ffffff"
        android:orientation="vertical"
        android:clickable="true"
        android:focusable="false"
        android:id="@+id/dragView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/name"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="14sp"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"/>

            <Button
                android:id="@+id/follow"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:textSize="14sp"
                android:gravity="center_vertical|right"
                android:paddingRight="10dp"
                android:paddingLeft="10dp"/>

        </LinearLayout>
        <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </ListView>

    </LinearLayout>


</com.sothree.slidinguppanel.SlidingUpPanelLayout>

资源文件：

style

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowActionBarOverlay">true</item>

    </style>
    <style name="ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:displayOptions">homeAsUp</item>
    </style>

strings

<resources>
    <string name="app_name">YTF</string>
    <string name="action_settings">Settings</string>
    <string name="action_hide">隐藏面板</string>
    <string name="action_show">显示面板</string>
    <string name="action_anchor_enable">锚点</string>
    <string name="action_anchor_disable">禁用锚点</string>
    <string name="hello"><![CDATA[<b>CSDN链接：</b><br/> Brought to you by<br/><a href="http://write.blog.csdn.net/postlist?ticket=ST-436121-sux01OEF0td1YcAOyoIh-passport.csdn.net">我的CSDN滑动面板</a>]]></string>
    <string name="follow"><![CDATA[Follow us<br/>on <a href="http://write.blog.csdn.net/postlist?ticket=ST-436121-sux01OEF0td1YcAOyoIh-passport.csdn.net">Twitter</a>]]></string>
</resources>

menu

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sothree="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_toggle"
        android:orderInCategory="100"
        sothree:showAsAction="never"
        android:title="@string/action_hide"/>

    <item
        android:id="@+id/action_anchor"
        android:orderInCategory="200"
        sothree:showAsAction="never"
        android:title="@string/action_anchor_enable"/>    

</menu>

MainAcvitity.class

package com.example.pc.ytf;

import android.content.Intent;
import android.net.Uri;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.view.menu.MenuBuilder;
import android.support.v7.widget.Toolbar;
import android.text.Html;
import android.text.method.LinkMovementMethod;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.sothree.slidinguppanel.SlidingUpPanelLayout;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends ActionBarActivity {
    private static final String TAG = "滑动面板测试";
    private com.sothree.slidinguppanel.SlidingUpPanelLayout mLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setSupportActionBar((Toolbar) findViewById(R.id.main_toolbar));
        ListView lv = (ListView) findViewById(R.id.list);
        mLayout= (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, "onItemClick点击事件", Toast.LENGTH_SHORT).show();

            }
        });

        List<String> your_array_list = Arrays.asList("This", "Is", "An", "Example", "ListView", "That",
                "You", "Can", "Scroll", ".", "It", "Shows", "How", "Any", "Scrollable", "View", "Can", "Be",
                "Included", "As", "A", "Child", "Of", "SlidingUpPanelLayout");
        ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(
                this,
                android.R.layout.simple_list_item_1,
                your_array_list);

        lv.setAdapter(arrayAdapter);
//        mLayout = (com.sothree.slidinguppanel.SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        mLayout.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i(TAG, "onPanelSlide, offset " + slideOffset);//滑动面板的位置改变。
            }

            @Override
            public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
                Log.i(TAG, "onPanelStateChanged " + newState);//滑动面板的状态改变。

            }
        });
        mLayout.setFadeOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mLayout.setPanelState(SlidingUpPanelLayout.PanelState.DRAGGING);//默认状态
            }
        });
        TextView t = (TextView) findViewById(R.id.name);
        t.setText(Html.fromHtml(getString(R.string.hello)));
        Button f = (Button) findViewById(R.id.follow);
        f.setText(Html.fromHtml(getString(R.string.follow)));

        f.setMovementMethod(LinkMovementMethod.getInstance());
        f.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent i = new Intent(Intent.ACTION_VIEW);
                i.setData(Uri.parse("http://www.twitter.com/umanoapp"));
                startActivity(i);//隐式调用
            }
        });

    }

    /**
     * 此方法用于初始化菜单，其中menu参数就是即将要显示的Menu实例。 返回true则显示该menu,false 则不显示;
     * (只会在第一次初始化菜单时调用)
     *
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
//        return super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.demo, menu);
        MenuItem item = menu.findItem(R.id.action_toggle);
        if (mLayout != null) {
            if (mLayout.getPanelState() == SlidingUpPanelLayout.PanelState.HIDDEN) {
                item.setTitle(R.string.action_show);
            } else {
                item.setTitle(R.string.action_hide);
            }
        }

        return true;
    }

    /**
     * 在onCreateOptionsMenu执行后，菜单被显示前调用；如果菜单已经被创建，则在菜单显示前被调用。 同样的，
     * 返回true则显示该menu,false 则不显示; （可以通过此方法动态的改变菜单的状态，比如加载不同的菜单等） TODO
     * @param menu
     * @return
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        return super.onPrepareOptionsMenu(menu);
    }

    /**
     * 菜单项被点击时调用，也就是菜单项的监听方法。
    * 通过这几个方法，可以得知，对于Activity，同一时间只能显示和监听一个Menu 对象。
     * @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_toggle: {
                if (mLayout != null) {
                    if (mLayout.getPanelState() != SlidingUpPanelLayout.PanelState.HIDDEN) {
                        mLayout.setPanelState(SlidingUpPanelLayout.PanelState.HIDDEN);
                        item.setTitle(R.string.action_show);
                    } else {
                        mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
                        item.setTitle(R.string.action_hide);
                    }
                }
                return true;
            }
            case R.id.action_anchor: {
                if (mLayout != null) {
                    if (mLayout.getAnchorPoint() == 1.0f) {
                        mLayout.setAnchorPoint(0.7f);
                        mLayout.setPanelState(SlidingUpPanelLayout.PanelState.ANCHORED);
                        item.setTitle(R.string.action_anchor_disable);
                    } else {
                        mLayout.setAnchorPoint(1.0f);
                        mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
                        item.setTitle(R.string.action_anchor_enable);
                    }
                }
                return true;
            }
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * 每次菜单被关闭时调用.
     * （菜单被关闭有三种情形，menu按钮被再次点击、back按钮被点击或者用户选择了某一个菜单项）
     * @param menu
     */
    @Override
    public void onOptionsMenuClosed(Menu menu) {
        super.onOptionsMenuClosed(menu);
    }

    @Override
    public void onBackPressed() {
        if (mLayout != null &&
                (mLayout.getPanelState() == SlidingUpPanelLayout.PanelState.EXPANDED || mLayout.getPanelState() == SlidingUpPanelLayout.PanelState.ANCHORED)) {
            mLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
        } else {
            super.onBackPressed();
        }

    }
}

Android一共有三种形式的菜单:
1.选项菜单（optinosMenu）
2.上下文菜单（ContextMenu）
3.子菜单(subMenu)
其中最常用的就是选项菜单(optionsMenu), 该菜单在点击 menu 按键后会在对应的Activity底部显示出来。

1.Activity菜单机制 (与dialog类似)

public class MainActivity extends Activity {  
02.  
03.  @Override  
04.  protected void onCreate(Bundle savedInstanceState) {  
05.    super.onCreate(savedInstanceState);  
06.    setContentView(R.layout.activity_main);  
07.  }  
08.  
09.  @Override  
10.  public boolean onCreateOptionsMenu(Menu menu) {  
11.    /** 
12.     * 此方法用于初始化菜单，其中menu参数就是即将要显示的Menu实例。 返回true则显示该menu,false 则不显示; 
13.     * (只会在第一次初始化菜单时调用) Inflate the menu; this adds items to the action bar 
14.     * if it is present. 
15.     */  
16.    getMenuInflater().inflate(R.menu.main, menu);  
17.    return true;  
18.  }  
19.  
20.  @Override  
21.  public boolean onPrepareOptionsMenu(Menu menu) {  
22.    /** 
23.     * 在onCreateOptionsMenu执行后，菜单被显示前调用；如果菜单已经被创建，则在菜单显示前被调用。 同样的， 
24.     * 返回true则显示该menu,false 则不显示; （可以通过此方法动态的改变菜单的状态，比如加载不同的菜单等） TODO 
25.     * Auto-generated method stub 
26.     */  
27.    return super.onPrepareOptionsMenu(menu);  
28.  }  
29.  
30.  @Override  
31.  public void onOptionsMenuClosed(Menu menu) {  
32.    /** 
33.     * 每次菜单被关闭时调用. （菜单被关闭有三种情形，menu按钮被再次点击、back按钮被点击或者用户选择了某一个菜单项） TODO 
34.     * Auto-generated method stub 
35.     */  
36.    super.onOptionsMenuClosed(menu);  
37.  }  
38.  
39.  @Override  
40.  public boolean onOptionsItemSelected(MenuItem item) {  
41.    /** 
42.     * 菜单项被点击时调用，也就是菜单项的监听方法。  
43.     * 通过这几个方法，可以得知，对于Activity，同一时间只能显示和监听一个Menu 对象。 TODO Auto-generated 
44.     * method stub 
45.     */  
46.    return super.onOptionsItemSelected(item);  
47.  }  
48.  
49.}

添加菜单：
可以在onCreateOptionsMenu或者 onPrepareOptionsMenu方法中来添加菜单
menu.add((int groupId, int itemId, int order, charsequence title) .setIcon(drawable ID)

add()方法的四个参数，依次是：
1、组别，如果不分组的话就写Menu.NONE,
2、Id，这个很重要，android根据这个Id来确定不同的菜单
3、顺序，哪个菜单项在前面由这个参数的大小决定
4、文本，菜单项的显示文本
add()方法返回的是MenuItem对象，调用其setIcon()方法，为相应MenuItem设置Icon

public boolean onCreateOptionsMenu(Menu menu) {   
      super.onCreateOptionsMenu(menu);   
       menu.add(Menu.NONE,  Menu.First+1 , 0, "设置").setIcon(R.drawable.setting);   
        return true;   
   }

2.2布局文件添加:
getMenuInflater().inflate(R.menu.options_menu, menu);
调用Activity的getMenuInflater()得到一个MenuInflater，
使用inflate方法来把布局文件中的定义的菜单加载给第二个参数所对应的menu对象


[java] view plain copy

 01.@Override   
02.   public boolean onCreateOptionsMenu(Menu menu) {   
03.       super.onCreateOptionsMenu(menu);   
04.       getMenuInflater().inflate( R.menu.options_menu , menu);   
05.       return true;   
06.   }

布局文件：
在res目录下建立一个menu文件夹，并创建布局文件: options_menu.xml

<?xml version="1.0" encoding="utf-8"?>   
  <menu xmlns:android="http://schemas.android.com/apk/res/android">   
   <item android:id=" @+id/menu_setting " android:title="设置" android:icon="@drawable/setting"></item>   
   </menu>

Override   
    public boolean onOptionsItemSelected(MenuItem item) {   
        super.onOptionsItemSelected(item);   
        switch(item.getItemId()) //得到被点击的item的itemId   
       {   
       case  Menu.First+1 :  //对应的ID就是在add方法中所设定的Id   
            break;   
        case  Menu.First+2 :   
            break;   
        }   
        return true;   
    }

3.2布局文件添加菜单的判断方法：


[java] view plain copy

@Override   
   public boolean onOptionsItemSelected(MenuItem item) {   
      super.onOptionsItemSelected(item);   
       switch(item.getItemId()) //得到被点击的item的itemId   
       {   
       case  R.id.menu_setting : //这里的Id就是布局文件中定义的Id，在用R.id.XXX的方法获取出来   
          break;   
       case R.id.menu_info:   
           break;   
       }   
       return true;   
   }

SlidingUpPanelLayout属性介绍：

（1）您可以通过使用setPanelHeight方法或属性umanoPanelHeight改变面板的高度。
（2）如果你想隐藏的滑动面板上方的阴影，设置属性shadowHeight为0。
（3）使用的setEnabled（假）完全禁用的滑动面板（包括触摸和滑动编程）
（4）使用setTouchEnabled（false）来禁用面板的触摸响应速度（阻力和点击），你仍然可以控制面板。
（5）使用getPanelState来获得当前面板的状态
（6）使用setPanelState设置当前面板的状态
（7）您可以通过设置umanoParallaxOffset属性添加视差主视图
（8）可以使用setAnchorPoint以允许面板的中间展开状态（类似于谷歌地图）在屏幕的中间设置一个锚点。
（9）您可以设置PanelSlideListener监控左右推拉窗格事件。
（10）您也可以通过更改布局顶部的layout_gravity属性使得从顶部面板滑出。
（10）通过设置umanoScrollInterpolator属性为面板移动滚动插补器。举例来说，如果你想为面板反弹或超调的效果。
（11）默认情况下，面板推高的主要内容。你可以把它叠加使用setOverlayed方法或属性umanoOverlay主要内容。这是有用的，如果你想使滑动布局半透明。您还可以设置umanoClipPanel为false，使面板非叠加模式透明。
（12）默认情况下，当面板向上滑动的主要内容变暗。您可以通过更改umanoFadeColor改变暗淡的颜色。将其设置为“@android：彩色/透明”以彻底删除调光。
PanelState提供了面板的几个状态：
(1)EXPANDED : 全部展开状态
(2)COLLAPSED:默认状态
(3)ANCHORED:锚点
(4)HIDDEN:隐藏状态
(5)DRAGGING:拖动状态

杨天福911

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
可拖动的滑动面板和Menu的实现（SlidingUpPanelLayout）

布局文件：一、该控件的使用方式：（1）在你moudle的gradle中引用： repositories { mavenCentral() } compile ‘com.sothree.slidinguppanel:library:3.3.1’（2）使用com.sothree.slidinguppanel.SlidingUpPanelLayout作为
复制链接

扫一扫