可拖动的滑动面板和Menu的实现(SlidingUpPanelLayout)

来源:互联网 发布:centos 6 vsftp 配置 编辑:程序博客网 时间:2024/06/04 18:56

布局文件:

一、该控件的使用方式:

(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.}  


  1. 添加菜单:
    可以在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:拖动状态

阅读全文
0 0