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

xiaoxiao2021-02-28 135

布局文件：

一、该控件的使用方式：

（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">  <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>  <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

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>链接：</b><br/> Brought to you by<br/><a href="http://write.blog.csdn.net/postlist?ticket=ST-436121-sux01OEF0td1YcAOyoIh-passport.csdn.net">我的滑动面板</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>

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:拖动状态

转载请注明原文地址: https://www.6miu.com/read-72807.html

技术

最新回复(0)

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

布局文件：

资源文件：

Menu用法：

技术