GL音乐播放器—-界面设计

现在的位置: 首页 > 综合 > 正文

GL音乐播放器<二>—-界面设计

2014年04月05日 ⁄ 综合 ⁄ 共 12659字 ⁄ 字号小中大 ⁄ 评论关闭

首先是主界面

GL音乐播放器二----界面设计 - Google在奋斗~ - Googleの博客

布局文件代码：

<?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/background11">//背景

	<RelativeLayout 

	android:id="@+id/ListLayout"

	android:layout_width="fill_parent"

	android:layout_height="fill_parent"

	android:layout_marginTop="4dp" 

	android:layout_marginBottom="42dp"

	>   

    

		<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>

		<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" />

	    

	    <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="GL音乐库"

	 		android:textColor="#666666"

	 		android:textSize="20dp"

	        android:background="@drawable/prompt">

	        </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">  	  

			<include layout="@layout/sliderdrawer_handle_layout"></include>	//我写的两种布局文件，下面会公开代码	

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

     </com.genius.widget.MySlidingDrawer >

	<RelativeLayout 

	android:id="@+id/VirtualLayout"

	android:layout_width="fill_parent"

	android:layout_height="fill_parent"

	android:background="#60000000"

	android:visibility="invisible">

	</RelativeLayout>

	  	

</RelativeLayout>

因为xml文件注释太麻烦了，小谷子我为了图简单，就用不同颜色的字体当注释了，希望你能谅解。

sliderdrawer_content_layout布局

GL音乐播放器二----界面设计 - Google在奋斗~ - Googleの博客

sliderdrawer_content_layout布局文件

<?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"
        android:background="@color/listview_background"    >      
   <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
                android:visibility="gone" 
                android:layout_toLeftOf="@id/buttonVolumn"
                android:layout_toRightOf="@id/buttonMode"
                
            android:id="@+id/ll_player_voice"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/player_progresslayout_bg"
             >
            <SeekBar
                android:id="@+id/GL_player_voice"
                
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:paddingLeft="5dp"
      android:paddingRight="5dp"
   android:progressDrawable="@drawable/seekbar_style"  
         android:max="15"
      android:background="@drawable/progress_buffering" 
                android:thumb="@drawable/voice_seekbar_thumb" />
        </RelativeLayout>
   <RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >
        <FrameLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/ablumlayout_bg" >
            <ImageView
                android:id="@+id/iv_music_ablum"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:layout_gravity="center"
                android:src="@drawable/default_album"/>
        </FrameLayout>
        <FrameLayout
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:background="@drawable/ablumlayout_reflection_bg" >
            <ImageView
                android:id="@+id/iv_music_ablum_reflection"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:layout_gravity="center"/>
        </FrameLayout>
    </LinearLayout>
</RelativeLayout>   
  </RelativeLayout>  
    
  <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_btn1">
         </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_btn1">
         </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_btn1">
         </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>
     
         
  <com.genius.demo.LrcView  
   android:id="@+id/lrcShowView"  
   android:layout_width="match_parent"  
   android:layout_height="100dip"  
   android:gravity="center"
    android:layout_above="@+id/progressLayout" 
   android:layout_centerHorizontal="true" /> 
            
        
     <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>

sliderdrawer_handle_layout布局

sliderdrawer_handle_layout布局文件

<?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>

最后是效果图

【上篇】GL音乐播放器—代码实现<一>
【下篇】GL音乐播放器<一>—项目计划书

作者: bassist

该日志由 bassist 于10年前发表在综合分类下，最后更新于 2014年04月05日.
转载请注明: GL音乐播放器<二>—-界面设计 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

GL音乐播放器<二>—-界面设计

作者: bassist

书签

最新文章New

本站推荐

返回首页