今天研究了一個別人寫的仿多米音樂的源碼,其中有一個功能是抽拉的效果,能夠把兩個界面的內容顯示在一個activity中,利用抽拉實現多內容顯示。本身經過摸索參考網上解釋實現這一功能,並實現了本身想要的一個功能(爲一個程序添加這個功能),接下來上圖,沒圖說個MX。java
SlidingDrawer是一個能夠實現抽取式顯示的控件,能夠垂直,水平拉取,每一個抽屜都包含兩個東西:一個是拉手(handle),一個是抽屜裏面的東西(content),SlidingDrawer須要放置在另外的一個layout之上,這意味着SlidingDrawer只能放置在 FrameLayout or a RelativeLayout裏面。SlidingDrawer須要設置寬高爲match_parent,並且在SlidingDrawer裏面必須設置handle與content:。SlidingDrawer隱藏屏外的內容,並容許用戶經過handle以顯示隱藏內容。它能夠垂直或水平滑動,它有倆個View組成,其一是能夠拖動的 handle,其二是隱藏內容的View。它裏面的控件必須設置佈局,在佈局文件中必須指定handle和content。android
官方文檔中的描述是:web
- public class SlidingDrawerextends ViewGroupjava.lang.Object Android.view.View android.view.ViewGroup android.widget.SlidingDrawer
原文:SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen. SlidingDrawer can be used vertically or horizontally. A special widget composed of two children views: the handle, that the users drags, and the content, attached to the handle and dragged with it. SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance. The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions. Inside an XML layout, SlidingDrawer must define the id of the handle and of the content:app
主佈局配置文件內容:layout/main.xml
ide
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/background"
- android:orientation="vertical" >
- <LinearLayout
- android:id="@+id/linearLayout"
- android:layout_width="fill_parent"
- android:layout_height="80px"
- android:background="#0000ff"
- >
- <TextView
- android:id="@+id/textView1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="該區域大小可經過抽屜控制(馬國會)"
- android:textAppearance="?android:attr/textAppearanceMedium" />
- </LinearLayout>
- <SlidingDrawer
- android:id="@+id/slidingdrawer"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:content="@+id/content"
- android:handle="@+id/handle"
- android:orientation="horizontal"
- >
- <Button
- android:id="@+id/handle"
- android:layout_width="wrap_content"
- android:layout_height="fill_parent"
- android:background="@drawable/handle" />
- <ListView
- android:id="@+id/content"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- />
- </SlidingDrawer>
- </LinearLayout>
- ListView條目項顯示內容佈局文件。layout/listview_layout.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff" >
- <LinearLayout
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/listview_selected"
- android:padding="6px">
- <TextView
- android:id="@+id/webName"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textSize="20px"
- android:textColor="#000000"/>
- <TextView
- android:id="@+id/webDescript"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textSize="16px"
- android:textColor="#000000"/>
- </LinearLayout>
- </LinearLayout>
組件運行時的狀態信息配置文件。drable/handle.xml(按鈕在按住和正常狀態顯示不一樣圖片)佈局
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_window_focused="false" android:drawable="@drawable/handle_normal" />
- <item android:state_focused="true" android:drawable="@drawable/handle_focused" />
- <item android:state_pressed="true" android:drawable="@drawable/handle_pressed" />
- </selector>
組件運行時的狀態信息配置文件。drable/listview_selected.xml(listview選項選中效果)動畫
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_pressed="true"
- android:drawable="@drawable/list_selector_background_pressed" />
- </selector>
java類文件,activity代碼:com.magh.test.SlidingDrawerTestActivity.javaui
- package com.magh.test;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.LayoutInflater;
- import android.view.MotionEvent;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.LinearLayout;
- import android.widget.ListView;
- import android.widget.TextView;
- /**
- * @author Ma Guohui
- * @FileDescription:SlidingDrawer實現伸拉效果案例
- * @version 2012-12-17 下午7:33:06
- * @ChangeList:
- */
- public class SlidingDrawerTestActivity extends Activity {
- /** Called when the activity is first created. */
- private ListView myListView;
- LinearLayout mLinearLayout;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- setupViews();
- actionProcess();
- }
- private void setupViews() {
- myListView = (ListView) findViewById(R.id.content);
- myListView.setAdapter(new ListViewAdapter());
- }
- private void actionProcess() {// 伸拉操做時執行不一樣事件
- android.widget.SlidingDrawer mDrawer = (android.widget.SlidingDrawer) findViewById(R.id.slidingdrawer);
- // mDrawer.open(); //設置抽屜爲打開狀態
- mLinearLayout = (LinearLayout) findViewById(R.id.linearLayout); // 獲取須要控制區域的佈局
- mDrawer.setOnDrawerOpenListener(new android.widget.SlidingDrawer.OnDrawerOpenListener() {
- public void onDrawerOpened() {// 當抽屜打開時執行此操做
- // TODO Auto-generated method stub
- LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) mLinearLayout
- .getLayoutParams();
- linearParams.height = 40;
- mLinearLayout.setLayoutParams(linearParams);
- }
- });
- mDrawer.setOnDrawerCloseListener(new android.widget.SlidingDrawer.OnDrawerCloseListener() {
- public void onDrawerClosed() {// 抽屜關閉時執行此操做
- // TODO Auto-generated method stub
- LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) mLinearLayout
- .getLayoutParams();
- linearParams.height = 80;
- mLinearLayout.setLayoutParams(linearParams);
- }
- });
- mDrawer.setOnTouchListener(new View.OnTouchListener() {
- @Override
- public boolean onTouch(View v, MotionEvent event) {
- // TODO Auto-generated method stub
- return false;
- }
- });
- }
- private class ListViewAdapter extends BaseAdapter {// 自定義ListView適配器
- // 這裏返回10行,ListView有多少行取決於getCount()方法
- @Override
- public int getCount() {
- return 8;
- }
- @Override
- public Object getItem(int arg0) {
- return null;
- }
- @Override
- public long getItemId(int arg0) {
- return 0;
- }
- @Override
- public View getView(int position, View v, ViewGroup parent) {
- final LayoutInflater inflater = LayoutInflater
- .from(getApplicationContext());
- if (v == null) {
- v = inflater.inflate(R.layout.listview_layout, null);
- }
- TextView myWebName = (TextView) v.findViewById(R.id.webName);
- TextView myWebDescript = (TextView) v
- .findViewById(R.id.webDescript);
- myWebName.setText("Android小功能案例" + position);
- myWebDescript.setText("本身動手,豐衣足食,馬國會" + position);
- return v;
- }
- }
- }
- /*
- * 重要屬性 android:allowSingleTap:指示是否能夠經過handle打開或關閉
- * android:animateOnClick:指示是否當使用者按下手柄打開/關閉時是否該有一個動畫。
- * android:content:隱藏的內容
- * android:handle:handle(手柄)
- *
- * 重要方法 animateClose():關閉時實現動畫
- * close():即時關閉 getContent():獲取內容
- * isMoving():指示SlidingDrawer是否在移動 * isOpened():指示SlidingDrawer是否已所有打開
- * lock():屏蔽觸摸事件 setOnDrawerCloseListener(SlidingDrawer.OnDrawerCloseListener
- * onDrawerCloseListener):SlidingDrawer關閉時調用 unlock():解除屏蔽觸摸事件
- * toggle():切換打開和關閉的抽屜SlidingDrawer
- */