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

小鱼儿 2024-02-17 17:32 6阅读 0赞

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

附录文章1主要演示了如何使用DraggablePanel 的DraggableView。DraggablePanel除了DraggableView外，本身DraggablePanel与DraggableView不同的是，DraggableView是一个轻量级的“View”， 而DraggablePanel是一个重的面板、“平台”可以承载更重的如Android Fragment的组件。  
写一个测试的MainActivity.java：

package zhangphil.demo;
    
    import com.github.pedrovgs.DraggableListener;
    import com.github.pedrovgs.DraggablePanel;
    
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentActivity;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.ViewGroup;
    import android.widget.TextView;
    import android.widget.Toast;
    
    public class MainActivity extends FragmentActivity {
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		final DraggablePanel draggablePanel = (DraggablePanel) findViewById(R.id.draggable_panel);
    		findViewById(R.id.image).setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				draggablePanel.maximize();
    			}
    		});
    
    		// 注意！添加的监听事件需要放在初始化之前，否则可能无法正常达到监听效果。
    		draggablePanel.setDraggableListener(new DraggableListener() {
    
    			@Override
    			public void onMaximized() {
    				Toast.makeText(getApplication(), "onMaximized", Toast.LENGTH_SHORT).show();
    			}
    
    			@Override
    			public void onMinimized() {
    				Toast.makeText(getApplication(), "onMinimized", Toast.LENGTH_SHORT).show();
    			}
    
    			@Override
    			public void onClosedToLeft() {
    				Toast.makeText(getApplication(), "onClosedToLeft", Toast.LENGTH_SHORT).show();
    			}
    
    			@Override
    			public void onClosedToRight() {
    				Toast.makeText(getApplication(), "onClosedToRight", Toast.LENGTH_SHORT).show();
    			}
    		});
    
    		draggablePanel.setFragmentManager(getSupportFragmentManager());
    		draggablePanel.setTopFragment(new MyTopFragment());
    		draggablePanel.setBottomFragment(new MyBottomFragment());
    		draggablePanel.initializeView();
    	}
    
    	private static class MyTopFragment extends Fragment {
    		@Override
    		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    			View v = inflater.inflate(android.R.layout.simple_list_item_1, null);
    			v.setBackgroundColor(0xFFEF5350);
    			TextView text = (TextView) v.findViewById(android.R.id.text1);
    			text.setText("zhang phil @ csdn , 顶");
    			return v;
    		}
    	}
    
    	private static class MyBottomFragment extends Fragment {
    		@Override
    		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    			View v = inflater.inflate(android.R.layout.simple_list_item_1, null);
    			v.setBackgroundColor(0xFF42A5F5);
    			TextView text = (TextView) v.findViewById(android.R.id.text1);
    			text.setText("zhang phil @ csdn , 底");
    			return v;
    		}
    	}
    }

所需的activity\_main.xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:draggable_panel="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ic_launcher" />
    
        <com.github.pedrovgs.DraggablePanel
            android:id="@+id/draggable_panel"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            draggable_panel:enable_horizontal_alpha_effect="false"
            draggable_panel:top_fragment_height="200dip"
            draggable_panel:top_fragment_margin_bottom="20dip"
            draggable_panel:top_fragment_margin_right="20dip"
            draggable_panel:x_scale_factor="2.3"
            draggable_panel:y_scale_factor="2.3" />
    
    </FrameLayout>

代码运行结果，从顶向底拖曳，然后到底后再水平向左拖曳，最终点击Android小机器人使之复位，如图所示：

![Center][]

![Center 1][]

![Center 2][]

![Center 3][]

![Center 4][]

代码中写了两个不同的Android Fragment加载到DraggablePanel中，分别为top和bottom。

附录文章：  
1，《Android音乐、视频类APP常用控件：DraggablePanel（1）》链接地址：[http://blog.csdn.net/zhangphil/article/details/51566860][http_blog.csdn.net_zhangphil_article_details_51566860]  
2，《Android自底部平滑向上滑出面板的AndroidSlidingUpPanel》链接地址：[http://blog.csdn.net/zhangphil/article/details/51444509][http_blog.csdn.net_zhangphil_article_details_51444509]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/7eb825def6e74cbe8978284257c441fc.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/5c2f8c48381d4ecd8ef8e3b073b90d43.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f02ea83502dd4730adbde2a6ee91bc3f.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/77efe8d3f462451d9d4875fb86d4c1ca.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/49dc90b45eec471c812a60f2e80005e8.png
[http_blog.csdn.net_zhangphil_article_details_51566860]: http://blog.csdn.net/zhangphil/article/details/51566860
[http_blog.csdn.net_zhangphil_article_details_51444509]: http://blog.csdn.net/zhangphil/article/details/51444509