布局文件:
一、该控件的使用方式:
(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();
}
}
}
Menu用法:
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:拖动状态