Android音乐、视频类APP常用控件：DraggablePanel（1）



Android音乐、视频类APP常用控件：DraggablePanel（1）

Android的音乐视频类APP开发中，常涉及到用户拖曳视频、音乐播放器产生一定交互响应的设计需求，最典型的以YouTube APP为例。
YouTube在开发中，有用到一个第三方开源的可拖曳面板：DraggablePanel。DraggablePanel在github上的项目主页：https://github.com/pedrovgs/DraggablePanel
DraggablePanel的设计效果如动图所示，动图查看链接：https://github.com/pedrovgs/DraggablePanel/tree/develop/art

写一个DraggableView的小例子。
测试的主activity MainActivity.java：

package zhangphil.demo;import android.app.Activity;import android.os.Bundle;import android.widget.ArrayAdapter;import android.widget.ListView;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);String[] data1 = new String[50];for (int i = 0; i < data1.length; i++)data1[i] = "item:" + i;ArrayAdapter adapter1 = new ArrayAdapter(this, android.R.layout.simple_list_item_1, android.R.id.text1, data1);ListView mainListView = (ListView) findViewById(R.id.mainListView);mainListView.setAdapter(adapter1);ListView secondListView = (ListView) findViewById(R.id.secondListView);String[] data2 = { "Z", "H", "A", "N", "G", "P", "H", "I", "L" };ArrayAdapter arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, android.R.id.text1,data2);secondListView.setAdapter(arrayAdapter);}}

布局文件activity_main.xml：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <ListView        android:id="@+id/mainListView"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <!-- Draggable View -->    <com.github.pedrovgs.DraggableView        xmlns:draggable_view="http://schemas.android.com/apk/res-auto"        android:id="@+id/draggable_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        draggable_view:bottom_view_id="@+id/secondListView"        draggable_view:top_view_id="@+id/image"        draggable_view:top_view_margin_bottom="20dip"        draggable_view:top_view_margin_right="20dip"        draggable_view:top_view_x_scale_factor="2.0"        draggable_view:top_view_y_scale_factor="2.0" >        <ListView            android:id="@+id/secondListView"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_below="@+id/image"            android:background="#EF5350" />                <ImageView            android:id="@+id/image"            android:layout_width="match_parent"            android:layout_height="200dip"            android:layout_alignParentTop="true"            android:background="#42A5F5"            android:src="@drawable/ic_launcher" />            </com.github.pedrovgs.DraggableView></RelativeLayout>

代码运行结果：

初始化状态：

向下拖曳时候渐变：

拖曳到最底部的情形：

又拖曳机器人向上：

mainListView在一定程度上可以理解为“背景全部数据”。
DraggableView将是随用户拖曳产生交互响应的面板，在DraggableView里面，再套两层Android View，本例是一个简单的ImageView和一个ListView，ImageView在上，ListView在下，这两者套在DraggableView里面，随用户的拖曳动作产生相应的拖曳滑动。

附录相关文章：
1，《Android自底部平滑向上滑出面板的AndroidSlidingUpPanel》链接地址：http://blog.csdn.net/zhangphil/article/details/51444509