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 { @Override
protected 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>

代码运行结果:

初始化状态:

Android音乐、视频类APP常用控件:DraggablePanel(1)

向下拖曳时候渐变:

Android音乐、视频类APP常用控件:DraggablePanel(1)

拖曳到最底部的情形:

Android音乐、视频类APP常用控件:DraggablePanel(1)

又拖曳机器人向上:

Android音乐、视频类APP常用控件:DraggablePanel(1)

mainListView在一定程度上可以理解为“背景全部数据”。

DraggableView将是随用户拖曳产生交互响应的面板,在DraggableView里面,再套两层Android View,本例是一个简单的ImageView和一个ListView,ImageView在上,ListView在下,这两者套在DraggableView里面,随用户的拖曳动作产生相应的拖曳滑动。

附录相关文章:

1,《Android自底部平滑向上滑出面板的AndroidSlidingUpPanel》链接地址:http://blog.csdn.net/zhangphil/article/details/51444509

上一篇:PAT Basic 1006


下一篇:CYQ.Data 数据框架 V3.5 开源版本发布(源码提供下载)