android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

      本来想给大家讲解一个饭否的开源项目,结果发现公司网端被封,模拟器是无法跳过防火墙上网的,设置了AVD的DNS也不行,没办法只能转向无internet连接的项目讲解,正好昨天论坛上有一个人问我关于音乐播放器的问题,那这次就一个常用的音乐播放项目作为讲解内容,多的不说还是先上图:

 android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果 android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

 android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

                                               

      对于音乐播放器的框架我就不说了,因为项目不是很大,但是也不小,所以今天我先介绍下主界面的UI设计,我们先看主界面看感觉很简单一个listview显示歌曲,listview下面有个按钮,点击以后会想上滑动出歌曲的详细界面,这里和开源的sildemenu很像,不过sildemenu现在只能水平方向滑动,其实这里是实现抽屉效果,自定义SlidingDrawer,好的,今天就介绍如何实现SlidingDrawer的UI设计。

      首先主界面的xml如下:

<?xml version="1.0"encoding="utf-8"?>

<RelativeLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/mainLayout"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="@drawable/background">

       

        这里是设置背景图片

       

   

        <RelativeLayout

        android:id="@+id/ListLayout"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_marginTop="4dp"

        android:layout_marginBottom="42dp"

        android:background="@drawable/listlayout_bg">

              

   

               <ListView

            android:id="@+id/listView"

           android:layout_height="fill_parent"

           android:layout_width="fill_parent"

            android:layout_marginTop="60dp"

            android:layout_marginLeft="6dp"

            android:layout_marginRight="6dp"

                android:cacheColorHint="#00000000"   

               android:divider="@color/divider_color"

            android:dividerHeight="1dp"

            android:scrollbars="none"

           android:listSelector="@drawable/selector_list_item">

            </ListView>

               这里是设置音乐的listview

               <View

           android:background="@drawable/shape_line"

                android:layout_marginTop="60dp"

            android:layout_marginLeft="6dp"

               android:layout_marginRight="6dp"

           android:layout_width="fill_parent"

            android:layout_height="1dp" />

            最上方button和listview中间的白线

            <RelativeLayout

               android:id="@+id/ListTitle"

           android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:minHeight="60dp"

               android:layout_alignParentTop="true"

            android:layout_marginLeft="6dp"

               android:layout_marginRight="6dp"

               >

       

                       <Button

               android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                       android:layout_centerInParent="true"

                       android:text="Aimn音乐库"

                       android:textColor="#666666"

                       android:textSize="20dp"

               android:background="@drawable/prompt">

                </Button>     

                这里设置最上方的button

               </RelativeLayout>

           

        </RelativeLayout>

       

 

   

 

        <com.genius.widget.MySlidingDrawer 

        android:id="@+id/slidingDrawer"

        android:layout_width="fill_parent" 

        android:layout_height="fill_parent" 

    android:handle="@+id/handle" 

        android:content="@+id/content"

        android:topOffset="10dp">        

                       <includelayout="@layout/sliderdrawer_handle_layout"></include>       

                       <includelayout="@layout/sliderdrawer_content_layout"></include>    

     </com.genius.widget.MySlidingDrawer>

        这里就是最关键的自定义SlidingDrawer的加载。
        <RelativeLayout

            android:id="@+id/VirtualLayout"

           android:layout_width="fill_parent"

           android:layout_height="fill_parent"

           android:layout_alignParentLeft="true"

           android:layout_alignParentTop="true"

            android:background="#60000000"

            android:visibility="invisible">

        </RelativeLayout>

               

</RelativeLayout>


   这里可以看到两个include layout,分别绑定id为handle和content,这两个layout是什么了,首先我们来看名为handle的layout,xml如下:

<?xml version="1.0"encoding="utf-8"?>

<LinearLayout

         xmlns:android="http://schemas.android.com/apk/res/android"

          android:id="@+id/handle"

          android:orientation="vertical"

          android:layout_width="fill_parent"

         android:layout_height="wrap_content"

         android:gravity="center_horizontal">

         

                  <ImageButton 

                  android:id="@+id/handler_icon"

                  android:layout_width="fill_parent"

                 android:layout_height="wrap_content"

                 android:background="@drawable/selector_handle_bar"

                 android:src="@drawable/handle_up">

                  </ImageButton>

 

                  <RelativeLayout

                  android:layout_width="fill_parent"

                 android:layout_height="wrap_content"

                 android:background="@drawable/handlelayout_bg">

                      

                             

                           <ImageButton 

                           android:id="@+id/cutlineleft"

                          android:layout_width="wrap_content"

                          android:layout_height="wrap_content"

                          android:background="@drawable/cut_line"

                           android:layout_marginLeft="50dp"

                          android:layout_alignParentLeft="true">

                           </ImageButton>

                          

                          

                            <RelativeLayout

                            android:id="@+id/handle_panel"

                                android:layout_width="wrap_content"

                                android:layout_height="wrap_content">                                       

                                   <ImageButton 

                                   android:id="@+id/handler_play"

                                   android:layout_width="wrap_content"

                                  android:layout_height="wrap_content"

                                  android:background="@drawable/handle_play_normal"

                                      android:layout_alignParentLeft="true"

                                      android:layout_marginLeft="5dp"

                                  android:layout_centerVertical="true"

                                  android:visibility="invisible">

                                   </ImageButton>

                                  

                                   <ImageButton 

                                   android:id="@+id/handler_pause"

                                  android:layout_width="wrap_content"

                                  android:layout_height="wrap_content"

                                   android:background="@drawable/handle_pause_normal"

                                      android:layout_alignParentLeft="true"

                                      android:layout_marginLeft="5dp"

                                  android:layout_centerVertical="true"

                                  android:visibility="invisible">

                                   </ImageButton>                                             

                                </RelativeLayout>

                                 

            

                           <ImageButton 

                      android:id="@+id/cutlineright"

                          android:layout_width="wrap_content"

                          android:layout_height="wrap_content"

                          android:background="@drawable/cut_line"

                           android:layout_marginRight="50dp"

                           android:layout_alignParentRight="true">

                           </ImageButton>

                         

                         

                      

                         

                           <TextView

                               android:id="@+id/textSongNum"  

                               android:layout_width="50dp"

                          android:layout_height="wrap_content"     

                           android:text="0/0"        

                           android:color="#999999"

                          android:layout_alignParentRight="true"

                          android:layout_centerVertical="true"

                           android:gravity="center"

                           android:textStyle="bold"

                       android:singleLine="true"

                       ></TextView>

                      

                      

                      

                               <TextView

                               android:id="@+id/textPlaySong"  

                               android:layout_width="wrap_content"

                          android:layout_height="wrap_content"     

                          android:text="@string/default_title_name"        

                           android:color="#999999"

                          android:layout_centerInParent="true"

                           android:layout_marginLeft="60dp"

                               android:layout_marginRight="60dp"

                           android:ellipsize="marquee"

                           android:textStyle="bold"

                           android:textSize="18sp"

                       android:singleLine="true"

                       android:focusable="true"

                      android:focusableInTouchMode="true"></TextView>

                             

                  </RelativeLayout>

                 

</LinearLayout>


   这里有很多控件,但是其实很简单,只是为了实现下图红色框的功能:

android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

      那content的layout就不用我细说了,是实现抽屉拉出的那个界面,具体xml:

<?xml version="1.0"encoding="utf-8"?>

<RelativeLayout        xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/content"

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

        android:background="@drawable/slidercontent_bg">     

                                     

               <RelativeLayout

               android:id="@+id/setlayout"

               android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true">        

                       <ImageButton

                       android:id="@+id/buttonMode"

                       android:layout_width="wrap_content"

                  android:layout_height="wrap_content"

                  android:src="@drawable/mode_list_loop"

                  android:background="@drawable/selector_mode_set"

                  android:layout_alignParentLeft="true">

                       </ImageButton>

                      

                       <ImageButton

                       android:id="@+id/buttonVolumn"

                       android:layout_width="wrap_content"

                  android:layout_height="wrap_content"

                       android:src="@drawable/voice"

                  android:background="@drawable/selector_volum_set"

                  android:layout_alignParentRight="true">

                       </ImageButton>                               

               </RelativeLayout>

                              

              

               <com.genius.widget.GalleryFlow

               android:id="@+id/imageGallery1"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_centerInParent="true">

               </com.genius.widget.GalleryFlow>

              

               <com.genius.widget.GalleryFlow

               android:id="@+id/imageGallery2"

               android:layout_width="fill_parent"

               android:layout_height="wrap_content"

               android:layout_centerInParent="true">

               </com.genius.widget.GalleryFlow>             

                                     

               <RelativeLayout

            android:id="@+id/miniplayLayout"

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

                android:background="@drawable/playcontrol_bg"

           android:layout_alignParentBottom="true"

            android:gravity="center">        

           

                <ImageButton

                android:id="@+id/buttonStop"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_alignParentLeft="true"

               android:layout_centerVertical="true"

                android:layout_weight="1"

               android:src="@drawable/player_stop"

               android:background="@drawable/selector_music_btn">

                </ImageButton>

               

               

                <ImageButton

                android:id="@+id/buttonMenu"

                android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_alignParentRight="true"

               android:layout_centerVertical="true"

                android:layout_weight="1"

                android:src="@drawable/menu"

                android:background="@drawable/selector_music_btn">

                </ImageButton>        

                                   

                <ImageButton

               android:id="@+id/buttonPlayPre"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_toRightOf="@id/buttonStop"

               android:layout_centerVertical="true"

               android:src="@drawable/player_pre"

               android:background="@drawable/selector_music_btn">

                </ImageButton>

               

                <ImageButton

               android:id="@+id/buttonPlayNext"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_toLeftOf="@id/buttonMenu"

               android:layout_centerVertical="true"

                android:layout_weight="1"

               android:src="@drawable/player_next"

               android:background="@drawable/selector_music_btn">

                </ImageButton>        

               

               

                <ImageButton

                android:id="@+id/buttonPlay"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

                       android:layout_centerInParent="true"

                       android:layout_centerVertical="true"

                android:layout_weight="1"

               android:src="@drawable/player_play"

                android:background="@drawable/selector_music_btn">

                </ImageButton>

               

                <ImageButton

                android:id="@+id/buttonPause"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

                android:layout_centerInParent="true"

                android:layout_weight="1"

               android:src="@drawable/player_pause"

               android:background="@drawable/selector_music_btn"

               android:visibility="invisible">

                </ImageButton>

               

 

       

               

 

                      

            </RelativeLayout>

                                  

                                  

            <RelativeLayout

               android:id="@+id/progressLayout"

               android:layout_above="@id/miniplayLayout" 

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

            android:gravity="center_vertical"

               android:background="@drawable/progresslayout_bg">

       

       

                <TextView

                   android:text="00:00"

                   android:id="@+id/textViewCurTime"

                  android:layout_width="wrap_content"

                   android:layout_height="wrap_content"

                   android:layout_marginLeft="10dp"

                android:layout_marginRight="10dp"

                android:textColor="@android:color/white"

                android:textStyle="bold"

                  android:layout_alignParentLeft="true">

                   </TextView>

                  

                   <TextView

                   android:text="00:00"

                  android:id="@+id/textViewTotalTime"

                  android:layout_width="wrap_content"

                  android:layout_height="wrap_content"

                       android:layout_marginLeft="10dp"

                       android:layout_marginRight="10dp"

                       android:textColor="@android:color/white"

                       android:textStyle="bold"

                  android:layout_alignParentRight="true">

                   </TextView>

                              

                              

                       <SeekBar

                       android:id="@+id/seekBar"

                       android:layout_width="fill_parent"

                       android:layout_height="wrap_content" 

                        android:layout_toRightOf="@id/textViewCurTime"

                       android:layout_toLeftOf="@id/textViewTotalTime"

                       android:paddingLeft="5dp"

                       android:paddingRight="5dp"

                       android:max="100"

                       android:progressDrawable="@drawable/seekbar_style" 

                       android:thumb="@drawable/seekbar_thumb"

                       android:background="@drawable/progress_buffering">

                       </SeekBar>

 

               </RelativeLayout>

                                                            

</RelativeLayout>


   可视化布局文件其实如下图:

 android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

      布局写好了,我们就该来自定义这个SlidingDrawer,首先我们需要去官网上看看SlidingDrawer的API,里面有很多方法,我就不细说了,因为我也不懂,哈哈,但是我们重点要知道这个方法onInterceptTouchEvent的方法,ontouch拦截器,为什么要知道这个ontcouh拦截器,因为一会我们要把抽屉的拉出,缩回效果写在里面,为什么写在

onInterceptTouchEvent而不写在ontouch里面,这里我就不细说了,大家可以百度一下他们之间的关系。要怎么写了,抽屉效果其实就是把下面控件往上拉,上面的控件被挤出去的思路,或者反之,所以这里我们首先要获取控件位置,然后计算出新的位置,让相应控件显示到新的位置,由此刷新UI界面。代码如下:

 

public class MySlidingDrawerextends SlidingDrawer{

    private int mHandleId = 0;                 //抽屉行为控件ID

    private int[] mTouchableIds = null;              //Handle部分其他控件ID

   

    private IOnSliderHandleViewClickListenermTouchViewClickListener;

   

    public int[] getTouchableIds() {

        return mTouchableIds;

    }

 

    public void setTouchableIds(int[]mTouchableIds) {

        this.mTouchableIds = mTouchableIds;

    }

 

    public int getHandleId() {

        return mHandleId;

    }

 

    public void setHandleId(int mHandleId) {

        this.mHandleId = mHandleId;

    }

   

   

   

    public voidsetOnSliderHandleViewClickListener(IOnSliderHandleViewClickListener listener)

    {

        mTouchViewClickListener= listener;

    }

 

    public MySlidingDrawer(Context context,AttributeSet attrs) {

        super(context, attrs);

    }

   

    public MySlidingDrawer(Context context,AttributeSet attrs, int defStyle){

        super(context, attrs, defStyle);

    }

   

    /*

     * 获取控件的屏幕区域

     */

    public Rect getRectOnScreen(View view){

        Rect rect = new Rect();

        int[] location = new int[2];

        View parent = view;

        if(view.getParent() instanceof View){

            parent = (View)view.getParent();

        }

        parent.getLocationOnScreen(location);

        view.getHitRect(rect);

        rect.offset(location[0], location[1]);

    

        return rect;

    }

   

 

    public booleanonInterceptTouchEvent(MotionEvent event) {

         // 触摸位置转换为屏幕坐标

        int[] location = new int[2];

        int x = (int)event.getX();

        int y = (int)event.getY();

        this.getLocationOnScreen(location);

        x += location[0];

        y += location[1];

  

 

       

        if(mTouchableIds != null){

           for(int id :mTouchableIds){

                View view =findViewById(id);    

                if (view.isShown())

                {

                        Rect rect =getRectOnScreen(view);  

                     if(rect.contains(x,y)){

                     

                     if (event.getAction() ==MotionEvent.ACTION_DOWN)

                     {

                         if(mTouchViewClickListener != null)

                         {

                         mTouchViewClickListener.onViewClick(view);

                         }

                     }           

                         return true;

                     }

                }       

            }

        }

      

       

         //抽屉行为控件

       if(event.getAction() ==MotionEvent.ACTION_DOWN && mHandleId != 0){

            View view =findViewById(mHandleId);

            Rect rect = getRectOnScreen(view);

            if(rect.contains(x, y)){//点击抽屉控件时交由系统处理

            {

                returnsuper.onInterceptTouchEvent(event);

            }

            }else{

                return false;

            }

        }

       

        returnsuper.onInterceptTouchEvent(event);

    }

   

    @Override

    public boolean onTouchEvent(MotionEventevent) {

        return super.onTouchEvent(event);

    }

 

}


   今天就先说到这儿,重点是让大家了解抽屉效果SlidingDrawer的自定义和这个音乐播放器的UI设计,关于如何用我们这个自定义的SlidingDrawer,下章内容会详细介绍。关于源码,会在该音乐播放器的最后一节上上传。

 

android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果,布布扣,bubuko.com

android高分段进阶攻略(7)音乐播放器UI设计——抽屉效果

上一篇:在eclipse中通过wifi调试android程序


下一篇:Android中.9.png图片的使用过程和原理